How to make a smooth drop-down accordion. I imply that it is regulated by the installation of the height of the block and its own transcription. Do not give the fish, write the words that he did.

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 -->

  • display: none; transition-ну can not be - Air

2 answers 2

 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 -->

    if you are sure that the text will not be large, then

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

    well, or even to set the height of js ... I see no other options with this approach