JSFiddle - React, Tailwind, and code Playground

by stevebeauge

HTML

<div class="foldable"><span>
     <h1 class="foldable-title">test</h1>
    </span>
    <div class="foldable-content">Lorem Elsass ipsum chambon Yo dû. consectetur amet dolor porta und quam. senectus hopla semper mamsell amet, kartoffelsalad ac id, tellus dignissim tchao bissame geïz Spätzle tristique purus gewurztraminer sit varius blottkopf, eget auctor, Oberschaeffolsheim salu ac ante DNA, sagittis libero, jetz gehts los réchime Mauris Racing. Pellentesque id Coopé de Truchtersheim tellus sed wurscht Morbi Hans gal Kabinetpapier rhoncus merci vielmols barapli ch'ai knack elementum sit s'guelt turpis, Miss Dahlias turpis lacus risus, kougelhopf nullam in, non Pfourtz !</div>
</div>
<div class="foldable foldable-folded">
     <h3 class="foldable-title">test</h3>

    <div class="foldable-content">tellus rossbolla DNA, picon bière Morbi sed ullamcorper sit so gewurztraminer Salu bissame tchao bissame geïz non morbi Oberschaeffolsheim ornare ac elit dignissim gal turpis sit Pfourtz ! purus hoplageiss rhoncus Miss Dahlias condimentum blottkopf, amet vulputate Carola merci vielmols tristique Pellentesque munster placerat salu Racing. knack bissame ante leverwurscht eleifend Huguette Christkindelsmärik s'guelt amet quam. baeckeoffe jetz gehts los Mauris lotto-owe hopla hopla kartoffelsalad hopla réchime Richard Schirmeck météor mamsell dui turpis, kuglopf Gal. Heineken Kabinetpapier .</div>
</div>

CSS

.foldable .foldable-title {
    cursor:pointer;
}
.foldable.foldable-folded .foldable-content {
    display:none;
}
.foldable.foldable-unfolded .foldable-content {
    display:inherit;
}

JavaScript

(function ($) {
    $.fn.foldable = function () {
        this.each(function (options) {
            var opts = $.extend({}, $.fn.foldable.defaults, options);

            var $this = $(this);
            var $title = $this.find(opts.title);
            var $content = $this.find(opts.content);
            if (!$this.hasClass(opts.foldedClass) && !$this.hasClass(opts.unfoldedClass)) $this.addClass(opts.unfoldedClass);
            $title.click(function () {
                $content.slideToggle(function () {
                    $this.toggleClass(opts.unfoldedClass).toggleClass(opts.foldedClass);
                });
            });
        });
        return this;
    };

    $.fn.foldable.defaults = {
        title: ".foldable-title",
        content: ".foldable-content",
        foldedClass: "foldable-folded",
        unfoldedClass: "foldable-unfolded"
    };
    $(".foldable").foldable();

})(jQuery);