Table Navigation Section Discussion

[etidd]

Hey everybody,

What an exciting day it is to be able to post to the Sitepoint community.

I’m here to continue our interactions regarding my popular legal templates page.

There is a lot of progress that I’ve made with the page even though I am still targeting font sizes for the responsive design.

The #tablenav section definitely breaks the layout, and I’ve added in a seventh table (There may be a couple more tables to be added.).
I tried switching the anchor elements / links to buttons. It actually negatively affected the elements’ displays (They look “wonky” with inconsistent widths & heights again.).

Here’s what I see at full width:

Goal # 1:
I want the button layout to respect its boundaries. For starters, they are way too big and look even more disproportionate than before we made a few edits in our previous thread with inconsistent sizes:

…and as the page becomes more narrow…

This page kinda displays the concept, but I want the each of the table link “buttons” to mimic this behavior seen here:

Isotope · Layout modes

(Select the “Packery” layout mode on that page.)

It should be okay to rely on JS if necessary to alter the div structure because I want the general formation to look like this:
(widest width)
x–x–x–x
–x–x–x-
—o–o—

Goal # 2:
When the display on #tablenav switches to inline-block (see templatesection.css, beginning at line 459), I want the bottom 2 links / buttons within the #expandhide div to have 90% width. Likewise, I will take time to create proper margins between the links / buttons.

Goal # 3:
The buttons are a bit large, especially in #expandhide. I’ll make them smaller.

Goal # 4:
Hide #tablenav when JavaScript is disabled. I don’t know how this is detected, but I believe it will be easy to find out how to implement this. The #tablenav section will be entirely dependent upon JS.

Even if it works with these nested divs, I don’t know if this is the optimal markup structure for #tablenav:

		<section id="tablenav">
			<h3>Click to show a table: (under construction)</h3>
			<div>
            	<div>
					<button onclick="showPrivateBanking()">Private Banking</button>
                </div>
                <div>
                	<button onclick="showSovereignty()">Sovereignty</button>
                </div>
                <div>
					<button onclick="showA4V()">Debt Discharge</button>
                </div>
                <div>
					<button onclick="showDefense()">Civil &amp; Criminal Defense</button>
                </div>
			</div>
			<div>
            	<div>
					<button onclick="showForms()">Forms</button>
                </div>
                <div>
					<button onclick="showAdminProcesses()">Administrative Processes</button>
                </div>
                <div>
					<button onclick="showNotaryPresentments()">Notary Presentments</button>
                </div>
			</div>
			<div id="expandhide">
				<button onclick="hideTables()">Hide All Tables</button>
				<button onclick="expandTables()">Show Me Everything!</button>
			</div>
		</section> <!-- END OF TABLE NAVIGATION SECTION -->

Thanks all for any responses received.

-ty

[Martyr2]

Ok first of all you don’t need any kind of JS to do formatting of this. So let’s get that out of the way.

What I think may be of extreme use to you and pretty much solve all your issues is using CSS Grid. Think of grid system where you can tell each element you place in the grid what cells it occupies (much like colspan or rowspan). It will allow you to create exactly the format you are looking for and a million others. Plus it can be responsive and your elements can flex to the grid.

In other cases you can even use CSS media queries to adjust the grid and elements in it. But CSS grid (and also a technology called flexbox) can do this type of formatting. I think grid is probably your best bet here. So try that.

[etidd]

Thanks, Martyr2!

All right, so I decided to stay the course with this route of nested div grid and changing styles in the media queries.

I changed the markup structure to include a different structure for a switcheroo as the tables get squeezed:

		<section id="tablenav">
			<h3>Click to show a table: (under construction)</h3>
            <div id="tablenavwideandnarrow">
                <div>
                    <div>
                        <button onclick="showPrivateBanking()">Private Banking</button>
                    </div>
                    <div>
                        <button onclick="showSovereignty()">Sovereignty</button>
                    </div>
                    <div>
                        <button onclick="showA4V()">Debt Discharge</button>
                    </div>
                    <div>
                        <button onclick="showDefense()">Civil &amp; Criminal Defense</button>
                    </div>
                </div>
                <div>
                    <div>
                        <button onclick="showForms()">Forms</button>
                    </div>
                    <div>
                        <button onclick="showAdminProcesses()">Administrative Processes</button>
                    </div>
                    <div>
                        <button onclick="showNotaryPresentments()">Notary Presentments</button>
                    </div>
                </div>
            </div>
            <div id="tablenavmedium">
            	<div>
            		<div>
                		<button onclick="showPrivateBanking()">Private Banking</button>
                	</div>
                	<div>
                		<button onclick="showSovereignty()">Sovereignty</button>
                	</div>
                </div>
                <div>
                    <div>
                    	<button onclick="showA4V()">Debt Discharge</button>
                    </div>
                	<div>
                    	<button onclick="showDefense()">Civil &amp; Criminal Defense</button>
                    </div>
                </div>
                <div>
                    <div>
                    	<button onclick="showForms()">Forms</button>
                    </div>
                    <div>
                    	<button onclick="showAdminProcesses()">Administrative Processes</button>
                    </div>
                </div>
                <div>
                    <div>
                    	<button onclick="showNotaryPresentments()">Notary Presentments</button>
                    </div>
                </div>
            </div>

The use of inline-block display will be the ingredient in the flex display at higher widths, then alternating to block display for the narrow widths.

I’m not certain if the 3rd layer of nested divs is necessary to preserve the space in between the buttons or if I can eliminate one layer of nested divs.

I made the buttons a bit smaller. Will update the hover state color as it still appears too subtle to me with decent eyes.

Getting there step by step…

-ty

[PaulOB]

@etidd

I changed the markup structure to include a different structure for a switcheroo as the tables get squeezed:

That is actually a maintenance nightmare and not an approach I would consider and is completely unnecessary these days anyway as you can do all that with css alone. Especially as I already solved this for you in your other thread for all widths and devices with a few simple styles.

At present your page is broken in all resolutions from about 1080px and smaller and pushes out of the container.

Here are some over-rides that will get the display looking better on all resolutions but you have made it hard by adding nested divs without classes on the appropriate parents.

#tablenav #tablenavwideandnarrow > div {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

#tablenav #tablenavwideandnarrow > div > div {
  width: auto;
  flex: 0 0 260px;
  display: flex;
  flex-wrap: wrap;
}

#tablenav #tablenavwideandnarrow > div > div button {
  width: 100%;
  white-space: normal;
  flex: 1 0 0;
}
#tablenav #expandhide button {
  margin: 0.5rem;
}

@media screen and (max-width: 1286px) {
  #tablenav #tablenavwideandnarrow > div > div {
    margin-left: 5%;
    margin-right: 5%;
  }
}
@media screen and (max-width: 30em) {
  #tablenav #tablenavwideandnarrow > div > div button {
    width: auto;
    white-space: normal;
    flex: 1 0 100%;
    font-size: 0.9em;
  }
  #tablenav #tablenavwideandnarrow > div {
    gap: 0rem;
  }
  #tablenav #tablenavwideandnarrow > div > div {
    flex: 0 0 220px;
  }
  #tablenav #expandhide button {
    width: 220px;
    height: auto;
    font-size: 1em;
  }
  #statuscorrection {
    table-layout: fixed;
  }
  #statuscorrection td {
    width: 33%;
  }
  #statuscorrection td:first-child {
    word-wrap: break-word;
  }
}

That will give a display like this on small screen.

Then like this on medium screens:

(Ignore that blue css edit box as that is showing code changes from one of your previous threads).

Finally like this on wide screens:

However because of all the over-rides and the poor structure and classes in that section you may be better off pulling all that code out and starting again with a clean slate.

e.g.

The html could just be this:

<section id="tablenav">
  <h3>Click to show a table: (under construction)</h3>
  <div id="tablenavwideandnarrow">
    <button onclick="showPrivateBanking()">Private Banking</button>
    <button onclick="showSovereignty()">Sovereignty</button>
    <button onclick="showA4V()">Debt Discharge</button>
    <button onclick="showDefense()">Civil &amp; Criminal Defense</button>
    <button onclick="showForms()">Forms</button>
    <button onclick="showAdminProcesses()">Administrative Processes</button>
    <button onclick="showNotaryPresentments()">Notary Presentments</button>
  </div>
  <div id="expandhide">
    <button onclick="hideTables()">Hide All Tables</button>
    <button onclick="expandTables()">Show Me Everything!</button>
  </div>
</section>

Then the css would be more straight forward and about 90% less code.

Here’s an example of just the buttons that will on all screens down to 320px.

As you can see the html and css is greatly simplified ad will be easier to manage for the finer adjustments needed.

[etidd]

Hey, Paul.

This is definitely how it should function, and this is my first implementation of a flex grid like this. I think this would be a suitable design if I added in an 8th or 9th document table for credit repair or something.

You might have already addressed this in the other thread. Pardon my misunderstanding. I’m happy that I properly imported these new styles while purging all of the old ones.

So, as I’m studying here, I see that the third value in the flex property is for flex-basis which you have employed for the width of the buttons. Flex-grow (the first value) could be changed for the change in the media queries at 400 pixels so that the buttons could have a percentage value that makes them occupy a greater width. I will begin to experiment with that (with #tablenavbuttons being slightly slimmer than #expandhide).

Uncertainties:

1. Don’t know why block display is applied to the buttons.
2. -webkit-appearance must be to accommodate Safari to clear out any presets.

I have made several additions already.
I used cursor:pointer to get the pointer state like link elements have on the hover state by default.
I made several artistic changes with box shadows and text shadows.
The second #expandhide button has a light green shadow on by default for the idea I have for the user to click that button on page load to show the tables. I’m thinking ahead for what the CSS will look like when the JS functions are written in accordance with my vision.

I am having difficulties altering the gaps and margins.
For the 2 #expandhide buttons, I want two things:
3. gap to be wider than 1 rem (slightly larger than #tablenavbuttons), at least on big devices. I want a little more vertical space between them, too, when they stack on top of each other
4. the margin between #tablenavbuttons and #expandhide to be greater than 2 rem on small devices (slightly more than what it is now)

This might be one of those collapsing margin moments where I get really confused, but I haven’t yet figured out how to adjust the grid. Changing the existing values doesn’t make it budge.

Being able to manipulate the space between the buttons will be important. When the buttons are clicked in the future, it’s in my mind to have text that appears that says “Please scroll down.”. At narrow widths, the user might not know anything happened without seeing a visual change after the button click.

Current markup:

		<section id="tablenav">
			<h3>Click to show a table: (under construction)</h3>
            <div id="tablenavbuttons">
				<button onclick="showPrivateBanking()">Private Banking</button>
                <button onclick="showSovereignty()">Sovereignty</button>
                <button onclick="showA4V()">Debt Discharge</button>
                <button onclick="showDefense()">Civil &amp; Criminal Defense</button>
                <button onclick="showForms()">Forms</button>
                <button onclick="showAdminProcesses()">Administrative Processes</button>
                <button onclick="showNotaryPresentments()">Notary Presentments</button>
            </div>
			<div id="expandhide">
				<button onclick="hideTables()">Hide All Tables</button>
				<button onclick="expandTables()">Show Me Everything!</button>
			</div>
		</section> <!-- END OF TABLE NAVIGATION SECTION -->

CSS:

/*** TABLE NAVIGATION SECTION ***/
#tablenav {
	border:3px pink solid;
	max-width: 1280px;
  	margin: auto;
	text-align: center;
}
#tablenav h3 { margin-top:3px; }

#tablenav button {
	-webkit-appearance:none;    /* this must be studied and expounded upon */
	appearance:none;
	display:block;
	margin:0;
	flex:0 0 260px;
	font-size:1em;
	font-weight:bold;
	letter-spacing:1px;
	text-decoration:none;
	color:#fff;
	padding:5px 0;
	border:6px ridge #aa6420;
  	/* gradient */
	background:#d99028; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q5OTAyOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYTZjMmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background:-moz-linear-gradient(top,  #d99028 0%, #ca6c2b 100%); /* FF3.6-15 */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d99028), color-stop(100%,#ca6c2b)); /* Chrome4-9,Safari4-5 */
	background:-webkit-linear-gradient(top,  #d99028 0%,#ca6c2b 100%); /* Chrome10-25,Safari5.1-6 */
	background:-o-linear-gradient(top,  #d99028 0%,#ca6c2b 100%); /* Opera 11.10-11.50 */
	background:-ms-linear-gradient(top,  #d99028 0%,#ca6c2b 100%); /* IE10 preview */
	background:linear-gradient(to bottom,  #d99028 0%,#ca6c2b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d99028', endColorstr='#ca6c2b',GradientType=0 ); /* IE6-8 */
}
#tablenav button:hover, #tablenav button:focus {
	color:yellow;
	background:#d14b2e; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QxNGIyZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkOTkwMjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background:-moz-linear-gradient(top,  #d14b2e 0%, #d99028 100%); /* FF3.6-15 */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d14b2e), color-stop(100%,#d99028)); /* Chrome4-9,Safari4-5 */
	background:-webkit-linear-gradient(top,  #d14b2e 0%,#d99028 100%); /* Chrome10-25,Safari5.1-6 */
	background:-o-linear-gradient(top,  #d14b2e 0%,#d99028 100%); /* Opera 11.10-11.50 */
	background:-ms-linear-gradient(top,  #d14b2e 0%,#d99028 100%); /* IE10 preview */
	background:linear-gradient(to bottom,  #d14b2e 0%,#d99028 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#d14b2e', endColorstr='#d99028',GradientType=0 ); /* IE6-8 */
}
#tablenavbuttons button:hover, #tablenavbuttons button:focus { text-shadow:2px 1px 1px #F60; }
#tablenavbuttons, #expandhide {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:1rem;
}
/*#tablenavbuttons { gap:1rem; }*/
#expandhide { margin:2.3rem 0 1.25rem; }
#expandhide button {
	font-size:1.2em;
	padding:5px 2.6rem;
	flex:0 0 320px;
}
#tablenav button:hover, #tablenav button:focus {
	cursor:pointer;
}
#tablenavbuttons button:hover, #tablenavbuttons button:focus {
	box-shadow:0 2px 24px #FC3;	
}
/* gradient */
#expandhide button:first-of-type { /* the "hide all tables" button */
	background:#d62a2a; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q2MmEyYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjZTdiNzMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background:-moz-linear-gradient(top,  #d62a2a 0%, #ce7b73 100%); /* FF3.6-15 */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d62a2a), color-stop(100%,#ce7b73)); /* Chrome4-9,Safari4-5 */
	background:-webkit-linear-gradient(top,  #d62a2a 0%,#ce7b73 100%); /* Chrome10-25,Safari5.1-6 */
	background:-o-linear-gradient(top,  #d62a2a 0%,#ce7b73 100%); /* Opera 11.10-11.50 */
	background:-ms-linear-gradient(top,  #d62a2a 0%,#ce7b73 100%); /* IE10 preview */
	background:linear-gradient(to bottom,  #d62a2a 0%,#ce7b73 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#d62a2a', endColorstr='#ce7b73',GradientType=0 ); /* IE6-8 */
}
#expandhide button:hover, #expandhide button:focus {
	text-shadow:2px 1px 1px #ca0404;
	box-shadow:0 2px 27px #ce7b73;
	/* gradient */
	background:#ce7b73; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NlN2I3MyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNjJhMmEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background:-moz-linear-gradient(top,  #ce7b73 0%, #d62a2a 100%); /* FF3.6-15 */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ce7b73), color-stop(100%,#d62a2a)); /* Chrome4-9,Safari4-5 */
	background:-webkit-linear-gradient(top,  #ce7b73 0%,#d62a2a 100%); /* Chrome10-25,Safari5.1-6 */
	background:-o-linear-gradient(top,  #ce7b73 0%,#d62a2a 100%); /* Opera 11.10-11.50 */
	background:-ms-linear-gradient(top,  #ce7b73 0%,#d62a2a 100%); /* IE10 preview */
	background:linear-gradient(to bottom,  #ce7b73 0%,#d62a2a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce7b73', endColorstr='#d62a2a',GradientType=0 ); /* IE6-8 */
}
#expandhide button + button { /* the "show me everything" button */
	/* gradient */
	background:#64a020;
	box-shadow:0 2px 27px #0BFD78;
	background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY0YTAyMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4YmJjNjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background:-moz-linear-gradient(top,  #64a020 0%, #8bbc67 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#64a020), color-stop(100%,#8bbc67));
	background:-webkit-linear-gradient(top,  #64a020 0%,#8bbc67 100%);
	background:-o-linear-gradient(top,  #64a020 0%,#8bbc67 100%);
	background:-ms-linear-gradient(top,  #64a020 0%,#8bbc67 100%);
	background:linear-gradient(to bottom,  #64a020 0%,#8bbc67 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#64a020', endColorstr='#8bbc67',GradientType=0 );
}
#expandhide button + button:hover, #expandhide button + button:focus {
	text-shadow:2px 1px 1px #3C0;
	box-shadow:0 2px 27px #20B00B;
	/* gradient */
	background:#8bbc67;
	background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhiYmM2NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2NGEwMjAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background:-moz-linear-gradient(top,  #8bbc67 0%, #64a020 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#8bbc67), color-stop(100%,#64a020));
	background:-webkit-linear-gradient(top,  #8bbc67 0%,#64a020 100%);
	background:-o-linear-gradient(top,  #8bbc67 0%,#64a020 100%);
	background:-ms-linear-gradient(top,  #8bbc67 0%,#64a020 100%);
	background:linear-gradient(to bottom,  #8bbc67 0%,#64a020 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8bbc67', endColorstr='#64a020',GradientType=0 );
}
/* end of table navigation section */

@media screen and (max-width: 400px) {
	#expandhide { margin-top:3.4rem; } /* not working to add space between #tablenavbuttons and #expandhide */
	#expandhide button {
    	font-size:1.1em;
    	padding:5px 5rem;
    	flex:0 0 280px;
		margin-top:3.4rem;
	}
}

Thanks!

-ty

[PaulOB]

@etidd

Don’t know why block display is applied to the buttons.

That was in case the parent is reset to a display: block rather than a flex and then the buttons will be block elements if they are not flex-items. Buttons are inline-block by default which will give uncontrollable whitespace around them.

@etidd

-webkit-appearance must be to accommodate Safari to clear out any presets.

Yes Safari/ios was still using that prefix a while ago but could be removed now. As an aside all the prefix rules you have re-added to your button styling should be thrown away as they have not been needed for 10 years or more and indeed you should not encourage users to use browsers that the vendor no longer supports. That’s how nearly all the ransomeware attacks gain entry to peoples systems when they use browses that the vendor no longer updates.

All this is nonsense and indeed could break something in the future.

#expandhide button + button:hover, #expandhide button + button:focus {
	text-shadow:2px 1px 1px #3C0;
	box-shadow:0 2px 27px #20B00B;
	/* gradient */
	background:#8bbc67;
	background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhiYmM2NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2NGEwMjAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background:-moz-linear-gradient(top,  #8bbc67 0%, #64a020 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#8bbc67), color-stop(100%,#64a020));
	background:-webkit-linear-gradient(top,  #8bbc67 0%,#64a020 100%);
	background:-o-linear-gradient(top,  #8bbc67 0%,#64a020 100%);
	background:-ms-linear-gradient(top,  #8bbc67 0%,#64a020 100%);
	background:linear-gradient(to bottom,  #8bbc67 0%,#64a020 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8bbc67', endColorstr='#64a020',GradientType=0 );
}

It should be just this:

#expandhide button + button:hover, #expandhide button + button:focus {
	text-shadow:2px 1px 1px #3C0;
	box-shadow:0 2px 27px #20B00B;
	/* gradient */
	background:linear-gradient(to bottom,  #8bbc67 0%,#64a020 100%);
}

@etidd

For the 2 #expandhide buttons, I want two things:
3. gap to be wider than 1 rem (slightly larger than #tablenavbuttons), at least on big devices. I want a little more vertical space between them, too, when they stack on top of each other

Just change the gap property accordingly.

e.g.

#expandhide {
  gap:3rem 4rem;/* horizontal / vertical */
}

note that the gap is the space between the elements as they wrap. If you wanted a greater gap above the first button then that would be a margin instead.

#expandhide {
  gap:3rem 4rem;
margin-top:3rem;
}

@etidd

4. the margin between #tablenavbuttons and #expandhide to be greater than 2 rem on small devices (slightly more than what it is now)

I think I just answered that above and use the margin property as required.

@etidd

When the buttons are clicked in the future, it’s in my mind to have text that appears that says “Please scroll down.”

Why do you need to say that?

If clicking a button opens a hidden panel or something then scroll the user directly to that item. Don’t make them click a button to open something and then click another button to see the thing that they just clicked a button to see!

Be careful with the width of the buttons as you have to make sure there is room for that width and for it not to overflow. In your original your content was overflowing your widths all the time. For example if you add more text into one of those buttons then the width you set will be too small. (It would be better to have no widths at all and let the content dictate the width of the button in my opinion.)

So to recap:
The gap property dictates the gap for gutters between the columns and the button rows. It doesn’t apply outside those buttons as a group. You would use vertical margins on #expandhide to move it way from the buttons in the div above.

[etidd]

Okay. I just needed to add the second value to the gap property for vertical space.

@PaulOB

Why do you need to say that?

If clicking a button opens a hidden panel or something then scroll the user directly to that item. Don’t make them click a button to open something and then click another button to see the thing that they just clicked a button to see!

Okay, then I will dedicate post # 7 to a description of the vision I have for these buttons.

In the end, I would like to have all of the document tables hidden with the light box shadow over everything except for the red button, signaling the user to choose a table as it says in the h3.

On the wide version, the user clicks a button, and the selected table rolls down below in a CSS animation. If they click the green button, all of the tables appear.

On smaller devices, I’m deciding what would be best - whether to roll the tables directly below the narrow buttons (seems best) or just do a “please scroll down” bit. I’m pretty sure that would mean that the markup in #tablenav will have to have a copy of the section tables inside it (and between the buttons) and set to display:none. If the table appears in its original spot in the section tables, the “please scroll down” direction will tell the user that something happened. Otherwise, the user wouldn’t see anything happen on the screen because the buttons occupy the screen.

To be honest, the tables rolling out directly beneath the buttons at narrow widths (at 400px) seems like a very nice touch. The orange button clicked could be turned red which could then be used to trigger a collapse of that table using simple JS to change the CSS and do a simple “roll up” animation. I think that’s what I want.

This is a pretty good vision according to me. I don’t think it would be annoying to the user to need to click a button to display the document tables.

@PaulOB

All this is nonsense and indeed could break something in the future.

Okay, I’ll get rid of the extraneous gradient stuff right away.

[etidd]

All the old gradient crap is gone now.

I have been able to manipulate the gap property.
However, I still can’t make a margin between #tablenavbuttons and #expandhide at narrow widths. It won’t budge!

@media screen and (max-width: 400px) {
	#tablenavbuttons { margin-bottom:33.4rem; } /* not working to add space between #tablenavbuttons and #expandhide */
	#expandhide { margin-top:4rem; gap:1rem 1rem; }

So, I’m at a junction with what the end result should be , but I have a good idea.

• I’m investigating the noscript tag as JavaScript detection will be crucial in determining how the page is rendered. When there is no scripting in the browser, all of the tables should be displayed, and #tablenav shall be hidden. When JS is available, this is the visual style and page behavior I’m going to try for.

• The wide version with the 4-on-3 grid and the tables appearing below is wonderful. I want to keep it that way, but at a much wider point in the media queries should the grid be altered to the single layer narrow grid. I want something major to happen way before 400 px is reached. As in, the 4-on-3 immediately switches to a single layer.

• The font-size of #tablenavbuttons will be made much larger, and the #tablenavbuttons button will be the width of the wide tables. The section table styles could be compounded to target new tables as they display appropriately at all widths.

• At this point, the thead of the narrow tables will say “Click button to hide.”.

• The tables themselves will be nested neatly underneath the tables and come rolling out beneath using a CSS animation.

• The JS functions (that I’m going to begin writing today) will change the #tablenav buttons to a deep velvet red gradient after they have been clicked, a color that will signify that clicking them will retract the table shown.

In my opinion, that sounds pretty freakin’ awesome. I’m excited!

If that means I have to have two full sets of tables in the markup (which is almost 70% of templates.html), well, I think it’s a cost worth bearing for the sake of such an awesome design idea. These ideas have to come together somehow.

[PaulOB]

@etidd

I’m investigating the noscript tag as JavaScript detection will be crucial in determining how the page is rendered. When there is no scripting in the browser, all of the tables should be displayed, and #tablenav shall be hidden. When JS is available, this is the visual style and page behavior I’m going to try for.

You don’t need the noscript tag to do that. You should enable the page for everyone by default and then enhance with js. No need for duplicate content in a noscript tag. Keep things simple and logical. For example show everything by default so people without js get a working page and then add js to hide and show as required. Plan ahead with the correct mark up in mind for this to happen.

@etidd

If that means I have to have two full sets of tables in the markup (which is almost 70% of templates.html),

No you won’t need to do that if you do it properly. Avoid duplicate content at all costs as its not only a maintenance nightmare but an SEO and accessibility nightmare also. There are odd cases where you may have to duplicate stuff but if you build correctly 99% of the time you can avoid this.

@etidd

The wide version with the 4-on-3 grid and the tables appearing below is wonderful. I want to keep it that way, but at a much wider point in the media queries should the grid be altered to the single layer narrow grid. I want something major to happen way before 400 px is reached. As in, the 4-on-3 immediately switches to a single layer.

@etidd

The font-size of #tablenavbuttons will be made much larger, and the #tablenavbuttons button will be the width of the wide tables. The section table styles could be compounded to target new tables as they display appropriately at all widths.

That all just sounds like normal media query tweaking and making it do what you want. However the more you tweak something the harder you make it on yourself. If you look at my buttons they need very little code and naturally work across most widths. You have to find the sweet spot for your design and make it work more naturally.

@etidd

The tables themselves will be nested neatly underneath the tables and come rolling out beneath using a CSS animation.

I didn’t really understand that concept. Maybe an example or drawing of what you are trying to achieve could be helpful. If clicking a button displays a table then I would suggest you show it as close to the button as possible or as mentioned do an animated css scroll down to the information. However if you are now right down the page how will the user close the table without going all the way back to the button at the top. You need to plan ahead before you start coding.

I would start with something like my codepen demo on a stand alone page so you can test out the best scenario for what you want rather than trying to plug it into your existing page. In that way you can tweak and chop and change and once you get close to what you need you can then implement into the real page more easily.

99% of html/css/js coding is planning ahead and then that dictates the code to use for a more efficient operation. In reality css can be a five minute job to get the initial structure. It only takes time once you start wading through tons of spaghetti code.

[etidd]

Okay, then the JS will have to be more extensive in order to move the markup into different locations. I will have to study how markup can be extracted and replaced into a different location in the markup.

I figured out why I thought the gap didn’t apply at the 400 px media query. It’s because my browser won’t go that narrow, so I thought it didn’t work.

Planning: My plan changed a bit at post # 5. I had a revelation. Now, I have to have it like that for the medium and narrow devices. Maybe I could have planned for this particular design before. So posts # 6-10 are dedicated for this purpose.

If you think the page should display all of the tables by default, that should be okay for now, though the table lists are going to continue to grow slowly, and one of my motivations for the buttons is to reduce the page size / vertical length. There are already 7 tables containing over 100 links and counting.

@PaulOB

No you won’t need to do that if you do it properly. Avoid duplicate content at all costs as its not only a maintenance nightmare but an SEO and accessibility nightmare also.

Okay, this is duly noted; however, for the sake of construction, I did duplicate the tables themselves, and the HTML file is nearly double in size. I will remove it as soon as I’m done. I doubt Google will scrub me from their index. SEO isn’t really a concern (yet). Yesterday, I uploaded files that would have you heaving and appalled because it destroyed the flex grid. Monkeyboy is making a mess (but coding some new stuff, too). I won’t upload the current templatesection.css file yet to the live page, but it’s still looking great.

I’ve got over 7000 unique monthly views now and the potential to make this a successful business, but I think everybody understands that I’m working on the page and stuff.

With the temporary duplication, I have been able to replicate the styles to a great extent by just adding in a second target in the table styles; however, I could not make the tables reappear underneath #tablenavbuttons as I had been able to do yesterday. They seemed just about right! Just need the button sitting across the top border of the table.

Here is what I had in mind:

I would like for the #expandhide text to sit on one line. Haven’t yet figured why it wraps when there’s space.

I think I’m insistent that a button-centered system on this page from medium to slim widths would be the ideal way I would like to experience it. The user can click the button, and the button turns red, and the table comes down.

If JS is turned off, the #doctables markup will sit below revealing everything, but when JS is turned on, it hides the tables waiting for the user to click a button.

Current styles:

#tablenav {
	border:3px pink solid;
	max-width:1280px;
  	margin:auto;
	text-align:center;
}
#tablenav h3 { margin-top:3px; }

#tablenav button {
	-webkit-appearance:none;
	appearance:none;
	display:block;
	margin:0;
	flex:0 0 260px;
	font-size:1em;
	font-weight:bold;
	letter-spacing:1px;
	text-decoration:none;
	color:#fff;
	padding:5px 0;
	border:6px ridge #aa6420;
  	/* gradient */
	background:#d99028; /* flat background for old browsers */
	background:linear-gradient(to bottom,  #d99028 0%, #ca6c2b 100%);
}
#tablenav button:hover, #tablenav button:focus {
	color:yellow;
	/* gradient */
	background:#d14b2e; /* Old browsers */
	background:linear-gradient(to bottom,  #d14b2e 0%, #d99028 100%);
}
#tablenavbuttons button:hover, #tablenavbuttons button:focus { text-shadow:2px 1px 1px #F60; }
#tablenavbuttons, #expandhide {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}
#tablenavbuttons { gap:1rem; }
#tablenavbuttons table { display:block; }
#expandhide { margin:2.3rem 0 1.25rem; gap:1.8rem; }
#expandhide button {
	font-size:1.2em;
	padding:5px 2.6rem;
	flex:0 0 320px;
}
#tablenav button:hover, #tablenav button:focus {
	cursor:pointer;
}
#tablenavbuttons button:hover, #tablenavbuttons button:focus {
	box-shadow:0 2px 24px #FC3;	
}
#expandhide button:first-of-type { /* the "hide all tables" button */
	/* gradient */
	background:#d62a2a; /* flat background for old browsers */
	background:linear-gradient(to bottom,  #d62a2a 0%, #ce7b73 100%);
}
#expandhide button:hover, #expandhide button:focus {
	text-shadow:2px 1px 1px #ca0404;
	box-shadow:0 2px 27px #ce7b73;
	/* gradient */
	background:#ce7b73; /* flat background for old browsers */
	background:linear-gradient(to bottom,  #ce7b73 0%, #d62a2a 100%);
}
#expandhide button + button { /* the "show me everything" button */
	/* gradient */
	background:#64a020; /* flat background for old browsers */
	box-shadow:0 2px 27px #0BFD78;
	background:linear-gradient(to bottom,  #64a020 0%, #8bbc67 100%);
}
#expandhide button + button:hover, #expandhide button + button:focus {
	text-shadow:2px 1px 1px #3C0;
	box-shadow:0 2px 27px #20B00B;
	/* gradient */
	background:#8bbc67; /* flat background for old browsers */
	background:linear-gradient(to bottom,  #8bbc67 0%,#64a020 100%);
}
/* end of table navigation section */

/** document tables **/
#doctables table, #tablenav table {
    width:90%;
    border-collapse:collapse;
	border:0.15em solid #000;
}
#doctables table {  margin:38px auto; }    /* use the margin value to adjust space between the top and the table */
#tablenav table {display:none; }
#doctables thead tr:first-of-type, #tablenav thead tr:first-of-type { 
	font-family:"Arial", serif;
	border-bottom:0.05em dashed #000;
}
#doctables thead tr:first-of-type {
	text-shadow:1px 1px 4px #fcd8a9;
	font-size:2.25em;
}
#tablenav thead tr:first-of-type {
	font-size:1.1em;
	border-top:none;
}
#doctables thead tr:last-of-type, #tablenav thead tr:last-of-type { font-size:1.2em; border-bottom:0.05em solid #000; }
#doctables thead th, #tablenav thead th { padding:6px 0; }
#doctables thead th span:last-of-type, #tablenav thead th span:last-of-type { display:none; }
#doctables thead tr:last-of-type th, #tablenav thead tr:last-of-type th { border-left:1px dotted #000; }
#doctables tbody tr, #tablenav tbody tr {
	height:50px;
	border-bottom:1px dotted #000;
}
#doctables table td, #tablenav table td { width: 450px; } /* setting the width for the document name column */
#doctables table tbody td + td, #tablenav table tbody td + td { /* styling the date modified column */
	width:60px;
	padding:0;
	font-size:1.2em;
}
#doctables table tbody tr td, #tablenav table tbody tr td { border-right:1px dotted #000; }
#doctables tbody tr td:first-of-type, #tablenav tbody tr td:first-of-type { 
	padding:5px 0;
	font-family:"Courier", serif;
	font-size:1.2425em;
}
#doctables tbody tr td:last-of-type, #tablenav tbody tr td:last-of-type { width:70px; padding:0 0.2em; font-size:1.2425em; } /* styling the download column */
#doctables table a, #tablenav table a {
	font-size:0.95em;
	margin-bottom:2px;
}
#doctables tbody tr td:last-of-type a + a , #tablenav tbody tr td:last-of-type a + a {
    display:none;
}


@media screen and (max-width:46.5em) {
	h1 { font-size:2.15em; }
	
	#tablenavbuttons button {
		font-size:1.2em;
		width:100%;
	}
	#expandhide {
		font-size:0.7em;
		margin-top:3rem;
		gap:1.7rem 4rem; 
	}
	#expandhide button {
    	font-size:1.7em;
		height:64px;
    	padding:5px 5rem;
    	display:block;
	}
	
	#doctables thead tr:first-of-type { font-size:2.02em; }
	#doctables thead tr:last-of-type, #tablenav thead tr:last-of-type { font-size:0.98em; }
}

[PaulOB]

I know you’ve moved on with this now but I wanted to show the approach I would have taken and using no duplication of the tables. I haven’t ported much of your css across so the tables are just basic styles and shortened for brevity.

The JS has been added to hide and show the tables as required but only if JS is available. If no JS is available all the tables will be displayed one after the other and the buttons removed as they would be superfluous.

At wide screens the tables appear under all the buttons but if you close the browser window until the buttons go to one column then each of the tables will appear under the button it refers to. (Of course that can be changed at whatever point is needed as its the css media query that sets this behaviour and nothing to do with the js).

There is no need for duplication and quite a logical structure.

[PaulOB]

@etidd

Haven’t yet figured why it wraps when there’s space.

That’s because you put a massive 5rem of padding at the sides which means that there is little room for the text.

#expandhide button {
    padding: 5px 5rem;/* ??? */
}

[etidd]

I am currently studying post # 11 and assimilating the codePen demo into the existing code and need to spend more time doing my due diligence before I post another update.

Thanks.

[rpg_digital]

Sorry if this is throwing a spanner in the works, but off the back of Paul’s hard work I have done a bit of a refactor.

For one the menu buttons

<a href='#privateBanking' class='active btn btn-nav'>Private Banking</a>
<a href='#sovereignty' class='btn btn-nav'>Sovereignty</a>
<a href='#discharge' class='btn btn-nav'>Debt Discharge</a>
<a href='#defense' class='btn btn-nav'>Civil &amp; Criminal Defense</a>
<a href='#forms' class='btn btn-nav'>Forms</a>
<a href='#adminProcesses' class='btn btn-nav'>Administrative Processes</a>
<a href='#notaryPresentments' class='btn btn-nav'>Notary Presentments</a>
<div class='wide-and-narrow expand-tables'>
    <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>
</div>

I have changed the nav buttons to links with a button styling. This way if we are employing graceful degradation e.g. with JS switched off, then the button links will scroll to the relevant sections. There is a back-to-top button as well, which is hidden when JS is active

I have also done a bit of a refactor to the JS, essentially adding a few helper methods for adding and removing classes on multiple elements. These could be saved into their own utility module.

// helper functions

/**
 * toggleClass
 * @param {Iterable} elems - a collection of elements
 * @param {String} className - className to toggle
 * @param {Boolean} force - className added if true, removed if false
 * @returns true or false depending on the force parameter
 */
function toggleClass (elems, className, force = true) {
    for (const elem of elems) {
        elem.classList.toggle(className, force);
    }
    return force;
}

/**
 * addClass
 * @param {Iterable} elems - a single element or a collection of elements
 * @param {String} className - className to add
 * @returns true if successful
 */
function addClass (elems, className) {
    if (typeof elems[Symbol.iterator] === 'function') {
        return toggleClass(elems, className, true);
    }

    return elems.classList.add(className);
}

/**
 * removeClass
 * @param {Iterable} elems - a single element or a collection of elements
 * @param {String} className - className to add
 * @returns false if successful
 */
function removeClass (elems, className) {
    if (typeof elems[Symbol.iterator] === 'function') {
        return toggleClass(elems, className, false);
    }

    return elems.classList.remove(className);
}

...

function addActiveClasses (...elems) {
    elems.forEach((elem) => addClass(elem, 'active'));
}

function removeActiveClasses (...elems) {
    elems.forEach((elem) => removeClass(elem, 'active'));
}

With these helper functions, the handlers can be cleaned up a bit

function navButtonHandler (event) {
    event.preventDefault();

    const navButton = event.target;
    // use the hash in the href to find the active tab
    const activeTab = doc.querySelector(navButton.hash);

    removeActiveClasses(navButtons, tables, showAllBtn, hideAllBtn);
    addActiveClasses(navButton, activeTab);
}

function showAllHandler (event) {
    event.preventDefault();

    removeActiveClasses(hideAllBtn);
    addActiveClasses(showAllBtn, navButtons, tables);
}

function hideAllHandler (event) {
    event.preventDefault();

    addActiveClasses(hideAllBtn);
    removeActiveClasses(showAllBtn, navButtons, tables);
}

Codepen here

[PaulOB]

@rpg_digital

Sorry if this is throwing a spanner in the works, but off the back of Paul’s hard work I have done a bit of a refactor.

Looks good That’s much neater.

I did think of changing the buttons to links as that would make more sense (and you could even use :target in CSS to hide and show) but mine was initially more just a proof of concept.