TIL - HTML Details

#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!