Плавный аккордеон js

308
21 февраля 2018, 12:06

Как сделать плавный раскрывающийся аккордеон. Подразумеваю что регулируется установкой высоты блока и св-ом трансишн. Не давайте рыбу, напиши словами чтобы сам сделал.

var btn_title = document.querySelectorAll('.test_title'); 
var disc = document.querySelectorAll('.test_disc'); 
 
for (var i = 0; i < btn_title.length; i++) { 
  btn_title[i].addEventListener('click', fun_open); 
 
  function fun_open(event) { 
    for (var i = 0; i < btn_title.length; i++) { 
      disc[i].classList.remove('test_disc_show'); 
      if (btn_title[i] == event.currentTarget) { 
        disc[i].classList.toggle('test_disc_show'); 
      } 
    } 
 
  } 
 
}
html .test { 
  height: 1000px; 
} 
 
html .test_title { 
  width: 180px; 
  height: 30px; 
  background: red; 
  border: 1px solid black; 
} 
 
html .test_disc { 
  width: 180px; 
  height: 80px; 
  background: blue; 
  display: none; 
  border: 1px solid black; 
} 
 
html .test_disc_show { 
  display: block; 
  transition: all 0.9s; 
}
<div class="test"> 
  <div class="test_title test_title_one">test_title test_title_one</div> 
  <!-- /.test_title --> 
  <div class="test_disc test_disc_one">test_disc test_disc_one</div> 
  <!-- /.test_disc --> 
  <div class="test_title test_title_two">test_title test_title_two</div> 
  <!-- /.test_title --> 
  <div class="test_disc test_disc_two">test_disc test_disc_two</div> 
  <!-- /.test_disc --> 
  <div class="test_title test_title_one">test_title test_title_one</div> 
  <!-- /.test_title --> 
  <div class="test_disc test_disc_one">test_disc test_disc_one</div> 
  <!-- /.test_disc --> 
  <div class="test_title test_title_two">test_title test_title_two</div> 
  <!-- /.test_title --> 
  <div class="test_disc test_disc_two">test_disc test_disc_two</div> 
  <!-- /.test_disc --> 
</div> 
<!-- /.test -->

Answer 1

var btn_title = document.querySelectorAll('.test_title'); 
var disc = document.querySelectorAll('.test_disc'); 
 
for (var i = 0; i < btn_title.length; i++) { 
  btn_title[i].addEventListener('click', fun_open); 
 
  function fun_open(event) { 
    for (var i = 0; i < btn_title.length; i++) { 
      disc[i].classList.remove('test_disc_show'); 
      if (btn_title[i] == event.currentTarget) { 
        disc[i].classList.toggle('test_disc_show'); 
      } 
    } 
 
  } 
 
}
html .test { 
  height: 1000px; 
} 
 
html .test_title { 
  width: 180px; 
  height: 30px; 
  background: red; 
  border: 1px solid black; 
} 
 
html .test_disc { 
  overflow: hidden; 
  width: 180px; 
  height: 0; 
  background: blue; 
  border: 1px solid black; 
  transition: all 0.9s; 
} 
 
html .test_disc_show { 
  height: 80px; 
  transition: all 0.9s; 
}
<div class="test"> 
  <div class="test_title test_title_one">test_title test_title_one</div> 
  <!-- /.test_title --> 
  <div class="test_disc test_disc_one">test_disc test_disc_one</div> 
  <!-- /.test_disc --> 
  <div class="test_title test_title_two">test_title test_title_two</div> 
  <!-- /.test_title --> 
  <div class="test_disc test_disc_two">test_disc test_disc_two</div> 
  <!-- /.test_disc --> 
  <div class="test_title test_title_one">test_title test_title_one</div> 
  <!-- /.test_title --> 
  <div class="test_disc test_disc_one">test_disc test_disc_one</div> 
  <!-- /.test_disc --> 
  <div class="test_title test_title_two">test_title test_title_two</div> 
  <!-- /.test_title --> 
  <div class="test_disc test_disc_two">test_disc test_disc_two</div> 
  <!-- /.test_disc --> 
</div> 
<!-- /.test -->

Answer 2

если вы уверены что текста будут не большого размера, то 

.test_disc {
  max-height: 0;
  transition: all 0.9s;
  overflow: hidden;
}
.test_disc.test_disc_show {
  max-height: приблизительное_значение_с_запасом px;
}

ну или вообще расставлять высоту js... Других вариантов при таком подходе не вижу

READ ALSO
kartik daterangepicker ограничить выбор дат в виджете
PHP

kartik daterangepicker ограничить выбор дат в виджете

Подскажите кто сталкивался, знаетЕсть виджет от картика(daterangepicker), нужно сделать так, чтобы можно было выбрать любой день за последний месяц(последним...

 227
kohana ajax php
PHP

kohana ajax php

изучаю кохану,хочел научится использовать кохану+аякс вместе, взял пример хотел разобрать( пример на пхп+аякс прекрасно работает) , перенес...

 181
остановить скрипт php из javascript
PHP

остановить скрипт php из javascript

Как прекратить или остановить выполнение функции php из javascript?

 197
Как сделать редирект php в такой стуации?
PHP

Как сделать редирект php в такой стуации?

На сервере есть 2 папки:

 243