Код для аккордеона

416
26 ноября 2016, 18:51

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

Answer 1

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>

READ ALSO
Переключение слайдов в bootstrap

Переключение слайдов в bootstrap

Не понимаю почему сдвигаются вниз кнопки выбора слайдов:

434
Цвет лого как цвет фона

Цвет лого как цвет фона

Есть фиксированная шапкаПри прокручивании сайта лого должно применять цвет фона, на котором оно находится

325
Как в адаптивном сайте с изменяемой высотой футера, прибить его к низу страницы

Как в адаптивном сайте с изменяемой высотой футера, прибить его к низу страницы

Есть адаптивный сайт на bootstrapНа некоторых страницах футер "подпрыгивает" вверх

412
Не применяются стили к классу .active

Не применяются стили к классу .active

Создан блог табуляции

381