Toggle to show a division

      No Comments on Toggle to show a division




Toggle to show a division can work with to methods:

Using in built Bootstrap Collapse

Here is a demo:

Panel Body …Add your content here

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible division</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body ...Add your content here</div>
      <div class="panel-footer">Panel Footer(Add relevant footer content)</div>
    </div>
  </div>
</div>

Using CSS and Jquery:

Login





Try it:

 <script type="text/javascript">
 $(document).ready(function(){
 $("#btn_cnt").click(function () {
   $('#cnt').toggle();
});
});
</script>
<style type="text/css">
    .cnt{
        border:solid 1px lightgray;
        width:300px;
        padding:10px;
      
    }
    .heading_form
    {
        margin:10px;
        color:purple;
    }
    .input_cnt
    {
        padding: 7px;
        border:solid 1px #339999;
        width:80%;
        margin:10px;

    }
    .input_cnt:focus
    {
      border:solid 1px purple;  
    }
    .btn_form_cnt
    {
        color:#fff;
        margin:10px;
        background: #339999;
        background: -webkit-gradient(linear, 0% 50%, 50% 100%, from(#339999), to(purple));
        background: -webkit-linear-gradient(0% 50%, 50% 100%, from(#339999), to(purple));
        background: -moz-linear-gradient( top left, #339999, purple);
        padding:7px;
        border:solid 1px #fff;
        border-radius:4px;
    }
   
</style>



    <button type="button" class="toggle-form" id="btn_cnt">Open form</button>
    
    <div class="cnt" id="cnt">
       <form class="form_cnt">
       <h4 class="heading_form">Login</h4>
       <hr />
       <input type="text" placeholder="Enter username" class="input_cnt" />
       <input type="password" placeholder="password" class="input_cnt"/>
       <button class="btn_form_cnt">Login</button>      
       </form>
    </div>

Leave a Reply

Your email address will not be published. Required fields are marked *