Jump to content

[TUTORIAL] Tabs for cms content


Recommended Posts

Tutorial how to add tabs to a cms page

 

tabsae.png

 

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

  • Like 1

Share this post


Link to post
Share on other sites
  • 1 month later...
  • 4 weeks later...
  • 1 year later...
  • 1 year later...
Guest
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