<!--
Forum question answer only:
https://www.sitepoint.com/community/t/table-navigation-section-discussion/463137/3
-->
<div class="table-selection">
<section id="tablenav">
<h3 class="click-info">Click to show a table</h3>
<div id="tablenavwideandnarrow">
<button class="active btn" data-destination="#privateBanking">Private Banking</button>
<button class="btn" data-destination="#showSovereignty">Sovereignty</button>
<button class="btn" data-destination="#discharge">Debt Discharge</button>
<button class="btn" data-destination="#defense">Civil & Criminal Defense</button>
<button class="btn" data-destination="#forms">Forms</button>
<button class="btn" data-destination="#adminProcesses">Administrative Processes</button>
<button class="btn" data-destination="#notaryPresentments">Notary Presentments</button>
<hr class="divider">
<button class="btn expand hide-all" data-toggle="hideTables">Hide All Tables</button>
<button class="btn expand show-all" data-toggle="expandTables">Show Me Everything!</button>
<table class="sectionActive tab" id="privateBanking">
<thead>
<tr>
<th colspan="3">Private Banking</th>
</tr>
<tr>
<th>Document Name</th>
<th><span>Date<br>Modified</span><span>Date</span></th>
<th><span>Download<br>Document </span><span>Download</span></th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Document Name">Power of Attorney in Fact</td>
<td data-th="Date Modified">4 ⁄ 1 ⁄<br>2024</td>
<td data-th="Download Document">
<a href="templates/POWEROFATTORNEYtemplate.docx">Download It!</a>
<a href="templates/POWEROFATTORNEYtemplate.docx">Download</a>
</td>
</tr>
</tbody>
</table>
<table class="tab" id="showSovereignty">
<thead>
<tr>
<th colspan="3">Sovereignty</th>
</tr>
<tr>
<th>Document Name</th>
<th><span>Date<br>Modified</span><span>Date</span></th>
<th><span>Download<br>Document</span><span>Download</span></th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Document Name">Power of Attorney in Fact</td>
<td data-th="Date Modified">4 ⁄ 1 ⁄<br>2024</td>
<td data-th="Download Document">
<a href="templates/POWEROFATTORNEYtemplate.docx">Download It!</a>
<a href="templates/POWEROFATTORNEYtemplate.docx">Download</a>
</td>
</tr>
</tbody>
</table>
<table class="tab" id="discharge">
<thead>
<tr>
<th colspan="3">Debt Discharge</th>
</tr>
<tr>
<th>Document Name</th>
<th><span>Date<br>Modified</span><span>Date</span></th>
<th><span>Download<br>Document </span><span>Download</span></th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Document Name">Acceptance for Value</td>
<td data-th="Date Modified">6 ⁄ 15 ⁄<br>2021</td>
<td data-th="Download Document">
<a href="templates/a4vTEMPLATE.pdf" target="new">Download It!</a>
<a href="templates/a4vTEMPLATE.pdf" target="new">Download</a>
</td>
</tr>
</tbody>
</table>
<table class="tab" id="defense">
<thead>
<tr>
<th colspan="3">Civil & Criminal Defense</th>
</tr>
<tr>
<th>Document Name</th>
<th><span>Date<br>Modified</span><span>Date</span></th>
<th><span>Download<br>Document </span><span>Download</span></th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Document Name">Power of Attorney in Fact</td>
<td data-th="Date Modified">6 ⁄ 30 ⁄<br>2022</td>
<td data-th="Download Document">
<a href="templates/POWEROFATTORNEYtemplate.docx">Download It!</a>
<a href="templates/POWEROFATTORNEYtemplate.docx">Download</a>
</td>
</tr>
<tr>
<td data-th="Document Name">Affidavit of Status</td>
<td data-th="Date Modified">10 ⁄ 27 ⁄<br>2024</td>
<td data-th="Download Document">
<a href="templates/AFFIDAVITOFSTATUStemplate.doc">Download It!</a>
<a href="templates/AFFIDAVITOFSTATUStemplate.doc">Download</a>
</td>
</tr>
</tbody>
</table>
<table class="tab" id="forms">
<thead>
<tr>
<th colspan="3">Forms</th>
</tr>
<tr>
<th>Document Name</th>
<th><span>Date<br>Modified</span><span>Date</span></th>
<th><span>Download<br>Document </span><span>Download</span></th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Document Name">G.S.A. Bid Bond – Standard Form 24</td>
<td data-th="Date Modified">11 ⁄ 10 ⁄<br>2023</td>
<td data-th="Download Document">
<a href="templates/bidbondTEMPLATE.pdf" target="new">Download It!</a>
<a href="templates/bidbondTEMPLATE.pdf" target="new">Download</a>
</td>
</tr>
<tr>
<td data-th="Document Name">G.S.A. Performance Bond – Standard Form 25</td>
<td data-th="Date Modified">11 ⁄ 10 ⁄<br>2023</td>
<td data-th="Download Document">
<a href="templates/performancebondTEMPLATE.pdf" target="new">Download It!</a>
<a href="templates/performancebondTEMPLATE.pdf" target="new">Download</a>
</td>
</tr>
</tbody>
</table>
<table class="tab" id="adminProcesses">
<thead>
<tr>
<th colspan="3">Administrative Processes</th>
</tr>
<tr>
<th>Document Name</th>
<th><span>Date<br>Modified</span><span>Date</span></th>
<th><span>Download<br>Document </span><span>Download</span></th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Document Name=">Certificate of Service</td>
<td data-th="Date Modified">11 ⁄ 16 ⁄<br>2023</td>
<td data-th="Download Document">
<a href="templates/CERTIFICATEOFSERVICEtemplate.docx">Download It!</a>
<a href="templates/CERTIFICATEOFSERVICEtemplate.docx">Download</a>
</td>
</tr>
<tr>
<td data-th="Document Name">Certificate of Service (2)</td>
<td data-th="Date Modified">11 ⁄ 16 ⁄<br>2023</td>
<td data-th="Download Document">
<a href="templates/CERTIFICATEOFSERVICEtemplate2.doc">Download It!</a>
<a href="templates/CERTIFICATEOFSERVICEtemplate2.doc">Download</a>
</td>
</tr>
</tbody>
</table>
<table class="tab" id="notaryPresentments">
<thead>
<tr>
<th colspan="3">Notary Presentments</th>
</tr>
<tr>
<th>Document Name</th>
<th><span>Date<br>Modified</span><span>Date</span></th>
<th><span>Download<br>Document </span><span>Download</span></th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Document Name">Notary Certificate of Mailing</td>
<td data-th="Date Modified">3 ⁄ 4 ⁄<br>2024</td>
<td data-th="Download Document">
<a href="templates/notarycertificateofmailingTEMPLATE.doc">Download It!</a>
<a href="templates/notarycertificateofmailingTEMPLATE.doc">Download</a>
</td>
</tr>
<tr>
<td data-th="Document Name">Notice of Default in Dishonor</td>
<td data-th="Date Modified">2 ⁄ 5 ⁄<br>2024</td>
<td data-th="Download Document">
<a href="templates/defaultindishonorTEMPLATE.docx">Download It!</a>
<a href="templates/defaultindishonorTEMPLATE.docx">Download</a>
</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
<!-- end table selection -->.table-selection {
max-width: 1280px;
margin: auto;
}
.table-selection table {
width: 100%;
border-collapse: collapse;
margin: 2rem 0;
}
.table-selection table td,
.table-selection table th {
border: 1px solid #000;
padding: 0.5rem;
}
#tablenav {
width: 100%;
text-align: center;
}
#tablenav button {
-webkit-appearance: none;
appearance: none;
display: block;
margin: 0;
flex: 0 0 260px;
font-size: 1em;
text-decoration: none;
color: #fff;
font-weight: bold;
padding: 5px 0;
border: 6px ridge #aa6420;
background: linear-gradient(to bottom, #d99028 0%, #ca6c2b 100%);
letter-spacing: 1px;
cursor: pointer;
}
#tablenav button:hover {
color: #ff6;
}
#tablenavwideandnarrow {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
.divider {
width: 100%;
opacity: 0;
margin: 1rem 0;
}
#tablenavwideandnarrow .expand {
font-size: 1.2em;
padding: 5px 1.1rem;
flex: 0 0 320px;
transition: 1s;
margin: 0 2rem;
}
#tablenavwideandnarrow .hide-all {
background: linear-gradient(to bottom, #d62a2a 0%, #ce7b73 100%);
}
#tablenavwideandnarrow .hide-all:hover {
background: linear-gradient(to bottom, #ce7b73 0%, #d62a2a 100%);
}
#tablenavwideandnarrow .show-all {
background: linear-gradient(to bottom, #64a020 0%, #8bbc67 100%);
}
#tablenavwideandnarrow .show-all:hover {
background: linear-gradient(to bottom, #8bbc67 0%, #64a020 100%);
}
@media screen and (max-width: 400px) {
#tablenavwideandnarrow .expand {
font-size: 1.1em;
padding: 5px 5rem;
flex: 0 0 280px;
}
}
/* hide and show tables only if js is present */
#tablenav .btn,
#tablenav h3.click-info {
display: none;
}
.hasJs #tablenav .btn,
.hasJs #tablenav h3.click-info {
display: block;
}
.hasJs .tab {
display: none;
}
.hasJs .sectionActive {
display: table;
}
#tablenavwideandnarrow button.active {
background: darkred;
cursor: default;
}
#tablenavwideandnarrow button.expand.active {
background: black;
cursor: default;
box-shadow: 0 0 4px 7px rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 568px) {
#tablenavwideandnarrow button:nth-child(1) {
order: 1;
}
#tablenavwideandnarrow button:nth-child(2) {
order: 3;
}
#tablenavwideandnarrow button:nth-child(3) {
order: 5;
}
#tablenavwideandnarrow button:nth-child(4) {
order: 7;
}
#tablenavwideandnarrow button:nth-child(5) {
order: 9;
}
#tablenavwideandnarrow button:nth-child(6) {
order: 11;
}
#tablenavwideandnarrow button:nth-child(7) {
order: 13;
}
#tablenavwideandnarrow hr {
order: 15;
}
#tablenavwideandnarrow table:nth-of-type(1) {
order: 2;
}
#tablenavwideandnarrow table:nth-of-type(2) {
order: 4;
}
#tablenavwideandnarrow table:nth-of-type(3) {
order: 6;
}
#tablenavwideandnarrow table:nth-of-type(4) {
order: 8;
}
#tablenavwideandnarrow table:nth-of-type(5) {
order: 10;
}
#tablenavwideandnarrow table:nth-of-type(6) {
order: 12;
}
#tablenavwideandnarrow table:nth-of-type(7) {
order: 14;
}
#tablenavwideandnarrow .show-all {
order: 16;
}
#tablenavwideandnarrow .hide-all {
order: 17;
}
}
//put this first piece of code in script tags high in the head of each page before other scripts to avoid flash of content
document.querySelector("html").classList.add("hasJs");
/* This following script should go in script tags at the end of the html before the closing body tag*/
(function () {
const items = document.querySelectorAll("[data-destination]");
const sections = document.querySelectorAll(".tab");
const showAll = document.querySelector(".show-all");
const hideAll = document.querySelector(".hide-all");
items.forEach((item, index) => {
item.addEventListener("click", (event) => {
event.preventDefault();
var activeTab = item.dataset.destination;
removeActiveClass();
removeSectionClass();
document.querySelector(activeTab).classList.add("sectionActive");
item.classList.add("active");
showAll.classList.remove("active");
hideAll.classList.remove("active");
});
});
function removeActiveClass() {
items.forEach((item, index) => {
item.classList.remove("active");
});
}
function removeSectionClass() {
sections.forEach((section, index) => {
section.classList.remove("sectionActive");
});
}
showAll.addEventListener("click", (event) => {
event.preventDefault();
showAll.classList.add("active");
hideAll.classList.remove("active");
items.forEach((item, index) => {
item.classList.add("active");
});
sections.forEach((section, index) => {
section.classList.add("sectionActive");
});
});
hideAll.addEventListener("click", (event) => {
event.preventDefault();
showAll.classList.remove("active");
hideAll.classList.add("active");
items.forEach((item, index) => {
item.classList.remove("active");
});
sections.forEach((section, index) => {
section.classList.remove("sectionActive");
});
});
})();
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.