title: Single tab multiple content bootstrap 4
body: <p>I am working on bootstrap tabs, I am trying for the single tab with multiple content div's. I have tried by using two data-target values like <code>data-target=".etab-p1, .etabi-img1"</code>.but it only works for one content div other second content is not changing.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('#myTab a').click(function() {
      var href = $(this).attr('href');
      if (href == "[href^='tab-']") {
        $('.tab-pane').css('display', 'none');
        $("[class^='etab-'][class^='etabi-']").removeClass('show');
        $("[class^='etab-'][class^='etabi-']").css('display', 'block');
        $("[class^='etab-'][class^='etabi-']").addClass('show');
      }
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
  &lt;ul id="myTab" class="nav nav-tabs" role="tablist"&gt;
    &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#tab-1" data-target=".etab-p1, .etabi-img1" data-toggle="tab"&gt;C1&lt;/a&gt;&lt;/li&gt;
    &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#tab-2" data-target=".etab-p2, .etabi-img2" data-toggle="tab"&gt;C2&lt;/a&gt;&lt;/li&gt;
    &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#tab-3" data-target=".etab-p3, .etabi-img3" data-toggle="tab"&gt;C3&lt;/a&gt;&lt;/li&gt;
    &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#tab-4" data-target=".etab-p4, .etabi-img4" data-toggle="tab"&gt;C4&lt;/a&gt;&lt;/li&gt;
    &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#tab-5" data-target=".etab-p5, .etabi-img5" data-toggle="tab"&gt;C5&lt;/a&gt;&lt;/li&gt;
    &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#tab-6" data-target=".etab-p6, .etabi-img6" data-toggle="tab"&gt;C6&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="tab-content"&gt;
    &lt;div class="tab-pane fade show active etab-p1"&gt;
      &lt;p&gt;Content 1.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="tab-pane fade etab-p2"&gt;
      &lt;p&gt;Content 2.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="tab-pane fade etab-p3"&gt;
      &lt;p&gt;Content 3.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="tab-pane fade etab-p4"&gt;
      &lt;p&gt;Content 4.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="tab-pane fade etab-p5"&gt;
      &lt;p&gt;Content 5.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="tab-pane fade etab-p6"&gt;
      &lt;p&gt;Content 6.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="tab-content"&gt;
    &lt;div class="tab-pane fade show active etabi-img1"&gt;
      &lt;p&gt;Content 111.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="tab-pane fade etabi-img2"&gt;
      &lt;p&gt;Content 2222.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="tab-pane fade etabi-img3"&gt;
      &lt;p&gt;Content 3333.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="tab-pane fade etabi-img4"&gt;
      &lt;p&gt;Content 4444.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="tab-pane fade etabi-img5"&gt;
      &lt;p&gt;Content 5555.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="tab-pane fade etabi-img6"&gt;
      &lt;p&gt;Content 6666.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>