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
  • 1 month later...
  • 4 weeks later...
  • 1 year later...
  • 1 year later...
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