How to make a collapsible list in html without JavaScript

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:

details tag, and
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,

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:

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