CSS to achieve single-select folding menu function

Don’t introduce a front-end UI framework unless it is absolutely necessary, because HTML5 and CSS3 can already implement most of the functions, such as the previous issue of "CSS to achieve the simplest switch"

However, many people's thinking is still stuck in the web2.0 era, using various libraries to make UI, which leads to bloated web pages. Today I will teach you how to implement a single-select folding menu using pure CSS, without the need for JavaScript. Accordions are similar to tabs, logically they are both single-select panels, except that accordions are generally stacked vertically, while tabs are arranged horizontally.

Tabs:

Since it is a single choice, you can use <input type="radio">radio button to implement it. First, the parent element of these radio button groups uses <form>, because <form> can monitor the changes of the button group, and can also directly get the RadioNodeList list and change value through the name attribute, which is very convenient and there is no need to set other CSS selectors. So the html of this folding menu is as follows:

<form id="form">
    <input type="radio" name="collapse">
    <div></div>
 
    <input type="radio" name="collapse">
    <div></div>

    <input type="radio" name="collapse">
    <div></div>
</form>

Set an id for the <form> so that it can be found directly through window[id]. The name attribute of each <radio> must be consistent, and then get the radio group through form[name]. form[name].value is the value of the currently selected button, which is the title of the collapse button. Each <radio> is followed by a <div> which is the content of the expanded menu. But the default <radio> is like this:

Or first use appearance: none to disable the default style as shown above, then use ::before as the name on the left side of the button (read the value attribute), ::after as the small arrow on the right side (the characters > and v), and use the :checked attribute to indicate the collapsed state.

input[type="radio"] {       
      cursor: pointer;
      appearance: none;
      display: block;
}
 
 
input[type="radio"]::before {
      content: attr(value);
}
 
 
input[type="radio"]::after {       
      float: right;
      content:">";
}
 
 
input[type="radio"]:checked::after {
      content: "v";
}

For <div>, it is hidden by default, and only the <div> behind the selected <radio> is displayed. As for the folding animation, it depends on your needs. For me, it would be more refreshing without animation.

input[type="radio"] + div {
      display: none;
}
 
 
input[type="radio"]:checked + div {
      display: block;
}

The above is the basic layout, and with a little bit of extra styling, it becomes:

However, due to the characteristics of <radio>, the menu cannot be reversed. After the menu is expanded, you can only collapse it by clicking another menu item. Of course, this is fine. If you must implement the function of reverse menu selection, you need to record the last expanded menu item, and each time a click event occurs, determine whether it is a repeated click:

// for every <radio>
radio.onclick = () => {
  if (window.radio === radio) {
    input.checked = false;
    window.radio = null;
  } else window.radio = radio;
};

This implements the inverse selection capability of the single-select folding menu:

By the way, the messy text in the picture is the result of the original text being scrambled (for privacy reasons). You can scramble a string using the following code:

string.split('').sort(() => Math.random() - 0.5).join('')

This is the end of this article about how to implement the single-choice folding menu function with CSS. For more relevant CSS single-choice folding menu content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!