jQuery toggle based on class -

i need toggle panels , so, i've put togeter small script such as:

<div> <div class="ftd ftd_title"><strong>this title</strong></div> <div class="ftd ftd_field">this toggle div</div> <div class="ftd ftd_field">this toggle div</div> <div class="ftd ftd_field">this 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 have 1 toggle per page, there no issues. yet, in event of several toggles in 1 page, gets toggled/shown/hidden @ same time can see here "carrots/peppers/apples" example have put together:

<div class="ftd ftd_carrots ftd_title"><strong>carrots</strong></div> <div class="ftd ftd_carrots ftd_field">this toggle div title "carrots"</div> <div class="ftd ftd_carrots ftd_field">this toggle div title "carrots"</div> <div class="ftd ftd_carrots ftd_field">this toggle div title "carrots"</div>   <div class="ftd ftd_peppers ftd_title"><strong>peppers</strong></div> <div class="ftd ftd_peppers ftd_field">this toggle div title "peppers"</div> <div class="ftd ftd_peppers ftd_field">this toggle div title "peppers"</div> <div class="ftd ftd_peppers ftd_field">this toggle div title "peppers"</div>  <div class="ftd ftd_carrots ftd_title"><strong>apples</strong></div> <div class="ftd ftd_carrots ftd_field">this toggle div title "apples"</div> <div class="ftd ftd_carrots ftd_field">this toggle div title "apples"</div> <div class="ftd ftd_carrots ftd_field">this toggle div 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 write many scripts toggles need build (one apples, 1 peppers, etc...), doesn't seem practical nor easilly maintanable solution many of em.

so, given cannot change html (apart adding classes) nor can use data attributes, there easy/correct way toggle/show/hide apples when click on "apples" title (and on other fruits) checking class?

i'm quite inexperienced when comes jquery , "as far can go" so... here asking :<

thanks in advance!

you need use .nextuntil(".ftd_title") identify sibling elements i.e. ftd_field till next ftd_title found

get following siblings of each element not including element matched 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 toggle div title "carrots"</div>  <div class="ftd ftd_carrots ftd_field">this toggle div title "carrots"</div>  <div class="ftd ftd_carrots ftd_field">this toggle div title "carrots"</div>      <div class="ftd ftd_peppers ftd_title"><strong>peppers</strong>  </div>  <div class="ftd ftd_peppers ftd_field">this toggle div title "peppers"</div>  <div class="ftd ftd_peppers ftd_field">this toggle div title "peppers"</div>  <div class="ftd ftd_peppers ftd_field">this toggle div title "peppers"</div>    <div class="ftd ftd_carrots ftd_title"><strong>apples</strong>  </div>  <div class="ftd ftd_carrots ftd_field">this toggle div title "apples"</div>  <div class="ftd ftd_carrots ftd_field">this toggle div title "apples"</div>  <div class="ftd ftd_carrots ftd_field">this toggle div title "apples"</div>  <div>yahooooooooooo</div>