I have an accordion on pure CSS. And there is one problem. When I click on a certain element of the accordion, all the elements are folded. Help me solve the problem. Here is the code. HTML and CSS

body { margin: 0; padding: 0; } .container { width: 100%; max-width: 400px; margin: 50px auto; } .accordion { width: 100%; padding: 0; margin: 0; list-style-type: none; } .accordion-header { display: block; padding: 15px 20px; background: #bbb; color: #fff; text-decoration: none; font-size: 1.2em; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0,0,0,.1); margin-bottom: 5px; font-family: sans-serif; } .accordion-content p { margin: 0 0 20px 0; } .accordion-content { padding: 0; height: 0; overflow: hidden; } .accordion-content:target { height: auto; padding: 20px; } 
  <ul class="accordion"> <li> <a href="#first" class="accordion-header">Первый</a> <div class="accordion-content" id="first"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur porro, quo reprehenderit impedit suscipit obcaecati necessitatibus quam praesentium accusamus, sit blanditiis deleniti doloribus placeat voluptas iure, autem tempore, mollitia. Quos.</p> </div> </li> <li> <a href="#second" class="accordion-header">Второй</a> <div class="accordion-content" id="second"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur porro, quo reprehenderit impedit suscipit obcaecati necessitatibus quam praesentium accusamus, sit blanditiis deleniti doloribus placeat voluptas iure, autem tempore, mollitia. Quos.</p> </div> </li> <li> <a href="#third" class="accordion-header">Третий</a> <div class="accordion-content" id="third"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur porro, quo reprehenderit impedit suscipit obcaecati necessitatibus quam praesentium accusamus, sit blanditiis deleniti doloribus placeat voluptas iure, autem tempore, mollitia. Quos.</p> </div> </li> </ul>

  • Everything works as it should for an accordion .... or what do you mean by the term "all elements are rolled up"? - Sergey Petrashko
  • @ Sergey Petrashko, TS wants to, when clicking on the next unwrapped element, the already unfolded element will remain as such. - Broouzer King
  • On css this can not be done. - midia 4:03 pm

1 answer 1

For such things, you can use checkboxes, a label with an attribute for , css-pseudo-class :checked and the next selector + .

 body { margin: 0; padding: 0; } .container { width: 100%; max-width: 400px; margin: 50px auto; } .accordion { width: 100%; padding: 0; margin: 0; list-style-type: none; } .accordion-header { display: block; padding: 15px 20px; background: #bbb; color: #fff; text-decoration: none; font-size: 1.2em; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0,0,0,.1); margin-bottom: 5px; font-family: sans-serif; cursor:pointer; } .accordion-input{ position:absolute; z-index:-1; margin:0; opacity:0; } .accordion-content p { margin: 0 0 20px 0; } .accordion-content { padding: 0; height: 0; overflow: hidden; } :checked + .accordion-content { height: auto; padding: 20px; } 
 <ul class="accordion"> <li> <label for="first" class="accordion-header">Первый</label> <input type="checkbox" class="accordion-input" id="first"/> <div class="accordion-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur porro, quo reprehenderit impedit suscipit obcaecati necessitatibus quam praesentium accusamus, sit blanditiis deleniti doloribus placeat voluptas iure, autem tempore, mollitia. Quos.</p> </div> </li> <li> <label for="second" class="accordion-header">Второй</label> <input type="checkbox" class="accordion-input" id="second" /> <div class="accordion-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur porro, quo reprehenderit impedit suscipit obcaecati necessitatibus quam praesentium accusamus, sit blanditiis deleniti doloribus placeat voluptas iure, autem tempore, mollitia. Quos.</p> </div> </li> <li> <label for="third" class="accordion-header">Третий</label> <input type="checkbox" class="accordion-input" id="third" /> <div class="accordion-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur porro, quo reprehenderit impedit suscipit obcaecati necessitatibus quam praesentium accusamus, sit blanditiis deleniti doloribus placeat voluptas iure, autem tempore, mollitia. Quos.</p> </div> </li> </ul>

  • And if you suddenly want to make only one open tab again, replace checkboxes with radio buttons with the same name . - zhurof
  • Thank you so much - Artem Dikarev