Show and Hide a Module Using jQuery

This blog entry is cross-posted from my personal blog site.

For quite a while now, jQuery has become one of the things that I am passionate about.  It’s very powerful in getting you up and running with an interactive and robust user interface in your modules.  There is literally nothing that I can think of that you cannot do with your designs and interactions in DNN using jQuery.  In this post though, I am going to focus on a specific area though, which is hiding and showing a module using jQuery.

When you think about showing a module, it would first need to be on the page somewhere.  Showing the module obviously requires for the module to initially be hidden though.  Hiding any HTML element on a page is best done through CSS, and prior to your jQuery running.  It’s for this reason that I’d suggest that you have a special container that hides the module, or use the Header and Footer settings in the settings for your module to “hide” it before the page loads.

The module you choose to hide could be any module for any reason.  It could be an advertisement, login, or anything else.

Lay the Groundwork

Here is the required CSS below.  You can add this to your skin CSS, or the Portal.css through the Site Settings.

.hide-element { display:none; }

And the required HTML is below.  Make sure the open tag goes into the Header and the closing tag goes into the Footer setting.  Alternatively, a better solution would be a container that’s built to do this. 

If you want to get even more fancy with this, you could create a “hidden pane” in the skin of your site as yet another alternative to having a hidden module on the page.

<div class=”hide-element”>

</div>

Now, we can focus on showing the hidden module.  What you use to “show” the module is completely up to you.  I am simply going to show you how to make it appear.  You could additionally make it appear in any number of jQuery plugins, such as the popular lightbox or fancybox plugins.

Place the Visual Element

No matter what plugin you choose to show the module with, it still needs an element on the page that your website visitor uses to cause the hidden module to show.  The most common way to make this happen is either through a simple link or linked image.  I am going to show you the former.

<a id="lnkShowModule" href="#">Show the Hidden Module</a>

Probably the most important thing in the snippet above is the ID attribute of the A tag.  This will allow us to work with this link in our jQuery.

Wire it Up

Anywhere on the page, even in the Header or Footer settings of any module, you would now need to add a bit of JavaScript, in our case, jQuery.

jQuery(document).ready(function (){    

    jQuery('#lnkShowModule').toggle( 

        function (){ 

            jQuery(this).html('Hide the Module'); 

            jQuery('.hide-element').toggle(); 

        }, 

        function (){ 

            jQuery(this).html('Show the Hidden Module'); 

            jQuery('.hide-element').toggle(); 

        }

    );

});

The snippet above does two things.  First, it checks to see if the module is already hidden.  If it is, then it will show it – otherwise, it will hide the module.  The snippet will also conditionally change the text within the link to the end-user.  Don’t forget to wrap your jQuery within a SCRIPT tag.

See it In Action!

Even though I am not using a module to do this, the principle is the same.  See a demo using the link below:

Show the Hidden Element

It’s that easy! Try this for yourself and let me know how it went.

UPDATE:  Nik Kalyani caught that I wasn’t using the more appropriate toggle() method in the code sample. It has been updated.