Unable To Make Only One Collapse Expand At A Time

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 collap

Solution 1:

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');
      }
  });
});

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

Solution 2:

UPD.

1. 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.

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

2. 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.