How to Show/Hide Read More link With jQuery? - Codeigniter

thegeby.blogspot.com - Sometimes you have long text and few space to show it, with jQuery and CSS is very simple to hide part of the text and create a "Read more" link.
So, this is the HTML, please note that the value of links DIV ID is replicated as CLASS in the links and in the extra text:

<div> <div> Lorem ipsum dolor sit amet <a href="http://www.blogger.com/blogger.g?blogID=2335294175322090003#">(Read more...)</a> <a href="http://www.blogger.com/blogger.g?blogID=2335294175322090003#">(Hide...)</a> </div> <div> 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> <div> Nullam fringilla hendrerit nisi et varius. <a href="http://www.blogger.com/blogger.g?blogID=2335294175322090003#">(Read more...)</a> <a href="http://www.blogger.com/blogger.g?blogID=2335294175322090003#">(Hide...)</a> </div> <div> Mauris blandit ullamcorper purus, sit amet imperdiet tortor suscipit et. Nulla luctus magna eu dolor tempor pharetra. Sed egestas, massa id consectetur </div> </div> 

With CSS we hide one of the links and 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 get the ID in the parent DIV $("a."+i).toggle(); //switch the link with toggle() $("div."+i).slideToggle("slow"); }); 

Source: You can view the demo @ http://nelsondev.blogspot.se/search?q=a+read+morehide+link+with+jquery

Posted by Unknown