CODEWITHSUNDEEP
javascripthtmljquerycss
doomdaam
doomdaam

Reputation: 783

Nested tabs doesn't close down in HTML

I am trying to create different overviews based on the content of the tabs. Market overview shows a general overview, which can be separated into Today and This Week, and OMXC25 is a market and another tab with more specific information.

The current setup doesn't close the tabs when opening another and opens the tables in the same overview. Code can be run and the example shows the above issue. Clicking Today and then This week should close the Today tab, but when clicking OMXC25 should close the Market Overview tab and show only the OMXC25 tab

To see the tabs in action feel free to check it out on the website: https://signal-invest.com/overview/ as you can see, the tabs do not close.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body {font-family: Arial;}

      /* Style the tab */
      .tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
      }

      /* Style the buttons inside the tab */
      .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        font-size: 17px;
      }

      /* Change background color of buttons on hover */
      .tab button:hover {
        background-color: #ddd;
      }

      /* Create an active/current tablink class */
      .tab button.active {
        background-color: #ccc;
      }

      /* Style the tab content */
      .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
      }
    </style>
  </head>
  <body>

    <h2>Tabs</h2>
    <p>Click on the buttons inside the tabbed menu:</p>


    <div class="tab">
      <button  style="color:black;" class="tablinks" onclick="openCity(event, 'Markets_Today')">Markets Today</button>
      <button  style="color:black;" class="tablinks" onclick="openCity(event, 'OMXC25')">OMXC25</button>
    </div>

    <div id="Markets_Today" class="tabcontent">
      <div class="tab">
        <button  style="color:black;" class="tablinks" onclick="openCity(event, 'Today')">Today</button>
        <button  style="color:black;" class="tablinks" onclick="openCity(event, 'This_week')">This week</button>
      </div>
      <div id="Today" class="tabcontent">
        <table class="sortable">
          <tr>
            <H3>Market Overview - Today</H3>
            <th>Market</th>
            <th>MACD buy signals</th>
            <th>MACD sell signals</th>
          </tr>
        </table>
      </div>
      <div id="This_week" class="tabcontent">
        <table class="sortable">
          <tr>
            <H3>Market Overview - This week</H3>
            <th>Market</th>
            <th>MACD buy signals</th>
            <th>MACD sell signals</th>
          </tr>
        </table>
      </div>
    </div>
    <div id="OMXC25" class="tabcontent">
      <table class="sortable">
        <tr>
          <H3>OMXC25</H3>
          <th>Company</th>
          <th>Ticker</th>
          <th>Latest MACD Signal</th>
          <th>Date of signal</th>
        </tr>
      </table>
    </div>


    <script>
      //script for tabs in tables.
      function openCity(evt, cityName) {
        let i, tabcontent, tablinks;
        const targetTab = document.querySelector(`#${cityName}.tabcontent`);
        tabcontent = [...document.getElementsByClassName("tabcontent")].filter(el => el.parentElement === targetTab.parentElement);
        for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].hidden = true;
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
          tablinks[i].classList.remove("active");
        }
        targetTab.style.display = "block";
        evt.currentTarget.classList.add("active"); 
      }
    </script>

  </body>
</html>

Upvotes: 0

Views: 75

Answers (1)

Bourbia Brahim
Bourbia Brahim

Reputation: 14712

You have just a small mistake , when you are trying to hide tabecontents ,

instead of using hidden , use diplay property of style as follow :

.
  .
  for (i = 0; i < tabcontent.length; i++) {
     // instead of tabcontent[i].hidden = true;
     // use below :
     tabcontent[i].style.display = 'none';
  }
  ...

see snippet :

//script for tabs in tables.
function openCity(evt, cityName) {
  let i, tabcontent, tablinks;
  const targetTab = document.querySelector(`#${cityName}.tabcontent`);
  tabcontent = [...document.getElementsByClassName("tabcontent")].filter(el => el.parentElement === targetTab.parentElement);
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = 'none';
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].classList.remove("active");
  }
  targetTab.style.display = "block";
  evt.currentTarget.classList.add("active");
}
body {
  font-family: Arial;
}


/* Style the tab */

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons inside the tab */

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

  <h2>Tabs</h2>
  <p>Click on the buttons inside the tabbed menu:</p>


  <div class="tab">
    <button style="color:black;" class="tablinks" onclick="openCity(event, 'Markets_Today')">Markets Today</button>
    <button style="color:black;" class="tablinks" onclick="openCity(event, 'OMXC25')">OMXC25</button>
  </div>

  <div id="Markets_Today" class="tabcontent">
    <div class="tab">
      <button style="color:black;" class="tablinks" onclick="openCity(event, 'Today')">Today</button>
      <button style="color:black;" class="tablinks" onclick="openCity(event, 'This_week')">This week</button>
    </div>
    <div id="Today" class="tabcontent">
      <table class="sortable">
        <tr>
          <H3>Market Overview - Today</H3>
          <th>Market</th>
          <th>MACD buy signals</th>
          <th>MACD sell signals</th>
        </tr>
      </table>
    </div>
    <div id="This_week" class="tabcontent">
      <table class="sortable">
        <tr>
          <H3>Market Overview - This week</H3>
          <th>Market</th>
          <th>MACD buy signals</th>
          <th>MACD sell signals</th>
        </tr>
      </table>
    </div>
  </div>
  <div id="OMXC25" class="tabcontent">
    <table class="sortable">
      <tr>
        <H3>OMXC25</H3>
        <th>Company</th>
        <th>Ticker</th>
        <th>Latest MACD Signal</th>
        <th>Date of signal</th>
      </tr>
    </table>
  </div>




</body>

</html>

Upvotes: 1

Related Questions