<div class="wrapper">
<p class="click is-click">click</p>
<p class="text is-slideToggle">slideToggleText slideToggleText slideToggleText slideToggleText slideToggleText slideToggleText slideToggleText slideToggleText</p>
</div>
.click{
width: 200px;
padding: 10px 0;
margin: 20px auto 0;
background: #ff0000;
border-radius: 10px;
text-align: center;
color: #fff;
font-size: 24px;
font-weight: bold;
cursor: pointer;
}
.click:hover{
opacity: 0.8;
}
.text{
display: none;
width: 200px;
padding: 10px 20px;
margin: 10px auto 0;
background: #eee;
text-align: center;
font-size: 12px;
}
const $click = $('.is-click');
$click.on('click', function(){
slideToggleAnime();
});
function slideToggleAnime(){
const $slideToggle = $('.is-slideToggle');
$slideToggle.stop().slideToggle();
};
This Pen doesn't use any external CSS resources.