JSFiddle - React, Tailwind, and code Playground
HTML
<div class="plus" data-target="expand-me"></div>
<div id="expand-me">
</div>
CSS
.plus:after {
content: '+';
}
.minus:after {
content: '-';
}
#expand-me {
width: 100%;
height: 10px;
background-color: red;
transition: all 0.5s linear;
}
#expand-me.expanded {
height: 300px;
}
JavaScript
$(document).on('click', '.plus, .minus', function() {
var target = this.dataset.target;
$('#'+target).toggleClass('expanded');
$(this).toggleClass('plus minus');
});