jQuery - Tabs inside of tabs?

Question

I'm trying to arrange tabs inside of tabs using jQuery. Below is the HTML, CSS, and JS that I'm using. How can I insert a couple tabs within #tab2?

HTML

<ul class="tabs">
  <li><a href="#tab1">Podcasts</a></li>
  <li><a href="#tab2">Videos</a></li>
</ul>
<div id="tab1" class="tab_content">
  <p>test</p>
</div>
<div id="tab2" class="tab_content">
  <div id="tab2-1">                      <-- Tab 2-1 inside of #tab2
    <p>test</p>
  </div>
  <div id="tab2-2">                      <-- Tab 2-2 inside of #tab2
    <p>test</p>
  </div>
</div>

CSS

.tab_content { background:#fff;padding:10px;width:100% }
.tabs li { display:inline;list-style:none }
.tabs a { background:#7c7c7c;color:#dadada;display:inline-block }
.tabs a.active { background:#e32d2d;color:#fff }

JS

jQuery('ul.tabs').each(function(){
    // For each set of tabs, we want to keep track of
    // which tab is active and it's associated content
    var $active, $content, $links = jQuery(this).find('a');

    // If the location.hash matches one of the links, use that as the active tab.
    // If no match is found, use the first link as the initial active tab.
    $active = jQuery($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
    $active.addClass('active');

    $content = $($active[0].hash);

    // Hide the remaining content
    $links.not($active).each(function () {
        jQuery(this.hash).hide();
    });

    // Bind the click event handler
    jQuery(this).on('click', 'a', function(e){
        // Make the old tab inactive.
        $active.removeClass('active');
        $content.hide();

        // Update the variables with the new link and content
        $active = jQuery(this);
        $content = jQuery(this.hash);

        // Make the tab active.
        $active.addClass('active');
        $content.show();

        // Prevent the anchor's default click action
        e.preventDefault();
    });
});

You need to define another `ul` inside `#tab2` and treat it as another tabs element. Beware of not repeating id's. — Teh SoTo, Jul 17 '14 at 07:32

Rohan Kumar · Accepted Answer · 2014-07-17T07:45:32.407

5

Try this,

<ul class="tabs">
    <li><a href="#tab1">Podcasts</a></li>
    <li><a href="#tab2">Videos</a></li>
</ul>
<div id="tab1" class="tab_content">
    <p>test</p>
</div>
<div id="tab2" class="tab_content">
    <ul class="tabs">   <!-- Add tabs here -->
        <li><a href="#tab2-1">Tab2-1</a></li>
        <li><a href="#tab2-2">Tab2-2</a></li>
    </ul>
    <div id="tab2-1">
        <p>test 1</p>
    </div>
    <div id="tab2-2">
        <p>test 2</p>
    </div>
</div>

Live Demo

edited Jul 17 '14 at 07:45

answered Jul 17 '14 at 07:36

Rohan Kumar

40,431
11
76
106

Ah, forgot it had to be a list. Thanks! – J82 Jul 17 '14 at 07:49
How can we stay on current sub tab? I can do that for main tab using 'dataStore.getItem' and 'dataStore.setItem' . But that logic doesnt apply to sub-tab and the sub-tab keeps defaulting to default one upon page refresh. – Full Stack Developer - Java Jul 22 '16 at 19:16
@StartCoding you need to set selected tab using `setItem` like `setTime('selectedTab','#tab2')` then on page load you need to check if `selectedTab` is already set or not using `getItem('selectedTab')` if it is set and the element exists in page(using `.length`) then trigger its click event like `$(getItem('selectedTab')).trigger('click')`. – Rohan Kumar Jul 25 '16 at 04:24
@Rohan Kumar Can you please take a look at this one - http://stackoverflow.com/questions/38569190/stay-on-same-tab-upon-refresh – Full Stack Developer - Java Jul 25 '16 at 13:33
In your Live demo If I click on page refresh on Tab2-2 its not staying on Tab2-2 – Full Stack Developer - Java Jul 25 '16 at 13:43
My dear I've not written code which storing the current selected tab in `cookies` or in `webstorage`. It is working only if the `href` has `hash` in it only. – Rohan Kumar Jul 26 '16 at 04:24

jQuery - Tabs inside of tabs?

1 Answers1

Linked