JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="box">
<a href="#" class="button">
кнопка
</a>
<div class="holder dn">
<div class="frame">
<div class="line-functional__content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam ipsum ex adipisci, aut alias repellat saepe ullam aliquam perferendis aspernatur reiciendis iste impedit similique vel in dignissimos optio? Inventore eos non reiciendis recusandae laudantium provident vitae cupiditate odio porro, eum officia quam deleniti illum accusamus debitis, rerum ea tempore expedita. Fugiat deserunt dolor vero accusantium repellat blanditiis voluptates officiis quia ab deleniti, facilis soluta, tempore iste facere cupiditate qui inventore maxime repellendus omnis quaerat reiciendis sint eligendi nemo! Non cumque suscipit ex a quibusdam impedit nostrum praesentium pariatur odit aperiam, reiciendis rem odio, ipsa nobis. Quo distinctio expedita porro architecto.
</div>
</div>
</div>
</div>
CSS
.dn {
display: none;
}
.dn-db {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: .35s;
-o-transition-duration: .35s;
transition-duration: .35s;
-webkit-transition-property: height,visibility;
-o-transition-property: height,visibility;
transition-property: height,visibility;
}
.db {
display: block;
}
JavaScript
$('.button').on('click', function() {
var _this = $(this).parents('.box').find('.holder');
var holder_Height = 1;
if ( _this.hasClass('dn-db') ) {
return false;
}
if ( _this.hasClass('dn') ) {
_this.css('height', "auto");
holder_Height = _this.height();
_this.css('height', 0).delay(1).queue(function(next){
$(this).css('height', holder_Height);
next();
});
_this.addClass('dn-db').delay(350).queue(function(next){
$(this).removeClass('dn-db');
next();
});
_this.addClass('db');
_this.removeClass('dn');
} else {
_this.css('height', 0);
_this.addClass('dn-db').delay(350).queue(function(next){
$(this).removeClass('dn-db');
next();
});
setTimeout(function() {
_this.removeClass('db');
}, 350);
_this.addClass('dn');
}
});