2

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

3
  • все работает как и надо для аккордиона....или что ты имеешь в виду под понятием "все элементы сворачиваются"? Commented 6 авг. 2018 в 15:19
  • @СергейПетрашко ,TS хочет что бы при клике на следующий не развернутый элемент, уже развернутые элемент оставались таковыми. Commented 6 авг. 2018 в 15:41
  • На css такого не сделаешь.
    – midia
    Commented 6 авг. 2018 в 16:03

1 ответ 1

0

Для подобных вещей можно использовать чекбоксы, label с атрибутом for, css-псевдокласс :checked и соседний селектор + .

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>

2
  • А если вдруг захочется снова сделать только один открытый таб - заменить чекбоксы на радиокнопки с одинаковым name.
    – zhurof
    Commented 7 авг. 2018 в 9:43
  • Спасибо тебе большое
    – user300933
    Commented 7 авг. 2018 в 11:16

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.