jQuery 显示/隐藏多个 div

Question

I need help in expand/collapse div using jQuery. Here is the problem.

I have an HTML page showing car names and their description as shown below.

1. When the user clicks on any carTitle div, corresponding carDetail div should be expanded (if already collapsed). When the user clicks on that div again, the corresponding carDetail div should be collapsed.

2. Initially, carToyota div should be expanded on pageLoad, and other divs are collapsed

3. User can keep multiple divs expanded at the same time

 var collapsed = false; $(".carTitle").on('click', function(e) { collapsed = !collapsed; var carDetailsDiv = $(event.currentTarget).next(); if (collapsed == true) { $(carDetailsDiv).hide(); } else { $(carDetailsDiv).show(); } event.preventDefault(); return false; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="carItem01_container"> <div id="carToyota" class="carTitle"> <div class="carName">Toyote </div> </div> <div id="carToyota_show" class="carDetails"> <div class="carDescription"> ... </div> </div> </div> <div id="carItem02_container"> <div id="carMazda" class="carTitle"> <div class="carName">Mazda </div> </div> <div id="carMazda_show" class="carDetails"> <div class="carDescription"> ... </div> </div> </div> <div id="carItem03_container"> <div id="carVolvo" class="carTitle"> <div class="carName">Volvo </div> </div> <div id="carVolvo_show" class="carDetails"> <div class="carDescription"> ... </div> </div> </div>

The above code does not work as expected. Can anybody help??

Answer 1

Define your own class called collapsed , and set it to display: none

collapsed {
  display: none;
}

Then, you can use jQuery's .toggleClass() to toggle this class, while also being able to simply add the class to the carDetails divs to hide them by default

Finally, you can use $(this).next() , rather than event.currentTarget.next()

---

Here's the Demo:

 $(".carTitle").on('click', function(e) { $(this).next().toggleClass('collapsed'); });

 .collapsed { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="carItem01_container"> <div id="carToyota" class="carTitle"> <div class="carName">Toyote </div> </div> <div id="carToyota_show" class="carDetails"> <div class="carDescription"> ... </div> </div> </div> <div id="carItem02_container"> <div id="carMazda" class="carTitle"> <div class="carName">Mazda </div> </div> <div id="carMazda_show" class="carDetails collapsed"> <div class="carDescription"> ... </div> </div> </div> <div id="carItem03_container"> <div id="carVolvo" class="carTitle"> <div class="carName">Volvo </div> </div> <div id="carVolvo_show" class="carDetails collapsed"> <div class="carDescription"> ... </div> </div> </div>

Answer 2

By default keep all .carDetails div as hidden.

Keep open class on first car div.

Remove/Add .open class on the carDetails that is clicked.

 $(".carTitle").on('click', function(e) { var carDetailsDiv = $(event.currentTarget).next(); if ($(carDetailsDiv).hasClass('open')) { $(carDetailsDiv).removeClass('open'); } else { $(carDetailsDiv).addClass('open'); } event.preventDefault(); return false; });

 .carDetails { display: none; } .carDetails.open { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="carItem01_container"> <div id="carToyota" class="carTitle"> <div class="carName">Toyote </div> </div> <div id="carToyota_show" class="carDetails open"> <div class="carDescription"> ... </div> </div> </div> <div id="carItem02_container"> <div id="carMazda" class="carTitle"> <div class="carName">Mazda </div> </div> <div id="carMazda_show" class="carDetails"> <div class="carDescription"> ... </div> </div> </div> <div id="carItem03_container"> <div id="carVolvo" class="carTitle"> <div class="carName">Volvo </div> </div> <div id="carVolvo_show" class="carDetails"> <div class="carDescription"> ... </div> </div> </div>

Answer 3

 var collapsed = false; $(".carTitle").on('click', function(e) { collapsed = !collapsed; var carDetailsDiv = $(event.currentTarget).next(); $(this).siblings('.carDetails').toggleClass('show'); event.preventDefault(); return false; });

 .carDetails {display:none;} .show {display:block;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="carItem01_container"> <div id="carToyota" class="carTitle"> <div class="carName">Toyote </div> </div> <div id="carToyota_show" class="carDetails show"> <div class="carDescription"> ... </div> </div> </div> <div id="carItem02_container"> <div id="carMazda" class="carTitle"> <div class="carName">Mazda </div> </div> <div id="carMazda_show" class="carDetails"> <div class="carDescription"> ... </div> </div> </div> <div id="carItem03_container"> <div id="carVolvo" class="carTitle"> <div class="carName">Volvo </div> </div> <div id="carVolvo_show" class="carDetails"> <div class="carDescription"> ... </div> </div> </div>

Try this one i have using toggle class in your description div ....