How To Show/Hide Read To A Greater Extent Than Link Alongside Jquery?

Sometimes y'all convey long text together with few infinite to demo it, amongst jQuery together with CSS is real unproblematic to enshroud component division of the text together with usage a "Read more" link.
So, this is the HTML, delight banking concern complaint that the value of links DIV ID is replicated equally CLASS inward the links together with inward the extra text:

<div class="section"> <div id="lorem"> Lorem ipsum dolor sit down amet <a class="read lorem" href="http://www.blogger.com/blogger.g?blogID=2335294175322090003#">(Read more...)</a>  <a class="read enshroud lorem" href="http://www.blogger.com/blogger.g?blogID=2335294175322090003#">(Hide...)</a>  </div>  <div class="more lorem"> Praesent commodo, tellus vehicula facilisis laoreet,enim tellus sagittis metus, vel posuere risus tellus vel quam. Praesent fermentum, risus nec sagittis volutpat  </div>  </div> <div class="section"> <div id="nullam"> Nullam fringilla hendrerit nisi et varius. <a class="read nullam" href="http://www.blogger.com/blogger.g?blogID=2335294175322090003#">(Read more...)</a>  <a class="read enshroud nullam" href="http://www.blogger.com/blogger.g?blogID=2335294175322090003#">(Hide...)</a>  </div>  <div class="more nullam"> Mauris blandit ullamcorper purus, sit down amet imperdiet tortor suscipit et. Nulla luctus magna eu dolor tempor pharetra. Sed egestas, massa id consectetur  </div>  </div>  

With CSS nosotros enshroud i of the links together with the extra text.

<style type="text/css"> .more, .hide{ display:none;} </style> 

Then the jQuery!

$(".read").click(function (){     var i=$(this).parent().attr("id"); //We hold out the ID inward the nurture DIV      $("a."+i).toggle();  //switch the link amongst toggle()     $("div."+i).slideToggle("slow");   }); 

Source: You tin hand notice sentiment the demo @

Sumber http://developer-paradize.blogspot.com