How to create an Easy Accords Menu with HTML

by SkillAiNest

Extra Menos are present everywhere on the web because users want sharp answers and smooth navigation.

They help create a clean, systematic and user -friendly interface. Many developers still reach the JavaScript, which includes complicated complications to their projects.

Html

The element solves the problem with its built -in disclosure widget that togel the display of content using only a few lines of HTML and Optional CSS.

In this article, we will see a general questionable agreement built using

. You can see the final project Here.

The table of content

What is HTML?

Element?

Html

The element is a revealing widget that allows you to hide and display the content with the same click. Think of it as a local agreement that comes in HTML.

The most common use issue for the contract is the most frequently asked questions (general questionnaire) section on many sites. If you have seen or discussed the general questionnaire, this is a chance to use

.

It has two main ingredients:

In addition to 💡 summaryMay add any HTML text element inside you

Container

0d6bbae-D68D-400F-9209-A83FEEC273b7

The above -mentioned picture shows the matter of real -life use

On the Apple website. In a later part, we will learn about the browsers who support it.

When using

More than a replacement for JavaScript

Unlike JavaScript -based contracts that weigh in your project,

The same functionality offers with minimal burden and better performance. It also offers built -in keyboard navigation and screen reader support.

Select

When more than contracts developed from JavaScript:

  • Simple contract or build parts of the general questionnaire

  • Leak, Performance and SEO is a priority

  • You want to avoid Javascript dependent

Made with a general questionnaire

Element

Here looks like our example project:

مثال کے طور پر <تفصیلات> Project using element” class=”image–center mx-auto” width=”600″ height=”400″ loading=”lazy”/></p><p>This design is by <a target=Front and Servant (And you can check the project Codification,

You need to follow it, you need basic knowledge of HTML and CSS. Since this article is the focus of attention

We will not emphasize too much on the starting HTML and CSS code (available on the above codification). Instead, we will see a general questionnaire question with the answer to how

Works

How to use

To make a contract with

Element, you need both

And

The elements, as shown in the Starter Code below.

<details>
  <summary>What is Frontend Mentor, and how will it help me?summary>
  <p>Frontend Mentor offers realistic coding challenges to help developers improve their frontend coding skills with projects in HTML, CSS, and JavaScript. It’s suitable for all levels and ideal for portfolio building.p>
details>

After running the code above, the GIF result below will be. With less than five lines of the HTML code, we already have a contract.

25c66453-71BA-469c-8DD2-0F1b8e3b9d7f

Styling

Now, let’s focus on turning our basic agreement into something that wears something (basic styles can be found on the Lord. Codification) First, we will add icons to SVG

Made them with classes (closed icon and open icon).

<details>
  <summary>What is Frontend Mentor, and how will it help me?
  <svg class="closed-icon" xmlns="" class="closed-icon" width="30" height="31" viewBox="0 0 30 31" fill="none">
  <path d="M15 3.3125C12.5895 3.3125 10.2332 4.02728 8.22899 5.36646C6.22477 6.70564 4.66267 8.60907 3.74022 10.836C2.81778 13.063 2.57643 15.5135 3.04668 17.8777C3.51694 20.2418 4.67769 22.4134 6.38214 24.1179C8.08659 25.8223 10.2582 26.9831 12.6223 27.4533C14.9865 27.9236 17.437 27.6822 19.664 26.7598C21.8909 25.8373 23.7944 24.2752 25.1335 22.271C26.4727 20.2668 27.1875 17.9105 27.1875 15.5C27.1835 12.2689 25.8981 9.17131 23.6134 6.88659C21.3287 4.60186 18.2311 3.31653 15 3.3125ZM19.6875 16.4375H15.9375V20.1875C15.9375 20.4361 15.8387 20.6746 15.6629 20.8504C15.4871 21.0262 15.2486 21.125 15 21.125C14.7514 21.125 14.5129 21.0262 14.3371 20.8504C14.1613 20.6746 14.0625 20.4361 14.0625 20.1875V16.4375H10.3125C10.0639 16.4375 9.82541 16.3387 9.64959 16.1629C9.47378 15.9871 9.375 15.7486 9.375 15.5C9.375 15.2514 9.47378 15.0129 9.64959 14.8371C9.82541 14.6613 10.0639 14.5625 10.3125 14.5625H14.0625V10.8125C14.0625 10.5639 14.1613 10.3254 14.3371 10.1496C14.5129 9.97377 14.7514 9.875 15 9.875C15.2486 9.875 15.4871 9.97377 15.6629 10.1496C15.8387 10.3254 15.9375 10.5639 15.9375 10.8125V14.5625H19.6875C19.9361 14.5625 20.1746 14.6613 20.3504 14.8371C20.5262 15.0129 20.625 15.2514 20.625 15.5C20.625 15.7486 20.5262 15.9871 20.3504 16.1629C20.1746 16.3387 19.9361 16.4375 19.6875 16.4375Z" fill="#AD28EB"/>
  svg> 
  <svg class="open-icon" xmlns="" class="open-icon" width="30" height="31" viewBox="0 0 30 31" fill="none">
  <path d="M15 3.3125C12.5895 3.3125 10.2332 4.02728 8.22899 5.36646C6.22477 6.70564 4.66267 8.60907 3.74022 10.836C2.81778 13.063 2.57643 15.5135 3.04668 17.8777C3.51694 20.2418 4.67769 22.4134 6.38214 24.1179C8.08659 25.8223 10.2582 26.9831 12.6223 27.4533C14.9865 27.9236 17.437 27.6822 19.664 26.7598C21.8909 25.8373 23.7944 24.2752 25.1335 22.271C26.4727 20.2668 27.1875 17.9105 27.1875 15.5C27.1841 12.2687 25.899 9.17076 23.6141 6.8859C21.3292 4.60104 18.2313 3.31591 15 3.3125ZM19.6875 16.4375H10.3125C10.0639 16.4375 9.82541 16.3387 9.64959 16.1629C9.47378 15.9871 9.37501 15.7486 9.37501 15.5C9.37501 15.2514 9.47378 15.0129 9.64959 14.8371C9.82541 14.6613 10.0639 14.5625 10.3125 14.5625H19.6875C19.9361 14.5625 20.1746 14.6613 20.3504 14.8371C20.5262 15.0129 20.625 15.2514 20.625 15.5C20.625 15.7486 20.5262 15.9871 20.3504 16.1629C20.1746 16.3387 19.9361 16.4375 19.6875 16.4375Z" fill="#301534"/>
  svg>
  summary>
  <p>Frontend Mentor offers realistic coding challenges to help developers improve their frontend coding skills with projects in HTML, CSS, and JavaScript. It’s suitable for all levels and ideal for portfolio building.p>
details>

In the code below, we customize the disclosure marker by hiding the default arrow and adding a custom icon to the right ::marker Serious element on

. We also compiled the content as empty, which completely removes the marker.


summary {
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
  margin-bottom: 1em;
  padding: 1.5em;

  &::marker {
    content: '';
  }

  &:last-child { 
    margin-bottom: 0; 
  } 

  &:hover { 
    color: var(--text-accent);
    outline: none;
  }
}

p {
  padding-top: 1em;
  color: var(--text-light);
}

details {
  margin-bottom: 1em;

  &:last-child { 
    margin-bottom: 0; 
  }

  .open-icon {
    display: none;
  }

  &(open) {
    .open-icon {
      display: inline;
    }

    .closed-icon {
      display: none;
    }
  }

  .open-icon,
  .closed-icon {
    width: 1.8em; 
    height: 1.8em;
    flex-shrink: 0;
  }
}

The GIF below shows the production of styling our contract with the top CSS code.

3D0333C2-E9D4-4836-8f3b-816513802353

When the page burden to extend the general questionnaire question, add open Character

. This is especially useful for highlighting important information, where the most important general questionnaire is expanded.

<details open>
    <summary>What is Frontend Mentor, and how will it help me?summary>
details>

Browser support and leakage concerns

According to MdnFor, for, for,.

There is a well -established feature that works on many devices and famous browsers (Chrome, Edge, Firefox, and Safari) since January 2020.

33407311-A4DB-47AB-BC9F-16BAAED5D060

Built -in accessible features include customs solutions such as keyboard navigation, screen reader support, and additional javascript in spiritual structures. Ensure even more leakage You can also include qualities like character, area expanded, and ARIA labby.

Conclusion

Without JavaScript, UI elements such as agreements, general questionnaires, or a navigation menu are a powerful but used factor. It is easy to implement and lightweight, and still improve the user’s experience with interactive content.

So, the next time you need to make any breakdown content, keep in mind, keeping in mind, keeping in mind, keeping in mind the accessible and efficiency

And it will definitely make your development life easier.

Here are some helpful resources:

You may also like

Leave a Comment

At Skillainest, we believe the future belongs to those who embrace AI, upgrade their skills, and stay ahead of the curve.

Get latest news

Subscribe my Newsletter for new blog posts, tips & new photos. Let's stay updated!

@2025 Skillainest.Designed and Developed by Pro