---
title: "Expanding the Details Element"
description: "Expand your web design skills with the HTML <details> element! Build megamenus and dropdowns with hover interactivity, using Tailwind and vanilla JavaScript."
---

# Expanding the Details Element

![KISS band member playing only accordions on stage during an outdoor concert. the logo "SanityPress" in the stage background](https://cdn.sanity.io/images/cyu7k2r0/production/8cff3d01b217059189be9a4ef18e7caa4cdfdbf0-1536x1024.png "♪ I Was Made For Lovin' Accordions")

Mastering the HTML `<details>` element is a skill every frontend developer should have in their toolkit. In this guide, we’ll expand (pun intended!) on what `<details>` can do—showing you how to move beyond simple toggles and use it as the foundation for more complex layouts like site navigation megamenus and dropdowns.

## Raw HTML

Here’s a quick example using just `<details>` and `<summary>`. No CSS, no JavaScript—just the barebones HTML in action.

> Pro tip: adding a `name` attribute will link the details elements together, allowing only one to be expanded at a time.

```html
<iframe height="300" style="width: 100%;" scrolling="no" title="Raw details element" src="https://codepen.io/nuotsu/embed/YPymQVG?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/nuotsu/pen/YPymQVG">
  Raw details element</a> by Mitchell Christ (<a href="https://codepen.io/nuotsu">@nuotsu</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>
```

## Basic Styling

Now let's add some Tailwind to style the details elements like a navigation menu. I'm going with a full-width **megamenu** layout, and a compact version with a **dropdown** style.

> Pro tip: use the `[open]` selector to style the `<summary>`'s open state indicator (i.e. the `+` and `-`).

```html
<iframe height="300" style="width: 100%;" scrolling="no" title="Details as navigation menus" src="https://codepen.io/nuotsu/embed/NPGQyYb?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/nuotsu/pen/NPGQyYb">
  Details as navigation menus</a> by Mitchell Christ (<a href="https://codepen.io/nuotsu">@nuotsu</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>
```

## Toggling State with Hover

I wrote some vanilla JavaScript so that `<details>` elements can open on **hover (desktop only)** and on **tap (mobile)**. This way, users don’t have to explicitly click the disclosure arrow if they’re browsing with a mouse, but mobile users still get the familiar tap-to-toggle behavior.

> Pro tip: Use `window.matchMedia` to detect whether the device supports hover. Then, I added or removed the appropriate event listeners (`mouseenter` / `mouseleave` for desktop, `click` for mobile).

```html
<iframe height="300" style="width: 100%;" scrolling="no" title="Details as navigation menus" src="https://codepen.io/nuotsu/embed/vENodQY?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/nuotsu/pen/vENodQY">
  Details as navigation menus</a> by Mitchell Christ (<a href="https://codepen.io/nuotsu">@nuotsu</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>
```

## Adding Hover Safe Areas

In the previous example, try moving your mouse from `Megamenu #1` directly to `💧 Squirtle`. You may notice a frustrating UX problem: **Megamenu #2 opens unintentionally** while you’re crossing over.

To fix this, I created a new utility class that can be added to a `<details>` element in the megamenu. This class uses a triangular-shaped pseudo-element (shown here with a green background for clarity) that expands the "safe area."

The safe area acts as a hover buffer, allowing the user to move the mouse diagonally without accidentally triggering a different menu.

```html
<iframe height="300" style="width: 100%;" scrolling="no" title="Details as navigation menus" src="https://codepen.io/nuotsu/embed/YPymeoP?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/nuotsu/pen/YPymeoP">
  Details as navigation menus</a> by Mitchell Christ (<a href="https://codepen.io/nuotsu">@nuotsu</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>
```

## Conclusion

This is only scratching the surface of what you can build with the powerful `<details>` element. From simple toggles to nested accordions, hover states, and even custom-styled interactions, it gives you a ton of flexibility with minimal markup.

You can explore all of the live CodePen examples referenced in this article [here](https://codepen.io/collection/RPGzbY).

![SanityPress in a death metal style](https://cdn.sanity.io/images/cyu7k2r0/production/7303066e818896e2f79f0627b20a93e838684de2-1024x1024.png)