Skip to main content

Jquery Quick Tabs for DotNetNuke HTML Module

If you want to quickly add tabs solution to your HTML Module than follow the below methods to accomplish it.

I have used the Microsoft Ajax CDN file reference as the following link allows me to choose different color scheme with just changing the UI css file reference.
http://www.asp.net/ajaxlibrary/CDNjQueryUI1812.ashx

In the page settings, under the page meta tag section add the following items. Make sure that the page meta tag takes the entire text and does not trims any part, if the trim or concatenation does happen, than add the remaining (entire tag) portion to the HTML module settings header section.

**********START************
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/jquery-ui.js"></script>  
<script>
    $(document).ready(function () {
        $("#tabs").tabs();
    });
</script>
**********END************ 

The below div tags will go under the body tag.

**********START************
<div id="tabs">
<ul>
<li><a href="#tabs-1"><span>Home</span></a></li>
<li><a href="#tabs-2"><span>Search</span></a></li>
<li style="display:none;"><a href="#tabs-3"><span>Details</span></a></li>
</ul>
<div id="tabs-1">
            Home level test...
</div>
<div id="tabs-2">
            Search options
</div>
<div id="tabs-3" style="display:none;">
            You can manipulate this option!
</div>
    </div>
**********END************* 

This will basically enable your page to have tab options. As the HTML module will have the user level permissions, this basically makes it a working solution, without spending money or installing tabs solutions which are too complex or bloated.

As the javascript and CSS are placed under the page meta tag settings, the content contributer or editors will not have to deal with the scripts and css, and if the contributer or the editor did messes up the text, it will not be some complex module vb or c# script but rather the html in the HTML module that you will need to fix to resolve any issues.

Hope it helps to anyone who is looking for a fast solution for dynamic tabs for the dnn solution.