Question

I’m trying to have on click ‘each‘ item that was a class of .toggleDiv to toggle separately not all at once.

Right now the .toggleDiv on click expands all elements within .fullSaintDesc w/ just one click, this is what I don’t want it to do – what I want is for EACH element that has a class of .toggleDiv to expand the .fullSaintDesc but not all together.

If you feel the title of my question is not clear of what I’m asking, feel free to edit it.

$(document).ready(function() {     
    $(".toggleDiv").click(function(){
        $(".fullSaintDesc").toggle();return false;
    });   
});

html

These classes are being used throughout the page – i want each .toggleDiv to expand on its own not all on ONE click.

<p>
  <a class="toggleDiv" href="#">Click here to read more</a>
</p>
<div class="fullSaintDesc">
  <p>blah blah blah </p>
</div>
<!-- eo : fullSaintDesc -->

Answer 1

Change it to:

 $(".toggleDiv .fullSaintDesc").click(function(){
    $(this).toggle();
 });

Without seeing html structure, I can only guess, but this should work:

 $(".toggleDiv").click(function(){
    $(this).find('.fullSaintDesc').toggle();
 });

Edit 3: Reflecting the last update: (if its consistent)

 $(".toggleDiv").click(function(){
    $(this).parent().next('.fullSaintDesc').toggle();
 });