0

Подскажите, пожалуйста, как сделать аккордеон подобного плана, в тупик ставит не только код для javascript, но и что писать в html и css тоже не понимаювведите сюда описание изображения

5
  • уточните пожалуйста, что именно Вам непонятно? маловероятно, чтобы все было непонятно.
    – Alex
    15 окт 2016 в 22:45
  • нужно создать три блока почти идентичных, а потом в javascript сделать так, чтобы при нажатии на один остальные становились скрытыми? вот код в javascript для меня и неясен
    – Anastasiia
    15 окт 2016 в 22:47
  • Вам на javascript или на Jquery тоже подойдет?
    – Alex
    15 окт 2016 в 22:48
  • лучше чистый javascript
    – Anastasiia
    15 окт 2016 в 22:52
  • я когда-то писал аккордеон на чистом JS.. Посмотрите код - он совсем краткий, а вот тут простой пример 15 окт 2016 в 23:15

1 ответ 1

0

function toogle(e) {
  var elems = document.getElementsByClassName('test');
  for (var i = 0; i < elems.length; i += 1) {
    elems[i].childNodes[3].style.display = 'none';
  }
  e.childNodes[3].style.display = 'block';
}
div.test {
  width: 300px;
  margin-bottom: 5px;
  border: 1px solid #cccccc;
}
div.test>.header {
  padding: 5px;
  height: 40px;
  line-height: 40px;
  background-color: #cccccc;
}
div.test>.text {
  display:none;
  padding: 5px;
  height: 70px;
  line-height: 70px;
  background-color: #f2f2f2;
}
<div class="test" onclick="toogle(this)">
  <div class="header">test</div>
  <div class="text">test1 test1 test1 test1 test1</div>
</div>
<div class="test" onclick="toogle(this)">
  <div class="header">test</div>
  <div class="text">test2 test2 test2 test2 test2</div>
</div>
<div class="test" onclick="toogle(this)">
  <div class="header">test</div>
  <div class="text">test3 test3 test3 test3 test3</div>
</div>

7
  • рады помочь) однако помните, что комментарии предназначены только для уточнения вопроса/ответа, а не для слов благодарности хоть они и приятны). Не благодарите автора ответа в комментариях. Чтобы поблагодарить автора ответа, проголосуйте за ответ или отметьте его как решение.
    – Alex
    15 окт 2016 в 23:24
  • а что добавить в код, чтобы при запуске страницы элементы аккордеона не были в развернутом состоянии?
    – Anastasiia
    16 окт 2016 в 6:57
  • @Anastasiia так они сейчас в свернутом положении(элементы text каждого блока). Или Вы другое имеете ввиду?
    – Alex
    16 окт 2016 в 8:29
  • в вашем примере все в свернутом, я скопировала ваш код, заменила только в var elems = document.getElementsByClassName('test'); test на свое значение, но при загрузке страницы все блоки развернуты, необходимо нажать на один из них, чтобы он остался, а остальные свернулись
    – Anastasiia
    16 окт 2016 в 9:16
  • @Anastasiia это потому, что Вы стили не изменили. В скопированных стилях замените .test на Ваше значение. Говоря более просто, пропишите стиль display:none; для Вашего значения класса.
    – Alex
    16 окт 2016 в 9:54

Ваш ответ

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

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