DEV Community

Cover image for TIL - HTML Details
James Cox
James Cox

Posted on • Edited on

TIL - HTML Details

#beginners #html #tutorial #react

#TIL

Today I learned about HTML's native accordion-like functionality, encapsulated by the details element.

Sawyer from Lost slowly removing his glasses looking at something in the distance.

I'm sorry, James. Did you just say HTML has a built-in accordion???

I know! I couldn't believe it either. MIND BLOWN.

The HTML Details Element <details> creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the element.

Let's slow our roll ...

While very cool, it is far from a perfect solution, in my opinion. Support for animation is limited, and requires a decent amount of JavaScript and CSS to work correctly.

There are certainly better options in terms of design and functionality, especially if you are using a design library like Bootstrap, Material UI or something similiar.

With that said, let's see it in action!

The Accordion

The Code 

import "./styles.css"; export default function App() { return ( <div className="App"> <h1>HTML Details Element</h1>  <div className="details-wrapper"> <details> <summary> <h2>This is an accordian</h2>  </summary>  <div> <p>... made only with HTML and a sprinkle of CSS</p>  <ul> <li>First wrap your accordion in a details tag</li>  <li> Then create a summary section with some sort of h1 or p content </li>  <li> Then separately inside the details element create another element, like a div </li>  <li> And if you want to style the accordion, you can create a cool effect </li>  <li>Animation is possible, but it will require javascript</li>  </ul>  </div>  </details>  </div>  </div>  ); }
Enter fullscreen mode Exit fullscreen mode

Breaking It Down

Start with a <details> tag.

<details> </details>
Enter fullscreen mode Exit fullscreen mode

Add a <summary> tag. Whatever you put in the summary tag is what will the user will see when the accordion is closed. You MUST have a <summary> tag for the details element, especially for accessibility purposes.

<details> <summary> // anything can go in here, but I chose an <h2> <h2>This is an accordian</h2>  </summary> </details>
Enter fullscreen mode Exit fullscreen mode

Whatever you put inside the <details> element and outside the <summary> element is what will be in the expanded portion of the accordion.

It is definitely helpful to wrap your expanded-content in some sort of HTML element if you want to style your accordion.

<details> <summary> <h2>This is an accordian</h2>  </summary>  // I went with a <div> to reference in my CSS file <div> ...content will go here when the accordion is open </div> </details>
Enter fullscreen mode Exit fullscreen mode

And that's pretty much it! Of course styling is important, so let's peep that CSS:

/* only referencing the styles that pertain to the <details> element itself */ *, *:before, *:after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } summary { cursor: pointer; } summary > * { display: inline; } details > summary { text-align: left; width: 18rem; background-color: rgb(88, 33, 241); cursor: pointer; padding: 0.5rem 1rem; border-radius: 0.5rem; } details > summary > * { display: inline; } details > div { text-align: left; width: 18rem; border: 4px solid rgb(88, 33, 241); margin-top: 0; padding: 1rem; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } details[open] summary { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } summary[open] { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
Enter fullscreen mode Exit fullscreen mode

Not too bad, huh? If you're interested in seeing the full CSS code, it can be found here.

Conclusion

If you need a quick accordion and do not want to fiddle with a ton of JavaScript and CSS, HTML provides you a handy <details> element.

Thank you for reading and I look forward to hearing any thoughts, questions or feedback you may have!

Top comments (0)