[TUTORIAL] Tabs for cms content

[nostradamus 29]

Tutorial how to add tabs to a cms page

 

 

Past this code in the html editor of your cms page

Change the tab name and tab content to fit your needs.

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
//  When user clicks on tab, this code will be executed
$("#tabs li").click(function() {
	//  First remove class "active" from currently active tab
	$("#tabs li").removeClass('active');

	//  Now add class "active" to the selected/clicked tab
	$(this).addClass("active");

	//  Hide all tab content
	$(".tab_content").hide();

	//  Here we get the href value of the selected tab
	var selected_tab = $(this).find("a").attr("href");

	//  Show the selected tab content
	$(selected_tab).fadeIn();

	//  At the end, we add return false so that the click on the link is not executed
	return false;
});
});
// ]]></script>
<p> </p>
<div id="tabs_container">
<ul id="tabs">
<li class="active"><a href="#tab1">Tab 1 name</a></li>
<li><a href="#tab2">Tab 2 name</a></li>
<li><a href="#tab3">Tab 3 name</a></li>
</ul>
</div>
<div id="tabs_content_container">
<div id="tab1" class="tab_content" style="display: block;">
<p>Tab 1 content</p>
</div>
<div id="tab2" class="tab_content">
<p>Tab 2 content</p>
</div>
<div id="tab3" class="tab_content">
<p>Tab 3 content</p>
</div>
</div>

 

Save the cms page

 

 

Open themes/YOUR THEME/css/modules/blockcms/blockcms.css

And add

 

#tabs_wrapper {
width: 422px;
}
#tabs_container {
border-bottom: 1px solid #ccc;
}
#tabs {
list-style: none;
padding: 5px 0 4px 0;
margin: 0 0 0 10px;
font: 1em arial;
}
#tabs li {
display: inline;
}
#tabs li a {
border: 1px solid #ccc;
padding: 4px 6px;
text-decoration: none;
background-color: #eeeeee;
border-bottom: none;
outline: none;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
}
#tabs li a:hover {
background-color: #dddddd;
padding: 4px 6px;
}
#tabs li.active a {
border-bottom: 1px solid #fff;
background-color: #fff;
padding: 4px 6px 5px 6px;
border-bottom: none;
}
#tabs li.active a:hover {
background-color: #eeeeee;
padding: 4px 6px 5px 6px;
border-bottom: none;
}

#tabs li a.icon_accept:hover {
padding-left: 24px;
}

#tabs_content_container {
border: 0px solid #ccc;
border-top: none;
padding: 10px;
   height:400px; /*container hight overflow will add scrollbar*/
   overflow: auto;
   overflow-x: auto;
   overflow-y: auto;
}

 

 

Change the css to fit your template

 

Save and upload to your server

[stef06 1]

hello,

I have a problem with your script

The first tab displays the three other loading

what is the problem

thank you

[guiyom 1]

Hi,

Thanks for the script!

i have the same problem...

Have you good an idea?

Thank you !

[Cehrlichman 2]

Great post nostradamus! Worked great for me using 1.4.7!

[kamaaina 1]

will this work in PS vers 1.6.14