how to change display:none to display:block when clicking on button code example

Example 1: how to make a div appear onclick

function showDiv() {
  document.getElementById('sign-in').style.display = "block";
}

Example 2: how to make a div appear onclick

<a class="btn btn-default log-bar" href="#" role="button" onclick="showDiv()">Login</a>


<div id="sign-in" class="login" style="display: none;">
  <form>
    <div class="row">
      <div class="col-md-3">
        <div class="form-group inline-form">
          <input type="email" class="form-control" id="email" Placeholder="email">
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group inline-form">
          <input type="password" class="form-control" id="pwd">
        </div>
      </div>
      <div class="col-md-3">
        <div class="checkbox">
          <label><input type="checkbox"> Remember me</label>
        </div>
      </div>
      <div class="col-md-3">
        <button type="submit" class="btn btn-default ">Submit</button>
      </div>
    </div>
  </form>
</div>