TIL - HTML Details
Tags: beginners, html, tutorial, react
Published: 2021-05-14 22:04:48

# #TIL

Today I learned about HTML's native accordion-like functionality, encapsulated by the [details element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details).

![Sawyer from Lost slowly removing his glasses looking at something in the distance.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ira62thdgg4qwy72wf8d.gif)

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 <summary> 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

{% codesandbox t1pgu %}

## The Code

```javascript
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. 

```javascript
<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. 

```javascript
<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.

```javascript
<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:

```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](https://codesandbox.io/s/html-details-element-t1pgu?file=/src/styles.css).

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