JSFiddle - React, Tailwind, and code Playground

by Espesen

HTML

<script src="http://esatoivola.net/js/debugfuncs.js"></script>
<div id="cont"></div>

CSS

.expandablediv {padding:15px; border:solid 1px black; margin:15px;}
.expandablediv_title {border-bottom: solid 2px blue; line-height:1.2em; margin-bottom:10px; font-size:2em; padding: 4px}

JavaScript

var ExpandableDiv = function(title) {
    var div = document.createElement("div"),
        o = new Output(div),
        p, pp, ppp, q, expandimg, expandsrc = "",
        collapsesrc = "",
        onclickFunc, self;
    this.expandContent = function(callback) {
        if (!q.expanded) {
            q.style.display = "block";
            q.expanded = true;
            if (collapsesrc != "") {
                expandimg.src = collapsesrc;
            }
            if (typeof callback == "function") {
                callback();
            }
        }
        else {
            q.style.display = "none";
            q.expanded = false;
            if (expandsrc != "") {
                expandimg.src = expandsrc;
            }
        }
    }
    this.setTitleWidth = function(width) {
        ppp.style.width = width + "px";
        p.style.width = width + 36 + 'px';
    };

    this.showDiv = function() {
        div.className = "expandablediv";
        o.className = "expandablediv_title";
        p = o.addEl("div");
        p.style.overflow = "auto";
        pp = new Output(p);
        ppp = pp.addEl("div", title);
        ppp.style.float = "left";
        expandimg = pp.addEl("img");
        // expandimg.style.float = "right";
        // expandimg.style.display = "inline";
        // expandimg.style["vertical-align"] = "middle";
        if ("expandimg" in this) {
            expandsrc = this.expandimg;
            expandimg.src = expandsrc;
        }
        if ("collapseimg" in this) {
            collapsesrc = this.collapseimg;
        }
        if ("callback" in this) {
            self = this;
            onclickFunc = function() {
                self.expandContent(self.callback);
            };
            p.onclick = onclickFunc;
        } else {
            p.onclick = this.expandContent;
        }
        p.style.cursor = "pointer";
        o.className = "expandablecontent";
        q = o.addEl("div", "Lorem ipsum dolor sit amet, consectetur adipiscing...