How to un-toggle tabs-CodePudding

I'm using the w3schools how-to on tabs. (https://www.w3schools.com/howto/howto_js_tabs.asp) I noticed that their example does not allow for tabs to be untoggled and hide the text when pressed again. Can someone briefly explain how I would be able to integrate that into my code if I'm following theirs? Thanks.

<!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 >
  <button  onclick="openCity(event, 'London')">London</button>
  <button  onclick="openCity(event, 'Paris')">Paris</button>
  <button  onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" >
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" >
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" >
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  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].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className  = " active";
}
</script>
   
</body>
</html>

CodePudding user response：

Not sure if I understand correctly, but what you describe is not the "expected" behaviour of a tabbed interface. Why would you want content to be hidden? In a tabbed interface (think navigation), there is usually always one tab active, showing it's content, so clicking the active tab should simply do nothing and not hide the content (at least in conventional tabbed interfaces). Maybe you are looking more for an accordion-like behaviour?

In other words, the behaviour of the (notoriously crappy) example from W3Schools is not how a tabbed interface is supposed to work, when initialized, no content is shown, the user needs to click a tab first to see something, that's not good UX... the first tab should already be active!

But if you really want to go for this behaviour, it could be done like this:

function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  if ( evt.currentTarget.classList.contains('active') ) {
    document.getElementById(cityName).style.display = "none";
    evt.currentTarget.classList.remove('active');
  } else {
    // Get all elements with  and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i  ) {
      tabcontent[i].style.display = "none";
    }

    // Get all elements with  and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i  ) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className  = " active";
  }
}

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

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* 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;
}

<!-- Tab links -->
<div >
  <button  onclick="openCity(event, 'London')">London</button>
  <button  onclick="openCity(event, 'Paris')">Paris</button>
  <button  onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<!-- Tab content -->
<div id="London" >
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" >
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" >
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

CodePudding user response：

There are different approaches that you could take. You could use if else statements to check whether an element in the for loops contains a specific CSS style or class name so in this case active. Then you may disable it by changing its style through JS when the condition is met.