FABLED.DAY - expanding table of contents for large sites

Eclipsed Table of Contents

You can view all three components (CSS, HTML, Javascript) for this snippet together on Codepen, as well as see a live preview that you can edit on the fly...

You’ll notice on this (and most sites) that the (primary) navigation takes the form of a static menu area appearing in all the pages.

This works well if your site only has a few pages, but can make navigating tricky for visitors if your site is vast. How is it all supposed to fit? If you have a large site, consider also having a dedicated page for the entire table of contents (or site map, as one might call it).

You can, of course, do this with a normal (unordered, or even ordered) HTML list of links, but this actually complicates things in the long run. It’s a far better idea to plan ahead and organize your pages into categories and sections. These can then appear as nested items within an unordered list, making navigation a little easier.

Depending on your site’s ultimate (planned?) size, though, even this can look a bit messy for visitors. My solution, like many people, was a collapsing menu. These are extremely common online, and hide the nested lists unless you click on the headers to reveal their contents.

This shrinks the list and keeps the visitor from feeling overwhelmed when faced with the long list, while letting them check out topical areas that interest them. On this page, I’ll provide a basic option I was able to set up for a collapsing menu with annotations to allow for customizing the code.

There’s probably a lot more that can be done here, too, of course, that I haven’t even begun to learn yet. For now, this table of contents supports three levels of menus with custom bullet points, and also has an optional class to add to items that you haven’t yet completed, labeling them as such.

Please note, though - jquery is required for all this to work. This can be added by pasting:

...right before </body> on any page that deploys this, Many people already use it on most of their site, of course.

CSS

You apply the class .eclipse to an anchor tag that you'd like to turn into a heading for a nested list, and follow that up with the nested list itself. The rest of the CSS styles and prepares the unordered list for the visitor. While the code will (technically) work without most of this extra CSS, it doesn’t work in a sensical way, and modification are necessary to make this usable for your average visitor. I hope I’ve written decent documentation for the CSS itself below. There are instructions for changing the bullet points used by various levels of the Table of Contents (down to a depth of three), colors, etc. This will, I hope, allow most people to copy and use the code as their own, changing it as necessary.

/* within this CSS, the assumption has been made that your table of contents list is labeled with the id "#garden", ie "id=garden", but you can choose another and change it, of course. using a specific id for the entire list makes it easy to customize without messing up any other lists on your page */

/* the below portion styles the very first list item, which you can click to toggle whether the menu is completely open or closed */
#unfolder {
	font-weight: bold;
	text-decoration: underline;
	cursor: pointer;
}

/* to style the clickable headings themselves, do so below */
#garden a.eclipse {
	color: teal;
}

/* to style all other links, do so below */
#garden a {
	color: green;
}

/* this part creates the .gray class, which you add to any list item (or an entire nested list) to turn it gray and demonstrate that it isn't finished. */

#garden .gray a {
	color: lightgray;
}

/* below is the css necessary - yes, necessary, to hide the menu initially prior to opening/closing it with javascript */
#garden .eclipse + ul {
	display: none;
}

/*the below part is important, though, because it provides feedback to the user - lets 'em know they can click on certain parts to see more. */
#garden .eclipse {
	cursor: pointer;
}

/* the padding setting here will control the indentation effect of each nested list in the sequence that displays when you click a top level list item */

#garden ul,
#garden ul ul,
#garden ul ul ul {
	padding-left: 1.4em;
}

/* the entry for list-style-type below will be the symbol to the left of top-level items */
#garden li {
	list-style-type: "❁";
	padding: 0.2em;
	text-align: left;
}

/* below, list-style-type designates the symbol of second-level items */

#garden ul li {
	list-style-type: "✹";
}

/* below, list-style-type designates the symbol of third-level items */
#garden ul ul li {
	list-style-type: "➺";
}

/* and below, you can change the symbol for fourth-level items, if you have any... */
#garden ul ul ul li {
	list-style-type: "❀";
}

HTML

The HTML here is almost exactly like you’d expect of a series of nested, unordered lists. When you want to nest a list, place it directly within the existing list item of the top-level list. Just before that (before the <ul> tag for the nested list, that is), you’ll add that anchor tag and apply the .eclipse class to it, turning it into a clickable link that opens the (initially hidden) nested list.

For list items that link to incomplete or future pages, you can add the class .gray. This will gray out the link, to indicate to the visitor that it's just not there yet. If you're using that, be sure to apply the class directly to the list item in question (ie <li class="gray">). Don't apply it to the link/anchor.

<ul id="garden">

	<!-- below is an important part - the link at the very top of the index that toggles opening and closing all sections of the index at once. you can change the text it displays below -->

	<li id="unfolder">
		<!-- The next lines determine what displays when the table is folded/unfolded respectively -->
		<span id="uneclipse">Unfold all sections...</span>
		<span id="uneclipsed">Hide all sections...</span>
	</li>

	<li><a href="#">This is a top level link.</a></li>

	<!-- apply an anchor tag with the class "eclipse" (<a class="eclipse">) to every top level link that will open a nested list of links, but no others. -->

	<li><a class="eclipse">This opens a nested list.</a>
		<ul>
			<li><a href="#">This is a second level link.</a></li>

			<!-- As you can see below, applying the class .gray to any ul or li (nested or not) will gray it out to signify it's unfinished -->

			<li><a class="eclipse">This opens a nested list.</a>

				<!-- As you'll notice here, you can comfortably have a table of contents nested three levels deep. If you edit the CSS yourself, you can probably make it work for four levels or so, if absolutely necessary. -->

				<ul>
					<li><a href="#">This is a third level link.</a></li>
					<li class="gray"><a href="#">This is an unfinished third level link.</a></li>
					<li><a class="eclipse">This is opens a nested list.</a>
						<ul>
							<li class="gray"><a href="#">This is an unfinished fourth level link.</a></li>
							<li><a href="#">This is a fourth level link.</a></li>
						</ul>
					</li>
					<li><a href="#">This is a third level link.</a></li>
				</ul>
			</li>

			<!-- Here are some more examples of both nested, unnested, and grayed-out links -->

			<li><a href="#">This is a second level link.</a></li>
			<li class="gray"><a href="#">This is an unfinished second level link.</a></li>
		</ul>
	</li>
	<li><a href="#">This is a top level link</a></li>
	<li><a class="eclipse">This opens a nested list.</a>
		<ul>
			<li><a href="#">This is a second level link.</a></li>

			<li><a href="#">This is a second level link.</a></li>

			<li><a href="#">This is a second level link.</a></li>
		</ul>
	</li>
	<li class="gray"><a class="eclipse">This opens a nested list (of unfinished pages).</a>
		<ul>

			<li><a href="#">This is a second level link.</a></li>
			<li><a href="#">This is a second level link.</a></li>
			<li><a href="#">This is a second level link.</a></li>
		</ul>
	</li>
	<li class="gray"><a href="#">This is an unfinished top level link.</a></li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Javascript

Include this Javascript, either between <script> tags just before your body tag closes, or in a separate Javascript file linked in the same location. Be sure to also include jquery as described above in the HTML section, too, or none of this will work. This particular magical paradigm (jquery, I mean), is, in fact, key to this whole thing - and specifically, this spell. Again, you'll want to paste:

...just before your </body> tag. Using that, we’re able to create a sliding visibility effect. When the user clicks on something with the class .eclipse, lists directly following it to become visible, slowly. If you change the name of the class (.eclipse) in the (above) HTML and CSS, be sure to change it here, too! Also, by replacing the value ”slow” with "fast" (or a number followed by s or ms) will change the speed at which the menu opens, if you care that much…

	//THIS PORTION WILL CONTROL THE SPEED AT WHICH YOUR MENU EXPANDS AND CONTRACTS WHEN SINGLE SECTIONS ARE OPENED, USING THE JQUERY SLIDETOGGLE SPELL. I JUST SET IT TO "SLOW," BUT IT CAN BE LISTED IN SECONDS (IE, 1S), OR MILLISECONDS, (IE 300MS).DITTO FOR THE SPEED OF SLIDEUP AND SLIDEDOWN USED BELOW, TOO.
	$(".eclipse").click(function () {
		$(this).next("ul").slideToggle("slow");
	});
	
	let concealed = $(".eclipse");
	let revealed = false;
	$("#uneclipsed").hide();
	//THE #UNFOLDER IS THE ELEMENT THAT ONE CLICKS TO... UNFOLD EVERYTHING. I APPLIED IT TO THE FIRST LIST ITEM...
	
	$("#unfolder").click(function (event) {
		event.preventDefault();
		if (revealed) {
			concealed.each(function () {
				$(this).next("ul").slideUp("slow");
			});
	
			//#UNECLIPSE AND #UNECLIPSED ARE IDS APPLIED TO SPAN TAGS THAT APPEAR WITHIN #UNFOLDER DEPENDING ON WHETHER THE TABLE IS HIDDEN OR UNFOLDED, RESPECTIVELY. THIS LETS YOU TELL THE USER WHERE TO CLICK TO TOGGLE. CONTENTS OF THESE TAGS CAN BE CHANGED WITHIN THE HTML...
	
			//HERE, WE'RE HIDING THE <SPAN> TAG LABELED #UNECLIPSED WHEN THE MENU IS ECLIPSED STILL, AND SHOW THE ONE LABELED #UNECLIPSE, PROMPTING THE USER TO CLICK IT TO UNFOLD IT...
			$("#uneclipsed").hide();
			$("#uneclipse").show();
			revealed = false;
		} else {
			concealed.each(function () {
				$(this).next("ul").slideDown("slow");
			});
	
			//ONCE THE MENU HAS BEEN UNFOLDED, WE HIDE #UNECLIPSE AND SHOW #UNECLIPSED TO, INSTEAD, PROMPT THE USER TO CLICK IF THEY WANT TO CLOSE THE MENU
			$("#uneclipsed").show();
			$("#uneclipse").hide();
			revealed = true;
		}
	});