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.

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.

<link href="" rel="stylesheet" type="text/css"/>
<script src=""></script>
<script src=""></script>  
    $(document).ready(function () {

The below div tags will go under the body tag.

<div id="tabs">
<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>
<div id="tabs-1">
            Home level test...
<div id="tabs-2">
            Search options
<div id="tabs-3" style="display:none;">
            You can manipulate this option!

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.


Popular posts from this blog

Working hours in six months to a year

I usually try to look for how many hours I have worked on a given project and what hours that I  spend on learning or network management tasks.

Below I have added some hours calculation, after finding the breakdown by months from Berkeley website.


2017Working hours six months (Jan 1st - Jun 30th): 
130 days x 8 hours =  1040 hours

Working hours six months (Jul 1st - Dec 31th): 
130 days x 8 hours =  1040 hours

Working hours for the year:
1040 hours + 1040 hours = 2080 hours
MonthWorking Days in the monthMonthly Working Hrs1/2 of working hrsMidpoint of working days in the monthDates of HolidaysJanuary22176888 a.m. 1/172,16February20160808 a.m. 2/1520March2318492Noon 3/1631April20160808 a.m. 4/17May2318492Noon 5/1629June22176888 a.m. 6/16July2116884Noon 7/174August2318492Noon 8/16September2116884Noon 9/154October22176888 a.m. 10/17November22176888 a.m. 11/1610,23,24December21168…