Jump to content

[TUTORIAL] Tabs for cms content

Recommended Posts

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[
//  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

	//  Hide all tab content

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

	//  Show the selected tab content

	//  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>
<div id="tabs_content_container">
<div id="tab1" class="tab_content" style="display: block;">
<p>Tab 1 content</p>
<div id="tab2" class="tab_content">
<p>Tab 2 content</p>
<div id="tab3" class="tab_content">
<p>Tab 3 content</p>


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

  • Like 1

Share this post

Link to post
Share on other sites


I have a problem with your script

The first tab displays the three other loading

what is the problem

thank you

Share this post

Link to post
Share on other sites


Thanks for the script!

i have the same problem...

Have you good an idea?

Thank you !

Share this post

Link to post
Share on other sites
This topic is now closed to further replies.

  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More