#TIL
Today I learned about HTML's native accordion-like functionality, encapsulated by the details element.
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>
);
}
Breaking It Down
Start with a <details> tag.
<details>
</details>
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>
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>
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;
}
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)