"Collapsible Panel"
Bootstrap 3.1.0 Snippet by robm

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Panel 1</h3> <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span> </div> <div class="panel-body">Panel content</div> </div> </div> <div class="col-md-6"> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">Panel 2</h3> <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span> </div> <div class="panel-body">Panel content</div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">Panel 3</h3> <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span> </div> <div class="panel-body">Panel content</div> </div> </div> <div class="col-md-6"> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">Panel 4</h3> <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span> </div> <div class="panel-body">Panel content</div> </div> </div> </div> </div>
.row{ margin-top:40px; padding: 0 10px; } .clickable{ cursor: pointer; } .panel-heading span { margin-top: -20px; font-size: 15px; }
$(document).on('click', '.panel-heading span.clickable', function(e){ var $this = $(this); if(!$this.hasClass('panel-collapsed')) { $this.parents('.panel').find('.panel-body').slideUp(); $this.addClass('panel-collapsed'); $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down'); } else { $this.parents('.panel').find('.panel-body').slideDown(); $this.removeClass('panel-collapsed'); $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up'); } })

Related: See More

Light Bootstrap Dashboard PRO React
animated sinin and signup panel. animated login and registeration page, popup,
Register form, html bootstrap4 registration form card panel
Filter elements, sidebar filter panel bootstrap 4

Questions / Comments:

love it, great work!

Giuseppe () - 7 years ago - Reply 0

I load a mvc view with collapsable panels using ajax.First time all is ok but after first time when i click the collapsa button the panel collapse and then reopen.Can someone help me with this issue?
Thanks robm for the good work

memento78 () - 7 years ago - Reply 0

theres any way to make a buttom that colapse all and hide all? cool code!!

Eduardo Betancourt (iameduardo () - 8 years ago - Reply 0

nice work^^.
do you have time to fix a bug? If I click the expand button many times, it will trigger sliding animation many times too. Is it possible to ignore input while the animation isn't completed yet?
.
and also, how do i make the panel content isn't visible at the first time?
thanks. sorry for my bad english.

puntodamar () - 8 years ago - Reply 0

Thanks. great work

samadekk.com () - 8 years ago - Reply 0

There's a bug. You use "parents" selector, but if there are nested panels - collapse button will collapse all panels with that class, from innermost to outermost. Use "closest" instead.

Alexander () - 9 years ago - Reply 0

maybe also check initial state so panel-body has intial state collapsed so the cheveron should be up and should know whne clicked that it should display

Wendell () - 10 years ago - Reply 0

Hi there :)
Great script so far, but how can I also hide the panel footer?
So not only panel body is hidden.

Thank you

Florian Gareis () - 10 years ago - Reply 0

Havent tried it, but couldnt you combine the body and footer as the new body?

Jose Lopez () - 9 years ago - Reply 0

Is it possible to have the panel closed from the offset and then to slide down after clicked? Thanks.

BigSnail () - 10 years ago - Reply 0

add style="display: none" to the panel-body div and class="pull-right clickable panel-collapsed" to the span in the heading :-)

Leon () - 10 years ago - Reply 0

Thanks Leon!

BigSnail () - 10 years ago - Reply 0

Looks good, but its buggy.

Close Panel 2 and Panel 3 than open Panel 2. After that Panel 3 will open and Panel 4 closes ?

[BlaZZeR]BirD () - 10 years ago - Reply 0

I mean:

Close Panel 2 and Panel 4 than open Panel 2. After that Panel 4 will open and Panel 3 closes ?

Sorry ^^

[BlaZZeR]BirD () - 10 years ago - Reply 0

Thank you for pointing out my error, I've updated the snippet to fix this issue. The issue was with the row collapsing as all of the panels in the original snippet sat within the same .row container. I've now put the two sets of panels into their own rows and the issue seems to be resolved.

robm () - 10 years ago - Reply 0

Had the same problem. Changed the line below and now i can use the snippet with panels in the same row.

Changed:
$this.parents('.panel').find('.panel-body').slideUp();
to:
$this.closest('.panel').find('.panel-body').slideUp();

Bas () - 10 years ago - Reply 0