ENHANCING AN ACCORDION

Question

I have an accordion which works great inside my page. When you clck on the title the hidden div displays and when you click on it again it hides again. I want to enhance this accordion by having an additional function to make the accordion ONLY display one item at a time. In other words if I have an item open and I click another title the current open item closes automatically.

Here is the HTML

                    <div class="cap">
                            <div class="capitulo"><h2 class="cap2">Capitulo Segundo</h2></div>  
                                <div class="capcierre2">            
                                    <h3>DE LOS DEBERES DEL PROFESIONISTA.</h3>      


            <p class="art">Articulo 2º</p>
                    <p>El Arquitecto debe poner todos sus conocimientos científicos y recursos técnicos en el desempeño de su profesión.</p>

                            </div>  
                    </div>

And here's my jQuery code

 <script>
 jQuery(function($){
 var cap = $('.cap [class^="capcierre"]').hide();

 $('h2[class^="c"]').on('click', function(){
    cap.filter('.capcierre' + this.className.slice(-1)).slideToggle(200);
     });
 });
 </script>

As you can see I have a main (div class="cap") followed by a (div class="capitulo") then the clickable title (h2 class="cap2") for each h2, they follow with a class "cap3", "cap4" etc. and then the hidden div is (div class="capcierre2") "capcierre3", "capcierre4" etc.

It works fine but what can I add to the Jquery to hide ALL items in the accordion while only ONE is displayed?

Thanks!

Answer 1

You can

jQuery(function ($) {
    var cap = $('.cap [class^="capcierre"]').hide();

    $('h2[class^="c"]').on('click', function () {
        var $this = cap.filter('.capcierre' + this.className.slice(-1)).slideToggle(200);
    cap.not($this).slideUp();
    });
});

Demo: Fiddle

---

A more cleaner approach(assuming the structure given in the example)

jQuery(function($) {
  var $caps = $('.cap .capcierre');

  $('.cap .capitulo h2').on('click', function() {
    var $capcierre = $(this).parent().next();
    $capcierre.slideToggle(200);
    $caps.not($capcierre).slideUp();
  });
});

.cap .capcierre {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="cap">
  <div class="capitulo">
    <h2 class="cap1">Capitulo Segundo</h2>
  </div>
  <div class="capcierre capcierre1">
    <h3>DE LOS DEBERES DEL PROFESIONISTA.</h3> 
    <p class="art">Articulo 2º</p>
    <p>El Arquitecto debe poner todos sus conocimientos científicos y recursos técnicos en el desempeño de su profesión.</p>
  </div>
  <div class="capitulo">
    <h2 class="cap2">Capitulo Segundo</h2>
  </div>
  <div class="capcierre capcierre2">
    <h3>DE LOS DEBERES DEL PROFESIONISTA.</h3> 
    <p class="art">Articulo 2º</p>
    <p>El Arquitecto debe poner todos sus conocimientos científicos y recursos técnicos en el desempeño de su profesión.</p>
  </div>
  <div class="capitulo">
    <h2 class="cap3">Capitulo Segundo</h2>
  </div>
  <div class="capcierre capcierre3">
    <h3>DE LOS DEBERES DEL PROFESIONISTA.</h3> 
    <p class="art">Articulo 2º</p>
    <p>El Arquitecto debe poner todos sus conocimientos científicos y recursos técnicos en el desempeño de su profesión.</p>
  </div>
</div>

Answer 2

You can try hiding all visible capcierre elements.

jQuery(function($){
   
  var cap = $('.cap [class^="capcierre"]').hide();

  $('h2[class^="c"]').on('click', function(){
    var target = cap.filter('.capcierre' + this.className.slice(-1));
    $('.cap [class^="capcierre"]:visible').not(target).slideUp();
    target.slideToggle(200);
  });
  
});