JSFiddle - React, Tailwind, and code Playground

Rollupper Boxes

by bitstarr

HTML

<div class="module rollUpper">
    <div class="caption">
        <span>Überschrift</span>
        <span class="trigger"></span>
    </div>
    <div class="body">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Aliquam eget enim id neque aliquet porttitor. Suspendisse
        nisl enim, nonummy ac, nonummy ut, dignissim ac, justo.
        Aenean imperdiet semper nibh. Vivamus ligula. In in ipsum
        sed neque vehicula rhoncus. Nam faucibus pharetra nisi.
        Integer at metus. Suspendisse potenti. Vestibulum ante
        ipsum primis in faucibus orci luctus et ultrices posuere
        cubilia Curae; Proin quis eros at metus pretium elementum.
    </div>
</div>
<div class="module rollUpper">
    <div class="caption">
        <span>Überschrift</span>
        <span class="trigger"></span>
    </div>
    <div class="body">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Aliquam eget enim id neque aliquet porttitor. Suspendisse
        nisl enim, nonummy ac, nonummy ut, dignissim ac, justo.
        Aenean imperdiet semper nibh. Vivamus ligula. In in ipsum
        sed neque vehicula rhoncus. Nam faucibus pharetra nisi.
        Integer at metus. Suspendisse potenti. Vestibulum ante
        ipsum primis in faucibus orci luctus et ultrices posuere
        cubilia Curae; Proin quis eros at metus pretium elementum.
    </div>
</div>

CSS

.module {border: 1px solid #000; width:400px;padding:5px;margin:5px}
.rollUpper .caption {background:#000;color:#fff;overflow:hidden;padding:4px;margin-bottom:3px}
.rollUpper .trigger {background:red;width:20px;height:20px;float:right;margin-right:20px;cursor:pointer}
.rolledUp .trigger {background:green}

JavaScript

$(function() {
    $('div.rollUpper div.caption span.trigger').click(function() {
        $(this)
            .closest('div.rollUpper')
            .find('div.body')
            .toggle(400, function() {
                $(this)
                    .closest('div.rollUpper')
                    .toggleClass('rolledUp', $(this).is(':hidden'));
        });
    });
});