CODEWITHSUNDEEP
jquery
user74651
user74651

Reputation: 45

How to toggle my div content independently using a single jquery script

Please, some contents in my div were hidden using the script below, with a read more button to display the full contents of each div. The problem is that when i click on the read more button, it displays the contents of all divs with "class abt". Is there a way to maneuver this, so i dont have to create multiple class and multiple script to match each of the classes??

Below is my script:

$(document).ready(function(){ $(".abt").hide(); $(".toggle").click(function(){ $(".abt").toggle(); $(".toggle").hide(); }); });

Below is my html content

   <div>lets make the <span class="abt">World a better place     </span>         <a style="font-weight:bold;" class="toggle">Read more</a>  </div>
Hello world Hello stackoverflow Read more This is the lifeI want to live Read more

Upvotes: 0

Views: 41

Answers (1)

Dakota
Dakota

Reputation: 525

You can use below jquery

$('a.toggle').click(function(){
    var hiddenElem = $(this).parent().find('.abt');
  $(hiddenElem).toggle();
});

Refer my link : https://jsfiddle.net/fwec0cca/3/

Upvotes: 0

Related Questions