unable to make only one collapse expand at a time

Question

In my page i using 11 bootstrap 3 collapse, I need to make only one expand if i click on second collapse the first should close and second should expand.

But in my case both collapse are expanded.

I tried adding role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"

but nothing works

followed all instruction given in Stack Overflow Answer

I used HTML-attributes method to do

HTML

<div id="myGroup" class="container"> <h1>Select Category</h1> <div class="panel"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12 "> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseone" aria-expanded="false" aria-controls="collapseone"><i class="la la-motorcycle pull-left"></i><b>Vehicle</b></div> <div id="collapseone" class="panel-collapse collapse"> <a href="#" class="list-group-item">Car</a> <a href="#" class="list-group-item">Bus, Van, Truck</a> <a href="#" class="list-group-item">Industrial Vehicle</a> <a href="#" class="list-group-item">Motorcycles</a> <a href="#" class="list-group-item">Bicycles</a> <a href="#" class="list-group-item">Spare Parts</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsetwo" aria-expanded="false" aria-controls="collapsetwo"><i class="la la-mobile-phone pull-left"></i><b>Mobile</b></div> <div id="collapsetwo" class="panel-collapse collapse"> <a href="#" class="list-group-item">Mobiles</a> <a href="#" class="list-group-item">Tablets</a> <a href="#" class="list-group-item">Ipads</a> <a href="#" class="list-group-item">Accessories</a> </div> </div> <div class="clearfix visible-sm"></div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsethree" aria-expanded="false" aria-controls="collapsethree"><i class="la la-money pull-left"></i><b>Notes & Coin</b></div> <div id="collapsethree" class="panel-collapse collapse"> <a href="#" class="list-group-item">Notes</a> <a href="#" class="list-group-item">Coins</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsefour" aria-expanded="false" aria-controls="collapsefour"><i class="la la-lightbulb-o pull-left"></i><b>Electronics</b></div> <div id="collapsefour" class="panel-collapse collapse"> <a href="#" class="list-group-item">Computer & Laptops</a> <a href="#" class="list-group-item">TVs, Audio and Video</a> <a href="#" class="list-group-item">Computer Accessories</a> <a href="#" class="list-group-item">ACs</a> <a href="#" class="list-group-item">Washing Machines</a> <a href="#" class="list-group-item">Fridge</a> <a href="#" class="list-group-item">Camera and Lens</a> <a href="#" class="list-group-item">Kitchen Accessories</a> <a href="#" class="list-group-item">Games and Entertainment</a> </div> </div> <div class="clearfix visible-sm"></div> </div> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsefive" aria-expanded="false" aria-controls="collapsefive"><i class="la la-building-o pull-left"></i><b>Real Estate</b></div> <div id="collapsefive" class="panel-collapse collapse"> <a href="#" class="list-group-item">For Sale</a> <a href="#" class="list-group-item">For Rent</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsesix" aria-expanded="false" aria-controls="collapsesix"><i class="la la-user-secret pull-left"></i><b>Fashion</b></div> <div id="collapsesix" class="panel-collapse collapse"> <a href="#" class="list-group-item">Men</a> <a href="#" class="list-group-item">Women</a> <a href="#" class="list-group-item">Kids</a> </div> </div> <div class="clearfix visible-sm"></div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseseven" aria-expanded="false" aria-controls="collapseseven"><i class="la la-wrench pull-left"></i><b>Service</b></div> <div id="collapseseven" class="panel-collapse collapse"> <a href="#" class="list-group-item">Driver and Taxi</a> <a href="#" class="list-group-item">Education and Classes</a> <a href="#" class="list-group-item">Electonics and Computer</a> <a href="#" class="list-group-item">Health and Beauty</a> <a href="#" class="list-group-item">Gym and Fitness</a> <a href="#" class="list-group-item">Sports and Equipment</a> <a href="#" class="list-group-item">Other Services</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseeight" aria-expanded="false" aria-controls="collapseeight"><i class="la la-paw pull-left"></i><b>Pet's</b></div> <div id="collapseeight" class="panel-collapse collapse"> <a href="#" class="list-group-item">Dogs</a> <a href="#" class="list-group-item">Cats</a> <a href="#" class="list-group-item">Fishes and Aquarium</a> <a href="#" class="list-group-item">Food & Accessories</a> <a href="#" class="list-group-item">Other Pets</a> </div> </div> </div> <div class="row"> <div class="clearfix visible-sm"></div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsenine" aria-expanded="false" aria-controls="collapsenine"><i class="la la-book pull-left"></i><b>Education</b></div> <div id="collapsenine" class="panel-collapse collapse"> <a href="#" class="list-group-item">Books</a> <a href="#" class="list-group-item">Online Tutorials</a> <a href="#" class="list-group-item">Tutions</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseten" aria-expanded="false" aria-controls="collapseten"><i class="la la-venus-mars pull-left"></i><b>Matrimony</b></div> <div id="collapseten" class="panel-collapse collapse"> <a href="#" class="list-group-item">Male</a> <a href="#" class="list-group-item">Female</a> </div> </div> <div class="clearfix visible-sm"></div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseelven" aria-expanded="false" aria-controls="collapseelven"><i class="la la-briefcase pull-left"></i><b>Jobs</b></div> <div id="collapseelven" class="panel-collapse collapse"> <a href="#" class="list-group-item">Data Entry & Back Office</a> <a href="#" class="list-group-item">BPO and Telecaller</a> <a href="#" class="list-group-item">Sales and Marketing</a> <a href="#" class="list-group-item">Operator and Technician</a> <a href="#" class="list-group-item">Cook</a> <a href="#" class="list-group-item">Driver</a> <a href="#" class="list-group-item">Hotel and Travel Execute</a> <a href="#" class="list-group-item">IT Engineer and Developer</a> <a href="#" class="list-group-item">Design</a> <a href="#" class="list-group-item">Office Assistant</a> <a href="#" class="list-group-item">Reception and Front Office</a> <a href="#" class="list-group-item">Delivery and Collection</a> <a href="#" class="list-group-item">Accountant</a> <a href="#" class="list-group-item">Teacher</a> <a href="#" class="list-group-item">Other Jobs</a> </div> </div> </div> </div> </div>

Here is fiddle what i tried

Michael Conard · Accepted Answer · 2018-06-20 19:36:56Z

I suggest using JavaScript to toggle them how you want. What I've done here: added the toggle class to your block divs, which get a JavaScript listener to collapse all other blocks each time a toggle block is opened.

$(".collapse.in").collapse('hide'); will find all of the blocks that need collapsing, and collapse them.

I left in a less efficient solution commented out: $(this).parent().parent().parent()... because I hope it shows you how navigating all of the containing divs works.

The if statement: if ( !$(this).find(".panel-collapse").hasClass('in') ) prevents collapsing when you're clicking within the block that is already open.

$( function() { $('.toggle').click(function() { if ( !$(this).find(".panel-collapse").hasClass('in') ) { $(".collapse.in").collapse('hide'); //$(this).parent().parent().parent().find('.collapse.in').collapse('hide'); } }); });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div id="myGroup" class="container"> <h1>Select Category</h1> <div class="panel"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12 toggle"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseone" aria-expanded="false" aria-controls="collapseone"><i class="la la-motorcycle pull-left"></i><b>Vehicle</b></div> <div id="collapseone" class="panel-collapse collapse"> <a href="#" class="list-group-item">Car</a> <a href="#" class="list-group-item">Bus, Van, Truck</a> <a href="#" class="list-group-item">Industrial Vehicle</a> <a href="#" class="list-group-item">Motorcycles</a> <a href="#" class="list-group-item">Bicycles</a> <a href="#" class="list-group-item">Spare Parts</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 toggle"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsetwo" aria-expanded="false" aria-controls="collapsetwo"><i class="la la-mobile-phone pull-left"></i><b>Mobile</b></div> <div id="collapsetwo" class="panel-collapse collapse"> <a href="#" class="list-group-item">Mobiles</a> <a href="#" class="list-group-item">Tablets</a> <a href="#" class="list-group-item">Ipads</a> <a href="#" class="list-group-item">Accessories</a> </div> </div> <div class="clearfix visible-sm"></div> <div class="col-md-3 col-sm-6 col-xs-12 toggle"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsethree" aria-expanded="false" aria-controls="collapsethree"><i class="la la-money pull-left"></i><b>Notes & Coin</b></div> <div id="collapsethree" class="panel-collapse collapse"> <a href="#" class="list-group-item">Notes</a> <a href="#" class="list-group-item">Coins</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 toggle"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsefour" aria-expanded="false" aria-controls="collapsefour"><i class="la la-lightbulb-o pull-left"></i><b>Electronics</b></div> <div id="collapsefour" class="panel-collapse collapse"> <a href="#" class="list-group-item">Computer & Laptops</a> <a href="#" class="list-group-item">TVs, Audio and Video</a> <a href="#" class="list-group-item">Computer Accessories</a> <a href="#" class="list-group-item">ACs</a> <a href="#" class="list-group-item">Washing Machines</a> <a href="#" class="list-group-item">Fridge</a> <a href="#" class="list-group-item">Camera and Lens</a> <a href="#" class="list-group-item">Kitchen Accessories</a> <a href="#" class="list-group-item">Games and Entertainment</a> </div> </div> <div class="clearfix visible-sm"></div> </div> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12 toggle"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsefive" aria-expanded="false" aria-controls="collapsefive"><i class="la la-building-o pull-left"></i><b>Real Estate</b></div> <div id="collapsefive" class="panel-collapse collapse"> <a href="#" class="list-group-item">For Sale</a> <a href="#" class="list-group-item">For Rent</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 toggle"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsesix" aria-expanded="false" aria-controls="collapsesix"><i class="la la-user-secret pull-left"></i><b>Fashion</b></div> <div id="collapsesix" class="panel-collapse collapse"> <a href="#" class="list-group-item">Men</a> <a href="#" class="list-group-item">Women</a> <a href="#" class="list-group-item">Kids</a> </div> </div> <div class="clearfix visible-sm"></div> <div class="col-md-3 col-sm-6 col-xs-12 toggle"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseseven" aria-expanded="false" aria-controls="collapseseven"><i class="la la-wrench pull-left"></i><b>Service</b></div> <div id="collapseseven" class="panel-collapse collapse"> <a href="#" class="list-group-item">Driver and Taxi</a> <a href="#" class="list-group-item">Education and Classes</a> <a href="#" class="list-group-item">Electonics and Computer</a> <a href="#" class="list-group-item">Health and Beauty</a> <a href="#" class="list-group-item">Gym and Fitness</a> <a href="#" class="list-group-item">Sports and Equipment</a> <a href="#" class="list-group-item">Other Services</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 toggle"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseeight" aria-expanded="false" aria-controls="collapseeight"><i class="la la-paw pull-left"></i><b>Pet's</b></div> <div id="collapseeight" class="panel-collapse collapse"> <a href="#" class="list-group-item">Dogs</a> <a href="#" class="list-group-item">Cats</a> <a href="#" class="list-group-item">Fishes and Aquarium</a> <a href="#" class="list-group-item">Food & Accessories</a> <a href="#" class="list-group-item">Other Pets</a> </div> </div> </div> <div class="row"> <div class="clearfix visible-sm"></div> <div class="col-md-3 col-sm-6 col-xs-12 toggle"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsenine" aria-expanded="false" aria-controls="collapsenine"><i class="la la-book pull-left"></i><b>Education</b></div> <div id="collapsenine" class="panel-collapse collapse"> <a href="#" class="list-group-item">Books</a> <a href="#" class="list-group-item">Online Tutorials</a> <a href="#" class="list-group-item">Tutions</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 toggle"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseten" aria-expanded="false" aria-controls="collapseten"><i class="la la-venus-mars pull-left"></i><b>Matrimony</b></div> <div id="collapseten" class="panel-collapse collapse"> <a href="#" class="list-group-item">Male</a> <a href="#" class="list-group-item">Female</a> </div> </div> <div class="clearfix visible-sm"></div> <div class="col-md-3 col-sm-6 col-xs-12 toggle"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseelven" aria-expanded="false" aria-controls="collapseelven"><i class="la la-briefcase pull-left"></i><b>Jobs</b></div> <div id="collapseelven" class="panel-collapse collapse"> <a href="#" class="list-group-item">Data Entry & Back Office</a> <a href="#" class="list-group-item">BPO and Telecaller</a> <a href="#" class="list-group-item">Sales and Marketing</a> <a href="#" class="list-group-item">Operator and Technician</a> <a href="#" class="list-group-item">Cook</a> <a href="#" class="list-group-item">Driver</a> <a href="#" class="list-group-item">Hotel and Travel Execute</a> <a href="#" class="list-group-item">IT Engineer and Developer</a> <a href="#" class="list-group-item">Design</a> <a href="#" class="list-group-item">Office Assistant</a> <a href="#" class="list-group-item">Reception and Front Office</a> <a href="#" class="list-group-item">Delivery and Collection</a> <a href="#" class="list-group-item">Accountant</a> <a href="#" class="list-group-item">Teacher</a> <a href="#" class="list-group-item">Other Jobs</a> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Hope this solution does what you need it to! Let me know if you have any additional questions.

but here stackoverflow.com/questions/37753407/… it works without js
I didn't say you have to use JS. I just said I suggest it, because it is more clear and makes sense. You didn't ask for answers that were attribute only, you just said that's what you had tried and it didn't work.
@sanojlawrence Yes I believe so, but I don't think the convoluted structure of your html will work with attributes only. For attributes to work the structure must be more straightforward and clean (you have lots of containing divs, with the things being collapsed deep inside).

Gleb Kemarsky · Accepted Answer · 2018-06-21 05:07:31Z

UPD.

You specified an incomplete URL to bootstrap.min.js and the scripts are not connected to your JSFiddle. So you need to correct the URL of the Bootstrap scripts.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div id="myGroup" class="container"> <h1>Select Category</h1> <div class="panel"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12 "> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseone" aria-expanded="false" aria-controls="collapseone"><i class="la la-motorcycle pull-left"></i><b>Vehicle</b></div> <div id="collapseone" class="panel-collapse collapse"> <a href="#" class="list-group-item">Car</a> <a href="#" class="list-group-item">Bus, Van, Truck</a> <a href="#" class="list-group-item">Industrial Vehicle</a> <a href="#" class="list-group-item">Motorcycles</a> <a href="#" class="list-group-item">Bicycles</a> <a href="#" class="list-group-item">Spare Parts</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsetwo" aria-expanded="false" aria-controls="collapsetwo"><i class="la la-mobile-phone pull-left"></i><b>Mobile</b></div> <div id="collapsetwo" class="panel-collapse collapse"> <a href="#" class="list-group-item">Mobiles</a> <a href="#" class="list-group-item">Tablets</a> <a href="#" class="list-group-item">Ipads</a> <a href="#" class="list-group-item">Accessories</a> </div> </div> <div class="clearfix visible-sm"></div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsethree" aria-expanded="false" aria-controls="collapsethree"><i class="la la-money pull-left"></i><b>Notes & Coin</b></div> <div id="collapsethree" class="panel-collapse collapse"> <a href="#" class="list-group-item">Notes</a> <a href="#" class="list-group-item">Coins</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsefour" aria-expanded="false" aria-controls="collapsefour"><i class="la la-lightbulb-o pull-left"></i><b>Electronics</b></div> <div id="collapsefour" class="panel-collapse collapse"> <a href="#" class="list-group-item">Computer & Laptops</a> <a href="#" class="list-group-item">TVs, Audio and Video</a> <a href="#" class="list-group-item">Computer Accessories</a> <a href="#" class="list-group-item">ACs</a> <a href="#" class="list-group-item">Washing Machines</a> <a href="#" class="list-group-item">Fridge</a> <a href="#" class="list-group-item">Camera and Lens</a> <a href="#" class="list-group-item">Kitchen Accessories</a> <a href="#" class="list-group-item">Games and Entertainment</a> </div> </div> <div class="clearfix visible-sm"></div> </div> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsefive" aria-expanded="false" aria-controls="collapsefive"><i class="la la-building-o pull-left"></i><b>Real Estate</b></div> <div id="collapsefive" class="panel-collapse collapse"> <a href="#" class="list-group-item">For Sale</a> <a href="#" class="list-group-item">For Rent</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsesix" aria-expanded="false" aria-controls="collapsesix"><i class="la la-user-secret pull-left"></i><b>Fashion</b></div> <div id="collapsesix" class="panel-collapse collapse"> <a href="#" class="list-group-item">Men</a> <a href="#" class="list-group-item">Women</a> <a href="#" class="list-group-item">Kids</a> </div> </div> <div class="clearfix visible-sm"></div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseseven" aria-expanded="false" aria-controls="collapseseven"><i class="la la-wrench pull-left"></i><b>Service</b></div> <div id="collapseseven" class="panel-collapse collapse"> <a href="#" class="list-group-item">Driver and Taxi</a> <a href="#" class="list-group-item">Education and Classes</a> <a href="#" class="list-group-item">Electonics and Computer</a> <a href="#" class="list-group-item">Health and Beauty</a> <a href="#" class="list-group-item">Gym and Fitness</a> <a href="#" class="list-group-item">Sports and Equipment</a> <a href="#" class="list-group-item">Other Services</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseeight" aria-expanded="false" aria-controls="collapseeight"><i class="la la-paw pull-left"></i><b>Pet's</b></div> <div id="collapseeight" class="panel-collapse collapse"> <a href="#" class="list-group-item">Dogs</a> <a href="#" class="list-group-item">Cats</a> <a href="#" class="list-group-item">Fishes and Aquarium</a> <a href="#" class="list-group-item">Food & Accessories</a> <a href="#" class="list-group-item">Other Pets</a> </div> </div> </div> <div class="row"> <div class="clearfix visible-sm"></div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapsenine" aria-expanded="false" aria-controls="collapsenine"><i class="la la-book pull-left"></i><b>Education</b></div> <div id="collapsenine" class="panel-collapse collapse"> <a href="#" class="list-group-item">Books</a> <a href="#" class="list-group-item">Online Tutorials</a> <a href="#" class="list-group-item">Tutions</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseten" aria-expanded="false" aria-controls="collapseten"><i class="la la-venus-mars pull-left"></i><b>Matrimony</b></div> <div id="collapseten" class="panel-collapse collapse"> <a href="#" class="list-group-item">Male</a> <a href="#" class="list-group-item">Female</a> </div> </div> <div class="clearfix visible-sm"></div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="list-group-item text-center" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseelven" aria-expanded="false" aria-controls="collapseelven"><i class="la la-briefcase pull-left"></i><b>Jobs</b></div> <div id="collapseelven" class="panel-collapse collapse"> <a href="#" class="list-group-item">Data Entry & Back Office</a> <a href="#" class="list-group-item">BPO and Telecaller</a> <a href="#" class="list-group-item">Sales and Marketing</a> <a href="#" class="list-group-item">Operator and Technician</a> <a href="#" class="list-group-item">Cook</a> <a href="#" class="list-group-item">Driver</a> <a href="#" class="list-group-item">Hotel and Travel Execute</a> <a href="#" class="list-group-item">IT Engineer and Developer</a> <a href="#" class="list-group-item">Design</a> <a href="#" class="list-group-item">Office Assistant</a> <a href="#" class="list-group-item">Reception and Front Office</a> <a href="#" class="list-group-item">Delivery and Collection</a> <a href="#" class="list-group-item">Accountant</a> <a href="#" class="list-group-item">Teacher</a> <a href="#" class="list-group-item">Other Jobs</a> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

The collapsing parts of the accordion must to be the children of the .panel block. Therefore, you need to change the layout or write your own script instead of using HTML attributes.

Collectives™ on Stack Overflow

unable to make only one collapse expand at a time

2 Answers 2

4 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Linked

Related