jQuery accordion using nextUntil

Question

I have created an accordion using the nextUntil() function. When an accordion item is clicked, I would like to close the previously active item.

HTML:

<div class="accordion">
  <h3>Item 1</h3>
  <p>...</p>
  <p>...</p>
  <h3>Item 2</h3>
  <p>...</p>
  <p>...</p>
  <h3>Item 3</h3>
  <p>...</p>
  <p>...</p>
</div>

jQuery:

$(document).ready(function() {
  $('.accordion p').hide();
  $('.accordion h3').click(function(e) {
    e.preventDefault();
  
    var $this = $(this);
    $this.nextUntil('.accordion h3').slideToggle('fast');
  });
});

I need the DOM exactly as shown above and cannot have the nested <p> elements.

Here is a demo of what I have done so far: https://jsfiddle.net/L6q4pako/

I wasn't able to correctly use the siblings() function to hide the previously active <p> tags.

score 2 · Accepted Answer · answered Apr 07 '21 at 08:49

If you just want to hide all the other <p> tags, you can use the :not() Selector like this: $('.accordion p:not(this)').hide('fast');

$(document).ready(function() {
    $('.accordion p').hide();
    $('.accordion h3').click(function(e) {
        e.preventDefault();
      
        var $this = $(this);
      $('.accordion p:not(this)').hide('fast');
        $this.nextUntil('.accordion h3').slideToggle('fast');
    });
});

h3 { cursor:pointer; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion">
<h3>
Item 1
</h3>
<p>
sdfs dsf sdf sdf sdf sd
</p>
<p>
sdfsdfsd sdf sdf sdf sdf sdf sdf sdf sdf asdfasd fasdf asdf asdf.
</p>
<h3>
Item 2
</h3>
<p>
e449935934b3453495439
</p>
<p>
sdfijdfjjsl slsdlsls ls
</p>
<h3>
Item 3
</h3>
<p>
fsds ss sdfs
</p>
<p>
345345334 sdfsdfsd
</p>
</div>

jQuery accordion using nextUntil

1 Answers1