JSFiddle - React, Tailwind, and code Playground

by apasaja

HTML

<div>BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE BYE </div>
<div class="reveal">Click Here to READ MORE...</div>
<div style="display:none;">HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO</div>
<div class="collapse" style="display:none;">Collapse Text</div>

CSS

.reveal, .collapse {
    cursor: pointer;
    margin: 5px 0;
}
.reveal:hover, .collapse:hover {
    color: #44F;
}

JavaScript

$('.reveal').click(function() {
    $(this).slideUp(100);
    $(this).next().slideToggle();
    $(".collapse").slideDown(100);
});
$('.collapse').click(function() {
    $(this).slideUp(100);
    $(this).prev().slideToggle();
    $(".reveal").slideDown(100);
});