Hi
How to create a Screen like below Collapse on/Off
https://imgur.com/OYez8pO
Thanks
Hi ramco1917,
Refer below code.
HTML
<html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <style type="text/css"> body { padding: 50px; background: #fff; } .wrapper { width: 70%; } @media(max-width:992px) { .wrapper { width: 100%; } } .panel-heading { padding: 0; border: 0; } .panel-title > a, .panel-title > a:active { display: block; padding: 15px; color: #555; font-size: 16px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; word-spacing: 3px; text-decoration: none; } .panel-heading a:before { font-family: 'Glyphicons Halflings'; content: "\e114"; float: right; transition: all 0.5s; } .panel-heading.active a:before { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); } </style> <script> $(function () { $('.panel-collapse').on('show.bs.collapse', function () { $(this).siblings('.panel-heading').addClass('active'); }); $('.panel-collapse').on('hide.bs.collapse', function () { $(this).siblings('.panel-heading').removeClass('active'); }); }); </script> </head> <body> <div class="wrapper center-block"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading active" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Search </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <table> <tr> <td>Email<input type="text" name="email" value="" /></td> <td>Company<input type="text" name="company" value="" /></td> </tr> </table> </div> </div> </div> </div> </div> </body> </html>
Demo
© COPYRIGHT 2025 ASPSnippets.com ALL RIGHTS RESERVED.