NESTED Tabs in Material Design Lite - Nested Tabs

Question

JSFiddle here.

I am trying to use Nested Tabs in a web page where I am using Material Design Lite. So, please see in the JSFiddle linked or in the demo below, if you click the outer tab labelled ONE, you will see 4 nested tabs. The problem is with these nested tabs:

1. The first of these nested tabs is Active by default, so its tab-header/title has a pink colored accent under it. When I click on the other nested tabs, this pink colored accent should be removed from the first nested tab and should be added to the tab clicked. But that does NOT happen.

   When I run this test on localhost, the #something part in the URL DOES change like it should (like by default the url ends with #scroll-tab-1, but when I click the tab titled BOB, the URL changes to end with #scroll-tab-2), BUT the pink colored accent is not added to the newly clicked tab title.

2. There is Indigo colored empty row (i.e. empty horizontal space) below the nested tabs. Why? I need to get rid of this.

So how do I solve these problems, especially the first one? Thank you in advance.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
	<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
	
<header class="mdl-layout__header">

	<div class="mdl-layout__header-row">
		<!-- Title -->
		<span class="mdl-layout-title">Title</span>
	</div>

	<!-- Tabs -->
	<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
		<a href="#fixed-tab-1" class="mdl-layout__tab is-active">All</a>
		<a href="#fixed-tab-2" class="mdl-layout__tab">ONE</a>
		<a href="#fixed-tab-3" class="mdl-layout__tab">TWO</a>
		<a href="#fixed-tab-4" class="mdl-layout__tab">THREE</a>
	</div>

</header>

<div class="mdl-layout__drawer">
	<span class="mdl-layout-title">Title</span>
</div>

<main class="mdl-layout__content">

    <section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
    	<div class="page-content"><!-- Your content goes here --></div>
    </section>

    
    <section class="mdl-layout__tab-panel" id="fixed-tab-2">
    	<div class="page-content">
      		<!-- Your content goes here -->
      		<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
      			<a href="#scroll-tab-1" class="mdl-layout__tab is-active">Alice</a>
      			<a href="#scroll-tab-2" class="mdl-layout__tab">Bob</a>
      			<a href="#scroll-tab-3" class="mdl-layout__tab">Amy</a>
      			<a href="#scroll-tab-4" class="mdl-layout__tab">Sarah</a>
      		</div>
      	</div>
    </section>

    <section class="mdl-layout__tab-panel" id="fixed-tab-3">
      <div class="page-content"><!-- Your content goes here --></div>
    </section>

    <section class="mdl-layout__tab-panel" id="fixed-tab-4">
      <div class="page-content"><!-- Your content goes here --></div>
    </section>
</main>

</div>

Answer 1

Answer to your 2nd point - "Indigo colored empty row".

You forgot to add 'mdl-layout__tab-bar-container' class as a parent to the "mdl-layout__tab-panel".

Check my jsFiddle

<div class="mdl-layout__tab-bar-container">
    <section class="mdl-layout__tab-panel" id="fixed-tab-2">
       <div class="page-content">
          <!-- Your content goes here -->
          <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
              <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Alice</a>
              <a href="#scroll-tab-2" class="mdl-layout__tab">Bob</a>
              <a href="#scroll-tab-3" class="mdl-layout__tab">Amy</a>
              <a href="#scroll-tab-4" class="mdl-layout__tab">Sarah</a>
          </div>
       </div>
    </section>
</div>

About your first point: I think MDL team didn't handled the nested tab. When you click on nested tab, you get an error:

Uncaught TypeError: Cannot read property 'classList' of null

The better approach to handle nested tabs should be: When you click on tab just check parent class 'mdl-layout__tab-bar-container', then make tab and content active under this parent:

$('.mdl-layout__tab').on('click', function() {
   $this = $(this);
   if($this.hasClass('is-active')) return;

   $parent = $this.closest('.mdl-layout__tab-bar');
   $('.mdl-layout__tab', $parent).removeClass('is-active');
   $this.addClass('is-active');
});

jsFiddle Demo (In this I am able to make nested MDL tab active)