Using jQuery toggle() to Show and Hide Text
HTML
<div id="content">
<a class="showhide" href="#">Read more...</a>
<div class="morearticle">The human brain is a mysterious little ball of gray matter. After all these years, researchers are still baffled by many aspects of how and why it operates like it does.</div>
</div><!-- #content -->
JavaScript
//Anonymous Function Below for Private variables
(function(){
$(".morearticle").hide();
$(".showhide").click(function(event){
event.preventDefault();
$(this).next(".morearticle").toggle("slow");
$(this).next(".morearticle").toggleClass("show");
if($(this).next(".morearticle").hasClass("show"))
{
$(this).text("Hide");
}
else
{
$(this).text("Read more...");
}
});
})();