Tabbed Content / Posts /

multiple tabs on same page

Hello everyone, this may have already been answered but i could not find it if so. I want to have one set of tabbed panels in the top of my content, and a whole different set underneath it. but If i take the demo code and just copy/paste it under each other then only the top one works. How do you add more than one set of panels?
Dade Murphy  11 years ago   viewed: 33160    

1 Answer


Hi Milo,

The below was done for different reason, but should work none the less ... just takes a little bit of work..

Just for anyone who comes across this problem, I did mange to fix it, quite simple if you are ok with editing the tabcontent.js file.

Basically the problem was that a cookie was being set in the tabcontent.js file, and that was being set by the first use of tabcontent, whichever that was, ie: if I used page1 first then it was set there, or if I used page2 first it was set there, so obviously if I went to page1 first, the cookie was set there, and then when I went to page2 it was pulling the information set by page1. (Comment by admin: This is not correct. GD has made it wrong. If the tab content has been configured as data-persist="true", the cookie will be set individually for each page. In another words, the pages with tab contents will not share the same cookie)

So anyway, in the tabcontent.js file I just copy and pasted two more blocks of the javascript code (I have three pages I needed to deal with), all in the same file, and first thing is to change the 'var tabs=....' only for the extra blocks you have copy and pasted. Change these to a new name ie: var tabs2 or var tab3 etc... First instance is at the beginning .. var tabs=function()... and next one looks like if(c(e[a],"tabs")){e[a].i=b.length;b (change the word "tabs" to the same as you set var tabs) towards the end of the code block.

Next you need to locate all instances of the word "tabContent" in each extra code block and change that the same ie: tabContent2 or tabContent3. There should be 4 instances of this (from memory) scattered through each code block.

That's the javascript done. Next thing is to go to where you have added tabcontent in your html and change <ul class='tabs' data-persist="true"> to reflect what you did in the javascript file ie: 'tabs' becomes 'tabs2' etc... and also <div id="something" class="tabcontent">, change "tabcontent" to what you did in the javscript file ie: "tabcontent2" etc..

Almost there (thank goodness!!), last thing is to alter the tabcontent.css file, and just simply add each extra to each css block which has 'tabs' in it to include the extra instances.. ie: ul.tabs,ul.tabs2,ul.tabs3 ... ul.tabs li, ul.tabs2 li, ul.tabs3 li
etc etc ... You will need to do this for all css settings where the word 'tabs' is set, and lastly for div.tabcontent -- div.tabcontent,div.tabcontent2,div.tabcontent3 etc.. and just leave div.tabcontents the same..

Hope helps .Sorry for the long explanation, I'm sure theres a faster way of doing it!!

Hope helps :-)

GD   11 years ago


Your name*
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: