1

Есть вот такой аккордеон. Проблема в том что контент аккордеона появляется снаружи блока, никак не получается решить задачу, Прошу помочь чтобы при нажатии на заголовок аккордеона контент появлялся внутри блока заголовка, заранее спасибо! Пример вот тут https://www.domovenok.ru/

var accordions = document.getElementsByClassName("accordion");

for (var i = 0; i < accordions.length; i++) {
  accordions[i].onclick = function() {
    this.classList.toggle('is-open');

    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      // accordion is currently open, so close it
      content.style.maxHeight = null;
    } else {
      // accordion is currently closed, so open it
      content.style.maxHeight = content.scrollHeight + "px";
    }
  }
}
button.accordion {
  width: 100%;
  background-color: #fff;
  border: 1px solid #cbc9c9;
  outline: none;
  text-align: left;
  padding: 30px 60px 30px 30px;
  border-radius: 6px;
  font-size: 18px;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s linear;
}

button.accordion:after {
  content: '\f055';
  font-family: "fontawesome";
  font-size: 14px;
  float: right;
}

button.accordion.is-open:after {
  content: '\f056';
}

button.accordion:hover,
button.accordion.is-open {
  background-color: #fff;
}

.accordion-content {
  background-color: white;
  padding: 0 20px;
  margin: 10px 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
}
<div class="container">
  <button class="accordion">Адаптивное окно</button>
  <div class="accordion-content">
    <p>
      Попадание в руки Fortbyte 59 займет немного работы. Мало того, что Fortbyte спрятан в зоне горячего падения, но и смайлик, необходимый для его разблокировки, также находится довольно высоко на Battle Pass.
    </p>
    <p>
      В этом руководстве мы рассмотрим все, что вам нужно знать, чтобы разблокировать Fortbyte 59 и добавить его в свою коллекцию в Fortnite Season 9.
    </p>
  </div>


  <button class="accordion">
                            Адаптивное модальное окно</button>
  <div class="accordion-content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
    </p>
  </div>


  <button class="accordion">
                            Табы в виде аккордеона на CSS
                        </button>
  <div class="accordion-content">
    <p>
      Попадание в руки Fortbyte 59 займет немного работы. Мало того, что Fortbyte спрятан в зоне горячего падения, но и смайлик, необходимый для его разблокировки, также находится довольно высоко на Battle Pass. В этом руководстве мы рассмотрим все, что вам
      нужно знать, чтобы разблокировать Fortbyte 59 и добавить его в свою коллекцию в Fortnite Season 9.
    </p>
  </div>
</div>

1 ответ 1

0

var accordions = document.getElementsByClassName("accordion");

for (var i = 0; i < accordions.length; i++) {
  accordions[i].onclick = function() {
    this.classList.toggle('is-open');

    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      // accordion is currently open, so close it
      content.style.maxHeight = null;
    } else {
      // accordion is currently closed, so open it
      content.style.maxHeight = content.scrollHeight + "px";
    }
  }
}
.item {
  margin: 5px 0;
  padding: 10px;
  border: 1px solid #cbc9c9;
  border-radius: 6px;
}

button.accordion {
  outline: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-size: 18px;
  color: #333;
  background-color: #fff;
  transition: background-color 0.2s linear;
}

button.accordion:after {
  float: right;
  content: '\f055';
  font-family: "fontawesome";
  font-size: 14px;
}

button.accordion.is-open:after {
  content: '\f056';
}

button.accordion:hover,
button.accordion.is-open {
  background-color: #fff;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  background-color: white;
  transition: max-height 0.2s ease-in-out;
}
<div class="container">

  <div class="item">
    <button class="accordion">Адаптивное окно</button>
    <div class="accordion-content">
      <p>Попадание в руки Fortbyte 59 займет немного работы. Мало того, что Fortbyte спрятан в зоне горячего падения, но и смайлик, необходимый для его разблокировки, также находится довольно высоко на Battle Pass.</p>
    </div>
  </div>

  <div class="item">
    <button class="accordion">Адаптивное модальное окно</button>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?</p>
    </div>
  </div>

  <div class="item">
    <button class="accordion">Табы в виде аккордеона на CSS</button>
    <div class="accordion-content">
      <p>Попадание в руки Fortbyte 59 займет немного работы. Мало того, что Fortbyte спрятан в зоне горячего падения, но и смайлик, необходимый для его разблокировки, также находится довольно высоко на Battle Pass. В этом руководстве мы рассмотрим все.</p>
    </div>
  </div>
  
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.