Simple jQuery View More and Less Content Function

Some of the most simple tasks with jQuery can add a lot for a visitor to your website. For example, on my web design landing page I have a jQuery view more and less anchor link that allows a visitor to expand or retract my about section. The great thing about this is that I can get my main point across and then if a user wants to read more, they can click view more and it instantly pops up below. What is even better, is that it brings my content section up above the fold when a user first enters. I am going to provide a quick and easy way for you to implement this function today within your own website.

jQuery View More and View Less Tutorial

Step One: Create The Hidden Div

The first thing that we want to do is to go ahead and create the div that will be hidden. This is usually going to be after some amount of text that is read before hand, so I have included that as well in the example. We include the style attribute of “display: none;” on the div so that it is hidden when the page is first rendered by the browser.

Include the following code within your body tags:

<p>
    Text that introduces the content that you would like to view more of.
</p>
<p>
    <a href="javascript:void(0)" class="view-more">view more</a>
</p>
<div class="show-more" style="display: none;">
    <p>
        This text is what we want to show/hide.
    </p>
    <p>
        <a href="javascript:void(0)" class="view-less">view less</a>
    </p>
</div>

Step Two: Power Your Website With jQuery

Now we need to make sure that our website becomes powered with jQuery so that when we call particular web programming functions, they actually work. This is pretty easy to do and the rest of the code is going to go within the head html tag on your site, so be sure that this is where you include the next few blocks of code that I show you. This uses the script tag with a src attribute that is currently pointing to the latest release of jQuery. It includes that file when your web page document is loaded in the internet.

Include the following code within your head tags:

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

Step Three: Build The jQuery Function

This is the final step, which just goes to show how easy it is to implement the jQuery view more and less content function. At this point we just need to come up with a script that will change the CSS attributes for the div and text when the view more or view less links are clicked. First, we are going to make sure that the document is ready before this function works and then once it is, we are setting up click events on the classes that we established named “view-more” and “view-less”.

Include the following code within your head tags:

<script>
    $(document).ready(function(){ 
        $(".view-more").click(function(){
            $(this).css("display","none");
	    $(".show-more").css("display","block");
        });
			
	$(".view-less").click(function(){
	    $(".show-more").css("display","none");
	    $(".view-more").css("display","block");
        });
    });
</script>	

Summary

This pretty much sums up my tutorial on creating a view more/less function using jQuery. Simple tasks like this can really add a lot to the user experience of a website. Really easy interactions make your website a lot more user friendly, and that is ultimately what we need when developing great content.

Do you have any questions or ideas for other ways of implementing this technique? I would love to read your responses and have a discussion below in the comments section.

Enjoy Right Now,
Jeff Jones