New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

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>

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 (){    
        function (){ 
            jQuery(this).html('Hide the Module'); 
        function (){ 
            jQuery(this).html('Show the Hidden Module'); 

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.


Comment Form

Only registered users may post comments.


Aderson Oliveira (22)
Alec Whittington (11)
Alessandra Davies (3)
Alex Shirley (10)
Andrew Hoefling (3)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (37)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (213)
Chris Paterra (55)
Clint Patterson (108)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (181)
Daniel Valadas (48)
Dave Buckner (2)
David Poindexter (12)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (80)
Francisco Perez Andres (17)
Geoff Barlow (12)
George Alatrash (12)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Kelly Ford (4)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matt Rutledge (2)
Matthias Schlomann (16)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (40)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Oliver Hine (1)
Patricio F. Salinas (1)
Patrick Ryan (1)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Sacha Trauwaen (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott Schlesier (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Steven Fisher (1)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (3)
Tycho de Waard (4)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (180)
William Severance (5)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out