У меня есть аккордеон на чистом 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>