Tabbed Content / Posts /

multiple tabs on same page

Dade Murphy

one year ago
Viewed: 4305

178
Useful
 
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?

one year ago
milo

2

Try below:
    <ul class="tabs" persist="true">
        <li><a href="#" rel="view1">Tab 1</a></li>
        <li><a href="#" rel="view2">Tab 2</a></li>
        <li><a href="#" rel="view3">Tab 3: long name</a></li>
        <li><a href="#" rel="view4">Tab 4</a></li>
    </ul>
    <div class="tabcontents">
        <div id="view1" class="tabcontent">
        </div>
        <div id="view2" class="tabcontent">
        </div>
        <div id="view3" class="tabcontent">
        </div>
        <div id="view4" class="tabcontent">
        </div>

    </div>



    <ul class="tabs" persist="true">
        <li><a href="#" rel="Div1"><span>Features</span></a></li>
        <li><a href="#" rel="Div2"><span>How to Use</span></a></li>
        <li><a href="#" rel="Div3"><span>Source Code</span></a></li>
    </ul>
    <div class="tabcontents">
        <div id="Div1" class="tabcontent">
        </div>
        <div id="Div2" class="tabcontent">
        </div>
        <div id="Div3" class="tabcontent">
        </div>
    </div>

one year ago
GD

-3

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 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' 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 :-)

one year ago
milo

0

Thanks GD. 
You got something wrong. See my comments in your post in red color.
one year ago
WASEEM

0

HOT TO CHANGE THE NEW TABE COLOR IN SAME PAGE
one year ago
milo

1

You can change the tab color via the CSS file.

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