nostradamus 29 Posted May 23, 2012 Posted May 23, 2012 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[ $(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 1 Share this post Link to post Share on other sites
stef06 1 Posted July 3, 2012 Posted July 3, 2012 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
guiyom 1 Posted July 27, 2012 Posted July 27, 2012 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
Cehrlichman 2 Posted August 9, 2013 Posted August 9, 2013 Great post nostradamus! Worked great for me using 1.4.7! Share this post Link to post Share on other sites
kamaaina 1 Posted July 4, 2015 Posted July 4, 2015 will this work in PS vers 1.6.14 Share this post Link to post Share on other sites
Recommended Posts