In this case, to make the description unfolded smoothly?


Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
12 views
In this case, to make the description unfolded smoothly? I tried using transition, but for some reason it won't work.

https://codepen.io/malinosky/pen/XqgPOL
by | 12 views

2 Answers

0 like 0 dislike
So
.faq > dd { display: none; margin-left: 35px; margin-bottom: 35px; }


$('.faq > dt > a').click(function(e){ e.preventDefault(); $(this).parent('dt').next().slideToggle(); });


Or so
.faq > dd { margin-left: 35px; transition: .5s max-height; overflow: hidden; max-height: 1px; } .faq > dt.active + dd { max-height: 100px; }
by
0 like 0 dislike
The display property is not animated,
1) Can ask the hidden elements of zero height and the margins these properties will be animated, but leave dispaly: block;
2) In the library jq is ready methods slideUp(), slideDown() and slideToggle() - Google, just what you need
by

Related questions

0 like 0 dislike
3 answers
0 like 0 dislike
1 answer
asked Jun 1, 2019 by Breeze1
0 like 0 dislike
3 answers
asked Apr 25, 2019 by leni_m
0 like 0 dislike
2 answers
110,608 questions
257,187 answers
0 comments
40,796 users