BlogRSS

How to make a collapsible list in html without JavaScript

•css•2 min read

Short article on how to make a expand / collapse html div without using JavaScript. We can use details and summary tag to create a collapsible div.

#css

In this article, we will create a collapsible element list in Html without using any JavaScript code.

To create expand / collapse div only with HTML and CSS, we can use these HTML tags:

  1. details tag, and
  2. summary tag

So let's see how it works together to make a collapsible HTML div.

The < details > tag is used to create disclosure elements that a user can open and close.

The content inside the element is visible when it is in the open state.

The < summary > tag is used in conjunction with the details tag. It is used to label or to provide a header for the details.

First, let's create the HTML page.

<details>
    <summary>What is HTML</summary>
    <span>HTML is the basic building block of the Web.</span>
</details>

We will get this,

make a expand / collapse html div without using JavaScript

We can also make a collapsible list in HTML for the FAQ section on our website. And add some CSS to style those div.

Example:

<body>
    <ul>
      <li>
        <details>
          <summary>What is HTML</summary>
          <span>HTML is the basic building block of the Web.</span>
        </details>
      </li>
      <li>
        <details>
          <summary>What is CSS</summary>
          <span>CSS is the language we use to style an HTML document.</span>
        </details>
      </li>
    </ul>
  </body>

CSS style

ul {
  margin: 0;
}

li {
  list-style: none;
  padding: 5px 0px;
}

summary {
  background-color: palegoldenrod;
}

span {
  background-color: paleturquoise;
  display: block;
  margin-top: 5px;
}

Result:

Expand/collapse Element in html

<a href="https://codesandbox.io/s/agitated-carson-j90e43?fontsize=14&hidenavigation=1&theme=dark"> <img alt="Edit j90e43" src="https://codesandbox.io/static/img/play-codesandbox.svg"> </a>

Now you can click any question to see the content inside the elements.

So, this is how you can make a collapsible div element in HTML without using any Javascript.

Related Posts