Multiple SlideToggle on one page, how to control each on independently

Question

I'm setting up a few jquery slideToggle for a filter system I have and I'm trying to have them use the same classes. There will be about 5 of the same slide toggle on the page but when I close / open one of them, it closes them all and I'm wondering how I can adjust the the javascript so each one closes individually.

<div class="tc-facet-header tc-toggle-show">
        <h3>Header One</h3>
        <span><i class="bi bi-chevron-down"></i><i class="bi bi-chevron-up"></i></span>
    </div>
    <div class="tc-facet tc-facet-open">
        Fitler Content 1
    </div>

<div class="tc-facet-header tc-toggle-show">
        <h3>Header two</h3>
        <span><i class="bi bi-chevron-down"></i><i class="bi bi-chevron-up"></i></span>
    </div>
    <div class="tc-facet tc-facet-open">
        Fitler Content 2
    </div>

The JS I use is

    <script>
    $(document).ready(function(){
    var $content = $(".tc-facet").show();
    $(".tc-facet-header").on("click", function(e){
        $(this).toggleClass("tc-toggle-show");
        $(this).toggleClass("tc-toggle-hide");
        $content.slideToggle();
    });
    });

When I click on a h3 header of either one it will open / close both the .tc-facet divs instead of just the one i click on.

Answer 1

Your current jquery code is targeting all .tc-facet that's why. You need to target each individual .tc-facet. Try this code

$(document).ready(function(){
    $(".tc-facet-header").on("click", function(e){
        $(this).toggleClass("tc-toggle-show");
        $(this).toggleClass("tc-toggle-hide");
        $(this).next(".tc-facet").slideToggle();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tc-facet-header tc-toggle-show">
    <h3>Header One</h3>
    <span><i class="bi bi-chevron-down"></i><i class="bi bi-chevron-up"></i></span>
</div>
<div class="tc-facet tc-facet-open">
    Fitler Content 1
</div>

<div class="tc-facet-header tc-toggle-show">
    <h3>Header two</h3>
    <span><i class="bi bi-chevron-down"></i><i class="bi bi-chevron-up"></i></span>
</div>
<div class="tc-facet tc-facet-open">
    Fitler Content 2
</div>

Answer 2

It's been a few years since I looked at any jquery code, but from what I can see, the reason you're seeing all of them toggle is that you're running the slideToggle function on the $content variable you set earlier which includes all of the matches at the time the variable is set.

If all you're trying to do is run the slideToggle function on the span when the heading is clicked, you can just do this:

$(document).ready(function() {
  $(".tc-facet-header").on("click", function(e) {
    $(this).next().slideToggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tc-facet-header tc-toggle-show">
  <h3>Header One</h3>
  <span><i class="bi bi-chevron-down"></i><i class="bi bi-chevron-up"></i
      ></span>
</div>
<div class="tc-facet tc-facet-open">Fitler Content 1</div>

<div class="tc-facet-header tc-toggle-show">
  <h3>Header two</h3>
  <span><i class="bi bi-chevron-down"></i><i class="bi bi-chevron-up"></i
      ></span>
</div>
<div class="tc-facet tc-facet-open">Fitler Content 2</div>

As long as the span follows the heading, then the span will always be toggled.