JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div style="height: 185px; width: 185px; border: 2px solid #b5b3b3;">
		<div class="detukolas" id="slider">
			<p>Бла-бла-бла-бла-бла ....</p>
		</div>
	</div>

	<button onclick="document.getElementById('slider').classList.toggle('closed');">Переключатель</button>

CSS

.detukolas {
    overflow-y: hidden;
    max-height: 185px;
    -webkit-transition-property: all;
    -webkit-transition-duration: .5s;
    -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    -moz-transition-property: all;
    -moz-transition-duration: .5s;
    -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    -ms-transition-property: all;
    -ms-transition-duration: .5s;
    -ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    background: #273e80;
    height: 185px;
    width: 180px;
    color: #f9efef;
    padding: 0px 0px 0px 5px;
}

		.detukolas.closed {
			max-height: 0;
		}


input[type='submit'], button, .button, .pagination a, .actions a, .green-button, #comment-form input[type='submit'] {
    background: #f9f9f9;
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid #eee;
    margin: 0 9px 0 0;
    text-decoration: none;
    cursor: pointer;
    color: #07a;
    margin-bottom: 10px;
}