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


            Select Category
            
            
                
                    Vehicle
                    
                        Car
                        Bus, Van, Truck
                        Industrial Vehicle
                        Motorcycles
                        Bicycles
                        Spare Parts
                    
                
                
                    Mobile
                    
                        Mobiles
                        Tablets
                        Ipads
                        Accessories
                    
                
                
                
                    Notes & Coin
                    
                        Notes
                        Coins
                    
                 
                
                    Electronics
                    
                        Computer & Laptops
                        TVs, Audio and Video
                        Computer Accessories
                        ACs
                        Washing Machines
                        Fridge
                        Camera and Lens
                        Kitchen Accessories
                        Games and Entertainment
                    
                
                
            
            
                
                    Real Estate
                    
                        For Sale
                        For Rent
                    
                
                
                    Fashion
                    
                        Men
                        Women
                        Kids
                    
                
                
                
                    Service
                    
                        Driver and Taxi
                        Education and Classes
                        Electonics and Computer
                        Health and Beauty
                        Gym and Fitness
                        Sports and Equipment
                        Other Services
                    
                
                
                    Pet's
                    
                        Dogs
                        Cats
                        Fishes and Aquarium
                        Food & Accessories
                        Other Pets
                    
                
                
            
                
                
                    Education
                    
                        Books
                        Online Tutorials
                        Tutions
                    
                
                
                    Matrimony
                    
                    Male
                    Female
                    
                
                
                
                    Jobs
                    
                    Data Entry & Back Office
                    BPO and Telecaller
                    Sales and Marketing
                    Operator and Technician
                    Cook
                    Driver
                    Hotel and Travel Execute
                    IT Engineer and Developer
                    Design
                    Office Assistant
                    Reception and Front Office
                    Delivery and Collection
                    Accountant
                    Teacher
                    Other Jobs

Here is fiddle what i tried

Michael Conard · Accepted Answer

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



            Select Category
            
            
                
                    Vehicle
                    
                        Car
                        Bus, Van, Truck
                        Industrial Vehicle
                        Motorcycles
                        Bicycles
                        Spare Parts
                    
                
                
                    Mobile
                    
                        Mobiles
                        Tablets
                        Ipads
                        Accessories
                    
                
                
                
                    Notes & Coin
                    
                        Notes
                        Coins
                    
                 
                
                    Electronics
                    
                        Computer & Laptops
                        TVs, Audio and Video
                        Computer Accessories
                        ACs
                        Washing Machines
                        Fridge
                        Camera and Lens
                        Kitchen Accessories
                        Games and Entertainment
                    
                
                
            
            
                
                    Real Estate
                    
                        For Sale
                        For Rent
                    
                
                
                    Fashion
                    
                        Men
                        Women
                        Kids
                    
                
                
                
                    Service
                    
                        Driver and Taxi
                        Education and Classes
                        Electonics and Computer
                        Health and Beauty
                        Gym and Fitness
                        Sports and Equipment
                        Other Services
                    
                
                
                    Pet's
                    
                        Dogs
                        Cats
                        Fishes and Aquarium
                        Food & Accessories
                        Other Pets
                    
                
                
            
                
                
                    Education
                    
                        Books
                        Online Tutorials
                        Tutions
                    
                
                
                    Matrimony
                    
                    Male
                    Female
                    
                
                
                
                    Jobs
                    
                    Data Entry & Back Office
                    BPO and Telecaller
                    Sales and Marketing
                    Operator and Technician
                    Cook
                    Driver
                    Hotel and Travel Execute
                    IT Engineer and Developer
                    Design
                    Office Assistant
                    Reception and Front Office
                    Delivery and Collection
                    Accountant
                    Teacher
                    Other Jobs

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

unable to make only one collapse expand at a time

Answers (2)

Related Questions