Tabs in module
2 posters
Page 1 of 1
Tabs in module
hallo!
Is it possible to put up tabs in the module?
like on this page:
http://the-magic-fields.proboards.com/
Is it possible to put up tabs in the module?
like on this page:
http://the-magic-fields.proboards.com/
Re: Tabs in module
The CSS code for tabs.
The HTML code for the tabs.
Javascript Code for tabs
Please post below if you don't understand it.
- Code:
#tabs_container {
border-bottom: 1px solid #ccc;
}
#tabs {
list-style: none;
padding: 5px 0 4px 0;
margin: 0 0 0 10px;
font: 0.75em 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_content_container {
border: 1px solid #ccc;
border-top: none;
padding: 10px;
}
.tab_content {
display: none;
}
The HTML code for the tabs.
- Code:
<div id="tabs_container">
<ul id="tabs">
<li class="active"><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
</div>
<div id="tabs_content_container">
<div id="tab1" class="tab_content" style="display: block;">
<p>Content for the first tab</p>
</div>
<div id="tab2" class="tab_content">
<p>Content for the second tab</p>
</div>
<div id="tab3" class="tab_content">
<p>
Content for the third tab
</p>
</div>
</div>
Javascript Code for tabs
- Code:
$(document).ready(function(){
$("#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;
});
});
Please post below if you don't understand it.
Similar topics
» What is the Script/Code/Tag for module visibility?
» Question About a part of "A popup module for your forum"
» Facebook Connect module
» In which template are the widgets defined? div right? div module etc(PUBBB)
» need help with facebook app
» Question About a part of "A popup module for your forum"
» Facebook Connect module
» In which template are the widgets defined? div right? div module etc(PUBBB)
» need help with facebook app
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum