Content Show/Hide

Shows and hides content with read more, read less text

by wmmead

HTML

<div style="margin: 50px auto; width:400px;">
    <h2>Here Is A Lovely Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta volutpat enim, a lobortis dolor posuere nec. In libero nibh, egestas eget sodales vitae, interdum in velit. Vestibulum eu consequat elit. Quisque mollis luctus placerat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    
    <p>Nulla ipsum nunc, porttitor nec convallis et, sollicitudin vitae quam. In ornare nunc ut felis facilisis vel gravida sem blandit. Aliquam nec risus sed libero dictum convallis. Nulla quis augue et risus luctus placerat sed sed purus. Curabitur id quam nec justo rhoncus eleifend at eu leo. Cras facilisis auctor orci, quis semper augue dignissim eget. Sed vel velit ipsum, nec accumsan nisi.</p>
    <p class="foldtoggle">read more...</p>

    <div>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta volutpat enim, a lobortis dolor posuere nec. In libero nibh, egestas eget sodales vitae, interdum in velit. Vestibulum eu consequat elit. Quisque mollis luctus placerat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    
    <p>Nulla ipsum nunc, porttitor nec convallis et, sollicitudin vitae quam. In ornare nunc ut felis facilisis vel gravida sem blandit. Aliquam nec risus sed libero dictum convallis. Nulla quis augue et risus luctus placerat sed sed purus. Curabitur id quam nec justo rhoncus eleifend at eu leo. Cras facilisis auctor orci, quis semper augue dignissim eget. Sed vel velit ipsum, nec accumsan nisi.</p>
    
    </div>
</div>

JavaScript

jQuery(document).ready(function($){
    
    //Grabs the next div after the paragraph with the class of "foldtoggle", gives it a name and hides it
    var thisDiv = $(".foldtoggle").next("div");
    thisDiv.hide();
    
    //Click handler for when you click on the fold toggle text and slides it down.
    $(".foldtoggle").click(function(){
        thisDiv.slideToggle("slow");
        
        //Checks to see if the div is visible or not.
        if(thisDiv.is(':visible'))
        {
            //If it's visible, hide the .foldtoggle paragraph (the one that says read more)
            $(".foldtoggle").hide();
            //Then add a paragraph to the end of the div that says "read less" 
            thisDiv.append('<p class="foldup">...read less</p>');
            
            //then add a click handler to that paragraph that will fold the text up.
            $(".foldup").click(function(){
                thisDiv.slideToggle("slow", function(){
                    //Then with a callback function show the "read more" text again
                    $(".foldtoggle").show();
                    //and remove the "read less" text
                    $(".foldup").remove();    
                });
            });
        }
        
        });
    
});