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

418

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>