jQuery is a very impressive way to add a touch of professionalism to your site and has really taken off with the advent of the Web 2.0 bandwagon. Here, I’ll show you how to add Collapsible Divs to your site AND to your wordpress blog.

Have a look at the Collapsible jQuery Example for wordpress we are going to use here.

jQuery Wordpress Example
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam dictum diam in nisl. Nunc eu metus quis turpis elementum euismod. Maecenas ut est id nunc gravida volutpat. Fusce sit amet urna nec erat elementum viverra. Aliquam urna sem, accumsan in, vulputate at, egestas eu, felis.Ut risus.
Aliquam non magna fringilla justo varius scelerisque. Nam consectetuer lectus et urna. Cras a ligula elementum quam vulputate fringilla. Vestibulum lorem. Nulla neque sem, dictum a, fermentum in, suscipit at, nunc. Vestibulum vitae tortor in risus facilisis iaculis.

Nulla elit nisl, tempus vitae, pulvinar eget, consectetuer eget, enim. Nam condimentum. Nullam euismod, magna non posuere tristique, magna lorem hendrerit risus, a scelerisque quam enim quis quam. Sed id enim. Aenean eget orci.

Close

So, how to add this magic to your blog?

First go to your theme editor and add the following code fragment to your ‘Header.php‘ file right after the <?php wp_head(); ?> tag:

<?php wp_enqueue_script('jquery'); ?>

<script type="text/javascript">
      jQuery(document).ready(function(){
      jQuery('#content1').hide();
      jQuery('a').click(function(){
            jQuery('#content1').show('slow');
      });

   jQuery('a#close').click(function(){
           jQuery('#content1').hide('slow');
        })
       });
</script>

The code above first waits for the page to load completely before initiating the jQuery calls. The calls to hide and show the content are then defined as well as the speed of the show/hide functions.

Now add the following html code to your wordpress blog. Make sure it is added in HTML mode:

<a id="click" href="#">Collapsible divs jQuery for Wordpress</a>
<div class="box">
<div id="content1"><img class="alignright" src="http://www.telcojobs.eu/cms/Portals/0/Nokia_HQ.jpg" alt="" width="300" height="225" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean leo felis, tristique et, hendrerit sed, pharetra id, felis. Vestibulum rhoncus dictum tortor. Donec id enim. Nulla cursus ultrices elit. Suspendisse feugiat, magna vitae tincidunt condimentum, erat tortor cursus nibh, at congue arcu lectus quis nulla. Phasellus sed augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 

Etiam facilisis, enim nec gravida viverra, nisi lorem posuere arcu, nec interdum metus lorem vel risus. Donec est erat, viverra a, dapibus quis, interdum eu, dui.
<a id="close" href="#">Close</a></div>
</div>

This is the divs containing the content. Notice the id names given to the <a> and <div> tags as they correspond to the jQuery calls defined in the header.

Add the following stlye tags to your css code (usually style.css) to add a nice border to the content.

#content1{
    border:1px solid #CCCC33;
    padding:10px;
    margin-top:10px;
    width:500px;

}

Publish your page and click on the Collapsible divs jQuery for Wordpress link to test your code.