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

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 >
        <h3>Header One</h3>
        <span><i ></i><i ></i></span>
    </div>
    <div >
        Fitler Content 1
    </div>

<div >
        <h3>Header two</h3>
        <span><i ></i><i ></i></span>
    </div>
    <div >
        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.

CodePudding user response：

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 >
    <h3>Header One</h3>
    <span><i ></i><i ></i></span>
</div>
<div >
    Fitler Content 1
</div>

<div >
    <h3>Header two</h3>
    <span><i ></i><i ></i></span>
</div>
<div >
    Fitler Content 2
</div>

CodePudding user response：

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 >
  <h3>Header One</h3>
  <span><i ></i><i ></i
      ></span>
</div>
<div >Fitler Content 1</div>

<div >
  <h3>Header two</h3>
  <span><i ></i><i ></i
      ></span>
</div>
<div >Fitler Content 2</div>

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