Tailwind tabs within tab not working as expected

Question

Using tabs within a tab doesn't seem to be working as expected using HTML and TailwindCss. What's going wrong?

const tabs = document.querySelectorAll(".tabs");
const tab = document.querySelectorAll(".tab");
const panel = document.querySelectorAll(".tab-content");

function onTabClick(event) {

  // deactivate existing active tabs and panel

  for (let i = 0; i < tab.length; i++) {
    tab[i].classList.remove("active");
  }

  for (let i = 0; i < panel.length; i++) {
    panel[i].classList.remove("active");
  }


  // activate new tabs and panel
  event.target.classList.add('active');
  let classString = event.target.getAttribute('data-target');
  console.log(classString);
  document.getElementById('panels').getElementsByClassName(classString)[0].classList.add("active");
}

for (let i = 0; i < tab.length; i++) {
  tab[i].addEventListener('click', onTabClick, false);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.4/tailwind.min.css" rel="stylesheet" />
<div class="bg-white">
  <nav class="tabs flex flex-col sm:flex-row">
    <button data-target="panel-1" class="tab active text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500">
        Summary Reports
    </button>
    <button data-target="panel-2" class="tab ext-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none">
        Trend Reports
    </button>
    <button data-target="panel-3" class="tab text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none">
        Predictive Reports
    </button>
  </nav>
</div>
<div id="panels">
  <div class="panel-1 tab-content active py-5">
    <div class="bg-white">
      <nav class="tabs flex flex-col sm:flex-row">
        <button data-target="panel-1" class="tab active text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500">
            Number of students submitted on a specific day
        </button>
        <button data-target="panel-2" class="tab ext-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none">
            Number of students that submitted for a specific module code
        </button>
      </nav>
    </div>
    <div id="panels">
      <div class="panel-1 tab-content active py-5">
        Number of students submitted on a specific day
      </div>
      <div class="panel-2 tab-content py-5">
        Number of students that submitted for a specific module code
      </div>
    </div>
  </div>
  <div class="panel-2 tab-content py-5">
    Trend Reports
  </div>
  <div class="panel-3 tab-content py-5">
    Predictive Reports
  </div>
</div>

View on CodePen

In HTML, [IDs must be unique to the DOM tree](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page); i.e. there can only be one element with `id="panels"`. — showdev, Jul 15 '21 at 01:43
Yeah I knew that but I guess I missed the part where the ids were set in the code I used. — Tim Kruger, Jul 15 '21 at 01:46

Meysam Asadi · Accepted Answer · 2021-07-15T02:28:13.950

The outer tab had a conflict with the inner tab. Because you used the same id for both! I set the internal content id to content-panels.

change html to this :

<div class="bg-white">
            <nav class="tabs flex flex-col sm:flex-row">
                <button data-target="panel-1" class="tab active text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500">
                    Summary Reports
                </button>
                <button data-target="panel-2" class="tab ext-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none">
                    Trend Reports
                </button>
                <button data-target="panel-3" class="tab text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none">
                    Predictive Reports
                </button>
            </nav>
        </div>

        <div id="panels">
            <div class="panel-1 tab-content active py-5">
                
                <div class="bg-white">
                    <nav class="tabs flex flex-col sm:flex-row">

                        <button data-target="panel-s-1" class="tab-s active text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500">
                            Number of students submitted on a specific day
                        </button>
                        <button data-target="panel-s-2" class="tab-s ext-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none">
                            Number of students that submitted for a specific module code
                        </button>

                    </nav>
                </div>

                <div id="content-panels">
                    <div class="panel-s-1 tab-content-s active py-5">
                        Number of students submitted on a specific day
                    </div>
                    <div class="panel-s-2 tab-content-s py-5">
                        Number of students that submitted for a specific module code
                    </div>
                </div>

            </div>

            <div class="panel-2 tab-content py-5">
                Trend Reports
            </div>
            <div class="panel-3 tab-content py-5">
                Predictive Reports
            </div>
        </div>

change script to this :

const tabs = document.querySelectorAll(".tabs");
const tab = document.querySelectorAll(".tab");
const panel = document.querySelectorAll(".tab-content");

const tab_s = document.querySelectorAll(".tab-s");
const panel_s = document.querySelectorAll(".tab-content-s");

function onTabClick(event) {

  // deactivate existing active tabs and panel

  for (let i = 0; i < tab.length; i++) {
    tab[i].classList.remove("active");
  }

  for (let i = 0; i < panel.length; i++) {
    panel[i].classList.remove("active");
  }
  // activate new tabs and panel
  event.target.classList.add('active');
  let classString = event.target.getAttribute('data-target');
  console.log(classString);
  document.getElementById('panels').getElementsByClassName(classString)[0].classList.add("active");
}

function onTab_s_Click(event) {

  // deactivate existing active tabs and panel

  for (let i = 0; i < tab_s.length; i++) {
    tab_s[i].classList.remove("active");
  }

  for (let i = 0; i < panel_s.length; i++) {
    panel_s[i].classList.remove("active");
  }

  // activate new tabs and panel
  event.target.classList.add('active');
  let classString = event.target.getAttribute('data-target');
  console.log(classString);
  document.getElementById('content-panels').getElementsByClassName(classString)[0].classList.add("active");
}

for (let i = 0; i < tab.length; i++) {
  tab[i].addEventListener('click', onTabClick, false);
}
for (let i = 0; i < tab_s.length; i++) {
  tab_s[i].addEventListener('click', onTab_s_Click, false);
}

change css to this :

.tab-content {
  display: none;
}

.tab-content-s {
  display: none;
}

.tab-content.active {
  display: block;
}

.tab-content-s.active {
  display: block;
}

Thanks very much, however it's still not working 100%, as clicking the "Trend Reports" tab doesn't show the Trend Reports description as expected, please refer to the updated codepen.io link [https://codepen.io/krugert/pen/zYwZGzJ](https://codepen.io/krugert/pen/zYwZGzJ). — Tim Kruger, Jul 15 '21 at 01:39
Excellent, thanks very much it's working 100% now. I appreciate your effort. — Tim Kruger, Jul 15 '21 at 03:09

Tailwind tabs within tab not working as expected

1 Answers1