Let's make FAQ sections (no JS)

When it comes to designing user-friendly and informative websites, Frequently Asked Questions (FAQ) sections play a vital role in providing answers to common queries. With HTML's <details> tag and a bit of CSS, you can create interactive and collapsible FAQ sections that enhance user experience. In this guide, we will walk you through the process of building a clean and functional FAQ section.

HTML <details> Tag: The Foundation

The HTML <details> element is used to create a disclosure widget that can be toggled open and closed. Each <details> element typically contains a <summary> element, which serves as the visible heading for the section.

Here's a basic structure for an FAQ item:

<details>
  <summary>Question goes here?</summary>
  <p>Answer goes here.</p>
</details>

Building the FAQ Section

Let's create a simple FAQ section with a few questions and answers. Here's an example:

<div class="faq-section">
  <details>
    <summary>How do I create an account?</summary>
    <p>Creating an account is easy. Click on the "Sign Up" button, fill in the required information, and you're all set!</p>
  </details>

  <details>
    <summary>Can I reset my password?</summary>
    <p>Yes, you can reset your password by clicking on the "Forgot Password" link on the login page. Follow the instructions sent to your email.</p>
  </details>

  <!-- Add more FAQ items here -->
</div>

Styling with CSS

To make your FAQ section visually appealing and user-friendly, you can apply some CSS styles. Here's an example of how you can style the FAQ section:

html {
  font-family: system-ui;
}


/* Style the summary element */
details summary {
  cursor: pointer;
  font-weight: bold;
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin: 10px 0;
  list-style: none;
  position: relative;
}

/* Style the content inside the details element */

details summary::after {
  content: '+';
  font-weight: 700;
  display: inline-block;
  position: absolute;
  right: 10px;
  margin-top: -7.5px;
  font-size: 1.5rem;

}

details[open] summary::after {
  rotate: 45deg;
  right: 7.5px;
}


/* Show the content when the details is open */

In this CSS code:

• We style the <summary> element to give it a button-like appearance.
• We remove the default arrow before the summary using list-style
• We made a plus sign (+) to make it different than the default
• And make it rotate when the detail is opened.

Conclusion

With the HTML <details> tag and some CSS styling, you can easily create interactive and visually appealing FAQ sections for your website. Users can click on questions to reveal answers, keeping the content organized and accessible. Feel free to customize the styles and add more questions and answers to meet your specific needs.

Comments

[Keith Solomon]

I use this pattern all the time. The only down side (which is a minor issue, and may not affect every use case) is that you can’t have it close an open one when you open another question without using some minor JavaScript.