Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // accordion
- <div class="container demo">
- <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
- <div class="panel panel-default">
- <div class="panel-heading" 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">
- <i class="more-less glyphicon glyphicon-plus"></i>
- Lorem ipsum dolor sit amet, consectetur?
- </a>
- </h4>
- </div>
- <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
- <div class="panel-body">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet maiores saepe sed iusto, fugiat sapiente labore magni aut blanditiis, cum excepturi explicabo illo vero consequuntur. Accusantium, a cum veritatis fugiat.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum illum praesentium at expedita quae repellendus eveniet quaerat architecto ipsum, obcaecati, rem, optio quis voluptas tenetur dolorem similique blanditiis fuga consectetur?
- </div>
- </div>
- </div>
- <div class="panel panel-default">
- <div class="panel-heading" role="tab" id="headingTwo">
- <h4 class="panel-title">
- <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
- <i class="more-less glyphicon glyphicon-plus"></i>
- Lorem ipsum dolor sit amet?
- </a>
- </h4>
- </div>
- <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
- <div class="panel-body">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam delectus necessitatibus, fugiat praesentium perferendis, accusamus placeat laboriosam. Alias dolores, iure neque ullam autem minus quod molestias enim doloribus, voluptatibus itaque.
- </div>
- </div>
- </div>
- <div class="panel panel-default">
- <div class="panel-heading" role="tab" id="headingThree">
- <h4 class="panel-title">
- <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
- <i class="more-less glyphicon glyphicon-plus"></i>
- Lorem ipsum dolor sit amet, consectetur?
- </a>
- </h4>
- </div>
- <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
- <div class="panel-body">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias omnis sunt suscipit nam debitis qui fuga, commodi, odit reiciendis necessitatibus repudiandae officiis doloremque reprehenderit minus sapiente cum enim rerum nesciunt.
- </div>
- </div>
- </div>
- </div><!-- panel-group -->
- </div><!-- container -->
- <style>
- .panel-group .panel {
- border-radius: 0;
- box-shadow: none;
- border-color: #EEEEEE;
- }
- .panel-default > .panel-heading {
- padding: 0;
- border-radius: 0;
- color: #212121;
- background-color: #FAFAFA;
- border-color: #EEEEEE;
- }
- .panel-title {
- font-size: 14px;
- }
- .panel-title > a {
- display: block;
- padding: 15px;
- text-decoration: none;
- border-left: 3px solid #00BBD1;
- border-right: 3px solid #00BBD1;
- }
- .more-less {
- float: right;
- color: #212121;
- }
- </style>
- <script>
- // accordion
- function toggleIcon(e) {
- $(e.target)
- .prev('.panel-heading')
- .find(".more-less")
- .toggleClass('glyphicon-plus glyphicon-minus');
- }
- $('.panel-group').on('hidden.bs.collapse', toggleIcon);
- $('.panel-group').on('shown.bs.collapse', toggleIcon);
- </script>
Add Comment
Please, Sign In to add comment