CODEWITHSUNDEEP
jquerytoggle
Cerere
Cerere

Reputation: 313

jQuery toggle based on class

I need to toggle some panels and to do so, I've put togeter a small script such as: 

<div>
<div class="ftd ftd_title"><strong>This is the title</strong></div>
<div class="ftd ftd_field">This is a toggle div</div>
<div class="ftd ftd_field">This is a toggle div</div>
<div class="ftd ftd_field">This is a toggle div</div>
</div>

jQuery(document).ready(function() {

    $('.ftd_field').hide();
    $(".ftd_title").click(function(){
        $(".ftd_field").slideToggle("slow");
    });


});

Example(1) on codepen: http://codepen.io/vms/pen/vLXEax

As long as I have only one toggle per page, there are no issues. Yet, in the event of several toggles in one page, everything gets toggled/shown/hidden at the same time as you can see here with a "carrots/peppers/apples" example I have put together:

<div class="ftd ftd_carrots ftd_title"><strong>Carrots</strong></div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "carrots"</div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "carrots"</div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "carrots"</div>


<div class="ftd ftd_peppers ftd_title"><strong>Peppers</strong></div>
<div class="ftd ftd_peppers ftd_field">This is a toggle div for title "peppers"</div>
<div class="ftd ftd_peppers ftd_field">This is a toggle div for title "peppers"</div>
<div class="ftd ftd_peppers ftd_field">This is a toggle div for title "peppers"</div>

<div class="ftd ftd_carrots ftd_title"><strong>Apples</strong></div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "apples"</div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "apples"</div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "apples"</div>

jQuery(document).ready(function() {

    $('.ftd_field').hide();
    $(".ftd_title").click(function(){
        $(".ftd_field").slideToggle("slow");
    });


});

Example(2) on codepen: http://codepen.io/vms/pen/bEwNjM

I could write as many scripts as the toggles I need to build (one for apples, one for peppers, etc...), but it doesn't seem like a practical nor easilly maintanable solution with many of em.

So, given I cannot change the HTML (apart from adding classes) nor I can use data attributes, is there an easy/correct way to toggle/show/hide Apples when i click on the "Apples" title (and so on with the other fruits) by checking the class?

I'm quite inexperienced when it comes to jQuery and this is basically "as far as I can go" so... here I am asking for some help :<

Thanks in advance!

Upvotes: 0

Views: 252

Answers (1)

Satpal
Satpal

Reputation: 133403

You need to use .nextUntil(".ftd_title") to identify all sibling elements i.e. ftd_field till next ftd_title is found

Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.

 $(".ftd_title").click(function() {
    $(this).nextUntil(".ftd_title").filter('.ftd_field').slideToggle("slow");
 });


jQuery(document).ready(function() {

  $('.ftd_field').hide();
  $(".ftd_title").click(function() {
    $(this).nextUntil(".ftd_title").filter('.ftd_field').slideToggle("slow");
  });


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ftd ftd_carrots ftd_title"><strong>Carrots</strong>
</div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "carrots"</div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "carrots"</div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "carrots"</div>


<div class="ftd ftd_peppers ftd_title"><strong>Peppers</strong>
</div>
<div class="ftd ftd_peppers ftd_field">This is a toggle div for title "peppers"</div>
<div class="ftd ftd_peppers ftd_field">This is a toggle div for title "peppers"</div>
<div class="ftd ftd_peppers ftd_field">This is a toggle div for title "peppers"</div>

<div class="ftd ftd_carrots ftd_title"><strong>Apples</strong>
</div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "apples"</div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "apples"</div>
<div class="ftd ftd_carrots ftd_field">This is a toggle div for title "apples"</div>
<div>Yahooooooooooo</div>

Upvotes: 1

Related Questions