JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/js/uikit.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<section class="uk-padding">
<button id="toggle">
Toggle with jQuery
</button>
<button id="toggle2" uk-toggle="target: .div4; animation: slide-toggle">
Toggle with UIkit
</button>
<div class="div1">
Toggle with jQuery
</div>
<div class="div2">
Nullam sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Fusce egestas elit eget lorem. Nunc interdum lacus sit amet orci.
Sed fringilla mauris sit amet nibh. Maecenas malesuada. Maecenas malesuada. Nunc interdum lacus sit amet orci.
Fusce neque. In turpis. Curabitur a felis in nunc fringilla tristique. Quisque malesuada placerat nisl.
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Donec venenatis vulputate lorem. Nullam tincidunt adipiscing enim. Nunc nec neque.
</div>
<div class="div3">
Toggle with UIkit
</div>
<div class="div4">
Nullam sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Fusce egestas elit eget lorem. Nunc interdum lacus sit amet orci.
Sed fringilla mauris sit amet nibh. Maecenas malesuada. Maecenas malesuada. Nunc interdum lacus sit amet orci.
Fusce neque. In turpis. Curabitur a felis in nunc fringilla tristique. Quisque malesuada placerat nisl.
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Donec venenatis vulputate lorem. Nullam tincidunt adipiscing enim. Nunc nec neque.
</div>
</section>
CSS
div {
border: 1px solid black;
}
.div1, .div3 {
background: red;
}
.div2 {
background: white;
}
.div4 {
overflow: hidden;
height: 200px;
transition-property: height;
transition-duration: 0.25s;
transition-timing-function: ease-in-out;
}
.slide-toggle.uk-animation-enter {
height: 200px;
}
.slide-toggle.uk-animation-leave {
height: 0px;
}
JavaScript
$('#toggle').click(function() {
$('.div2').slideToggle();
});