Expand ALL and Collapse ALL Table Functionality

Question

I have created tabs for wine regions and collapsible tables to show individual wine data within the tabs using HTML, CSS and Javascript (thanks to W3 Schools). I am struggling with some functionality to be able to show or hide all wines within the collapsibles at once.

I want to be able to have two options for the collapsible tables: Expand All and Collapse All. This is beyond my expertise.

This is part of the code (Tabs and 1 collapsible table):

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

function openWine(evt, wineName) {
  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(wineName).style.display = "block";
  evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();


  
  
  
  




  



Col 1
Col 2
Col 3
Col 4
10060452000 2000 4800 14/4/2021
10060452008 2008 2670 14/4/2021
10060452009 2009 2348 13/4/2021
10060452010 2010 3300 15/4/2021
10060452011 2011 2590 14/4/2021
10060452012 2012 3800 5/4/2021
10060452013 2013 2300 15/4/2021
10060452014 2014 2320 14/4/2021
10060452015 2015 2550 14/4/2021
10060452016 2016 2600 14/4/2021
10060452017 2017 2760 12/4/2021
10062051998 1998 5740 8/4/2021
10062052000 2000 9450 15/4/2021
10062052008 2008 4332 14/4/2021 





Col 1
Col 2
Col 3
Col 4
10062052009 2009 8500 14/4/2021
10062052010 2010 9600 15/4/2021
10062052011 2011 4200 15/4/2021
10062052012 2012 4000 15/4/2021
10062052013 2013 3840 12/4/2021
10062052014 2014 4200 15/4/2021
10062052015 2015 6280 12/4/2021
10062052016 2016 7040 14/4/2021
10062052017 2017 4800 15/4/2021 





Col 1
Col 2
Col 3
Col 4
10071012008 2008 900 13/4/2021
10071012009 2009 950 14/4/2021
10071012010 2010 950 15/4/2021
10071012011 2011 810 5/4/2021
10071012012 2012 908 6/4/2021
10071012013 2013 866 13/4/2021
10071012014 2014 840 13/4/2021
10071012015 2015 850 14/4/2021
10071012016 2016 800 15/4/2021
10071012017 2017 760 15/4/2021

user_3607064 · Answer

If you add simply .active class, it will not display the content. You have write the CSS code for .active class. You have following code

.content {
  padding: 0 10px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

In the above code you are hiding the entire section using display:none, but you didn't reopen when you have the active class for the parent. So you have to add the following style

.collapsible.active .content {
   display:block;
}

The above style is checking whenever you have added the .active class for the parent (collapsible), the child content will enable.

I am just giving the styles for showing and hiding. Check all the remaining style problems.

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
function openWine(evt, wineName) {
  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(wineName).style.display = "block";
  evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

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

/* Style the buttons inside the tab */

@media screen and (max-width: 600px) {
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 12px 12px;
  transition: 0.3s;
  font-size: 12.6px;
  text-decoration: none;
 }
}
@media screen and (min-width: 768px) {
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 15px;
  text-decoration: none;
 }
}
/* Change background color of buttons on hover */
@media screen and (max-width: 600px) {
.tab button:hover {
  background-color: #ddd;
 }
}
@media screen and (min-width: 768px) {
.tab button:hover {
  background-color: #ddd;
 }
}
/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
   text-decoration: none;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-top: none;
   text-align: center;
  text-decoration: none;
}

.wp-table tr:nth-child(odd) {
    background-color: #fff;
}

.wp-table tr:nth-child(even) {
    background-color: #f1f1f1;
}

.wp-table tr {
    border-bottom: 1px solid #ddd;
}

.wp-table th:first-child, 
.wp-table td:first-child {
    padding-left: 12px;
}


.wp-table td, 
.wp-table th {
    padding: 4px 4px;
    display: table-cell;
    text-align: left;
    vertical-align: middle;
}
@media screen and (max-width: 600px) {
.wp-table th {
    font-weight: bold;
    font-size: 12.6px
 }
} 
@media screen and (min-width: 768px) {
.wp-table th {
    font-weight: bold;
    font-size: 16px
 }
} 
@media screen and (max-width: 600px) {
.wp-table {
    font-size: 12.6px!important;
    border: 1px solid #ccc;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    display: table;
 }
}
@media screen and (min-width: 768px) {
.wp-table {
    font-size: 15px!important;
    border: 1px solid #ccc;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    display: table;
 }
}

@media screen and (max-width: 600px) {
.collapsible {
  background-color: #777;
  color: white;
  padding: 12px;
  margin-top:1px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 12.6px;
 }
}
@media screen and (min-width: 768px) {
.collapsible {
  background-color: #777;
  color: white;
  padding: 14px;
  margin-top:1px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
 }
}
.active, .collapsible:hover {
  background-color: #555;
  text-decoration: underline;
}
.collapsible:after {
  content: '+';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active.collapsible:after {
  content: "-";
}

@media screen and (max-width: 600px) {
.noncollapsible {
  background-color: #777;
  color: white;
  padding: 12px;
  margin-top:1px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 12.6px;
 }
}
@media screen and (min-width: 768px) {
.noncollapsible {
  background-color: #777;
  color: white;
  padding: 14px;
  margin-top:1px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
 }
}
.content {
  padding: 0 10px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
.collapsible.active .content {
  display:block;
}
.noncollapsecontent {
  padding: 0 10px;
  overflow: hidden;
  background-color: #f1f1f1;
}

Expand ALL and Collapse ALL Table Functionality

1 Answers