How To Install DomTabs On Wordpress

Did you ever see tabs something like in the image below and wondering how they got that working.That can be done by using DomTab. It can save a lot of space in places like the sidebar.

What Is DomTab??

DOMtab is a JavaScript that turns a list of links connected to content sections into a tab interface. The script removes any “back to top” links in the section and automatically hides all but the first one when the page is loaded. You can use as many tabbed menus on the page as you want to.

How To Install DomTab On Wordpress

Download the script from the official site, and unzip it.
Upload the domtab.js file to your theme folder in WordPress.
Download pbd_domtab.css and upload that to the theme folder as well.
In header.php, paste the following above
</head>

<script type=”text/javascript” src=”<?php bloginfo(’template_directory’); ?>/domtab.js”>

</script> <link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(’template_directory’); ?>/pbd_domtab.css” media=”screen” />
In sidebar.php, or in a widget, paste the following where you want the DOMtabs:

<div class=”domtab”>

<ul class=”domtabs”>

<li><a href=”#t1“>Tab 1</a></li>

<li><a href=”#t2″>Tab 2</a></li>

<li><a href=”#t3″>Tab 3</a></li>

</ul><div> <a name=”t1″ id=”t1“></a> <p>

Insert contents of the first tab here, e.g. The code for a plugin.</p> </div>

<div> <a name=”t2″ id=”t2“></a> <p>Insert contents of the second tab here.</p> </div>

<div> <a name=”t3″ id=”t3“></a> <p>Insert contents of the third tab here.</p> </div>

</div>