Btn Action

by JQ Purfect

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<div class="container center">
  <div class="row">
    <div class="col-sm-12">
      <div class="col-sm-4">
        <button class="btn btn-primary">
          I am an action Button
        </button>
      </div>
      <div class="col-sm-4">
        <button class="btn btn-success">
          I am an action Button
        </button>
      </div>
      <div class="col-sm-4">
        <button class="btn btn-warning">
          I am an action Button
        </button>
      </div>
    </div>
    <!-- Show contents -->
    <div class="col-sm-12">
      <div id="myContent" style="display: none; padding:20px; background: #E8E8E8; margin-top: 15px;">
        <div>this is a test #1 </div>
      </div>
    </div>
  </div>
</div>

CSS

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
  text-align: center;
  background: #E8E8E8;
  margin-top: 20px;
  padding: 10px;
}

JavaScript

$("button").click(function() {
  $("#myContent").toggle();
});