Nugroho Arfianto Nugroho Arfianto - 2 months ago 11
CSS Question

materialize control multiple tab-contents with one nav-tab

My problem is quite similar with this one: Control multiple tab-contents with one nav-tabs

Just like the one in that question, I want to change the container of two id with one tab click. The difference is I'm using materialize CSS.

here's my html :

<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a href="#test1">Test 1</a></li>
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
<li class="tab col s3"><a href="#test3">Test 3</a></li>
<li class="tab col s3"><a href="#test4">Test 4</a></li>
</ul>
</div>
<div class="col s12">
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div id="test1a" class="col s12">Test 1A</div>
<div id="test2a" class="col s12">Test 2A</div>
<div id="test3a" class="col s12">Test 3A</div>
<div id="test4a" class="col s12">Test 4A</div>
</div>
</div>


here's the fiddle: Jsfiddle

When I click TEST1, I want the content to be TEST1 and TEST1A. etc.

Thanks!

Answer

Please try below html

HTML CODE:
    <div class="row">
        <div class="col s12">
          <ul class="tabs">
            <li class="tab col s3"><a href="#test1,#test1a">Test 1</a></li>
            <li class="tab col s3"><a class="active" href="#test2,#test2a">Test 2</a></li>
            <li class="tab col s3"><a href="#test3,#test3a">Disabled Tab</a></li>
            <li class="tab col s3"><a href="#test4,#test4a">Test 4</a></li>
          </ul>
        </div>
        <div class="col s12">
          <div id="test1" class="col s12">Test 1</div>
          <div id="test2" class="col s12">Test 2</div>
          <div id="test3" class="col s12">Test 3</div>
          <div id="test4" class="col s12">Test 4</div>
        </div>
      </div>
    <div class="row">
        <div class="col s12">
          <div id="test1a" class="col s12">Test 1A</div>
          <div id="test2a" class="col s12">Test 2A</div>
          <div id="test3a" class="col s12">Test 3A</div>
          <div id="test4a" class="col s12">Test 4A</div>
        </div>
      </div>