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();

 <style> /* 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: };noncollapsecontent { padding: 0 10px; overflow: hidden; background-color: #f1f1f1; } </style>

 <div class="tab"> <button class="tablinks" onclick="openWine(event, 'Wine 1')" id="defaultOpen">Wine 1</button> <button class="tablinks" onclick="openWine(event, 'Wine 2')">Wine 2</button> <button class="tablinks" onclick="openWine(event, 'Wine 3')">Wine 3</button> <button class="tablinks" onclick="openWine(event, 'Wine 4')">Wine 4</button> </div> <div id="Wine 1" class="tabcontent"> <button type="button" class="collapsible">Wine 12</button> <div class="content"> <table class="wp-table"> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> <th>Col 4</th> </tr><tr><td>10060452000</td><td>2000</td><td>4800</td><td>14/4/2021</td></tr> <tr><td>10060452008</td><td>2008</td><td>2670</td><td>14/4/2021</td></tr> <tr><td>10060452009</td><td>2009</td><td>2348</td><td>13/4/2021</td></tr> <tr><td>10060452010</td><td>2010</td><td>3300</td><td>15/4/2021</td></tr> <tr><td>10060452011</td><td>2011</td><td>2590</td><td>14/4/2021</td></tr> <tr><td>10060452012</td><td>2012</td><td>3800</td><td>5/4/2021</td></tr> <tr><td>10060452013</td><td>2013</td><td>2300</td><td>15/4/2021</td></tr> <tr><td>10060452014</td><td>2014</td><td>2320</td><td>14/4/2021</td></tr> <tr><td>10060452015</td><td>2015</td><td>2550</td><td>14/4/2021</td></tr> <tr><td>10060452016</td><td>2016</td><td>2600</td><td>14/4/2021</td></tr> <tr><td>10060452017</td><td>2017</td><td>2760</td><td>12/4/2021</td></tr> <tr><td>10062051998</td><td>1998</td><td>5740</td><td>8/4/2021</td></tr> <tr><td>10062052000</td><td>2000</td><td>9450</td><td>15/4/2021</td></tr> <tr><td>10062052008</td><td>2008</td><td>4332</td><td>14/4/2021</td></tr></table> </div> <button type="button" class="collapsible">Wine 15</button> <div class="content"> <table class="wp-table"> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> <th>Col 4</th> </tr><tr><td>10062052009</td><td>2009</td><td>8500</td><td>14/4/2021</td></tr> <tr><td>10062052010</td><td>2010</td><td>9600</td><td>15/4/2021</td></tr> <tr><td>10062052011</td><td>2011</td><td>4200</td><td>15/4/2021</td></tr> <tr><td>10062052012</td><td>2012</td><td>4000</td><td>15/4/2021</td></tr> <tr><td>10062052013</td><td>2013</td><td>3840</td><td>12/4/2021</td></tr> <tr><td>10062052014</td><td>2014</td><td>4200</td><td>15/4/2021</td></tr> <tr><td>10062052015</td><td>2015</td><td>6280</td><td>12/4/2021</td></tr> <tr><td>10062052016</td><td>2016</td><td>7040</td><td>14/4/2021</td></tr> <tr><td>10062052017</td><td>2017</td><td>4800</td><td>15/4/2021</td></tr></table> </div> <button type="button" class="collapsible">Wine 20</button> <div class="content"> <table class="wp-table"> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> <th>Col 4</th> </tr><tr><td>10071012008</td><td>2008</td><td>900</td><td>13/4/2021</td></tr> <tr><td>10071012009</td><td>2009</td><td>950</td><td>14/4/2021</td></tr> <tr><td>10071012010</td><td>2010</td><td>950</td><td>15/4/2021</td></tr> <tr><td>10071012011</td><td>2011</td><td>810</td><td>5/4/2021</td></tr> <tr><td>10071012012</td><td>2012</td><td>908</td><td>6/4/2021</td></tr> <tr><td>10071012013</td><td>2013</td><td>866</td><td>13/4/2021</td></tr> <tr><td>10071012014</td><td>2014</td><td>840</td><td>13/4/2021</td></tr> <tr><td>10071012015</td><td>2015</td><td>850</td><td>14/4/2021</td></tr> <tr><td>10071012016</td><td>2016</td><td>800</td><td>15/4/2021</td></tr> <tr><td>10071012017</td><td>2017</td><td>760</td><td>15/4/2021</td></tr></table> </div> </div>

Answer 1

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

 <div class="tab"> <button class="tablinks" onclick="openWine(event, 'Wine 1')" id="defaultOpen">Wine 1</button> <button class="tablinks" onclick="openWine(event, 'Wine 2')">Wine 2</button> <button class="tablinks" onclick="openWine(event, 'Wine 3')">Wine 3</button> <button class="tablinks" onclick="openWine(event, 'Wine 4')">Wine 4</button> </div> <div id="Wine 1" class="tabcontent"> <button type="button" class="collapsible">Wine Name/button> <div class="content"> <table class="wp-table"> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> </tr><tr><td>10060452000</td><td>2000</td><td>4800</td><td>14/4/2021</td></tr> <tr><td>10060452008</td><td>2008</td><td>2670</td><td>14/4/2021</td></tr> <tr><td>10060452009</td><td>2009</td><td>2348</td><td>13/4/2021</td></tr> <tr><td>10060452010</td><td>2010</td><td>3300</td><td>15/4/2021</td></tr> <tr><td>10060452011</td><td>2011</td><td>2590</td><td>14/4/2021</td></tr> <tr><td>10060452012</td><td>2012</td><td>3800</td><td>5/4/2021</td></tr> <tr><td>10060452013</td><td>2013</td><td>2300</td><td>15/4/2021</td></tr> <tr><td>10060452014</td><td>2014</td><td>2320</td><td>14/4/2021</td></tr> <tr><td>10062052008</td><td>2008</td><td>4332</td><td>14/4/2021</td></tr> </table> </div>