Jump to content
nostradamus

[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

hello,

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

Hi,

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