Expandable Menu Items Without JavaScript

Sometimes, menu items are expanded to reveal sub-items to tap on. Generally, the functionality is maintained with JavaScript.

JavaScript is unnecessary when the HTML details tag is used.

Below is an example navigation menu. It contains 2 expandable menu items.

The example is constructed with only HTML and content. No CSS. No JavaScript.

Tap the "Opportunities" item or the "Products & Services" item to see how it works.

Because no CSS is used in the example, the details tag is rendered according to the browser's defaults. Browsers tend to do a pretty good job using their default styles.

You may add CSS for your special design, of course.

How the details Tag Is Constructed

Let's look at the HTML for the "Opportunities" item by itself to see how the details tag is constructed.

<details>
   <summary>Opportunities</summary>
   <div style="margin-left:2em;">
       <a href="https://example.com/bottle-washer.html">Bottle Washer (great pay)</a>
       <br><a href="https://example.com/commissioned-sales.html">Commissioned Sales</a>
   </div>
</details>

The first and last lines of the above source code are the begin and end details tag. The content is between those two tags.

The blue colored section is the summary tag with text. The text in the summary tag is published when the page is first loaded.

The red colored section contains the text that is revealed when the blue summary text is tapped. The red content is composed of HTML markup and text for positioning and for navigation menu links.

Now, here is the code for the entire example that is located near the beginning of this article.

<div><a href="https://example.com/">Home</a></div>

<details>
   <summary>Opportunities</summary>
   <div style="margin-left:2em;">
       <a href="https://example.com/bottle-washer.html">Bottle Washer (great pay)</a>
       <br><a href="https://example.com/commissioned-sales.html">Commissioned Sales</a>
   </div>
</details>

<details>
   <summary>Products & Services</summary>
   <div style="margin-left:2em;">
       <a href="https://example.com/red-whirligig.html">Red, Gold-Flecked Whirligig</a>
       <br><a href="https://example.com/space-trip.html">Trip to Space</a>
       <br><a href="https://example.com/lunch-with-will.html">Lunch with Will Bontrager</a>
   </div>
</details>

<div><a href="https://example.com/contact.html">Contact</a></div>

<div><a href="https://example.com/about-us.html">About Us</a></div>

For easier differentiation, only the content of the details tag are color coded in the above source code.

For a quick manual installation, this expandable navigation menu generally is faster to implement than anything that uses JavaScript to expand/collapse menu items.

It's easy to remember, too:

1. Type the <details> … </details> tag into the web page source code.

2. Stick in the <summary>Visible Text</summary> tag.

3. Any other content you stick into the <details> … </details> tag is displayed when the summary text is tapped.

The technique can be used for functionality other than navigation menu links, too. A Frequently Asked Questions page, for example, where the question is tapped and the answer appears immediately below the question.

And a bonus: Because it does not rely on JavaScript, this expandable menu technique can be used in HTML emails.

(This article first appeared in Possibilities newsletter.)

Will Bontrager