JSFiddle - React, Tailwind, and code Playground

by bodine30

HTML

<!--[if IE 8 ]>
<script type="text/javascript">document.createElement("summary");</script>
<![endif]-->
<div class="expandable expand">Click to show summary
    <summary>
    If you can read this, the state is expanded
    </summary>
</div>
<div class="expandable collapse">Click to show summary
    <summary>
    If you can read this, the state is expanded
    </summary>
</div>

CSS

.expandable {cursor:pointer;}
.expandable:before {
    content:"";
    display:inline-block;
    width:13px; height:13px;
}

.expand:before {background:url("data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAsElEQVQoU2NkIAMwkqGHAYemBiYGhoZ/uAzEqimzdkbN98cvehYsaPiBTSNWTdWTNq14//bF6y+/fjUsas95i64Rq6b6mbtX/Pv7m/v96+ev/3z/1TSjI/MBskacmpiZGLn//v3DANT48vmlh1mrVzf8gmnEq+k/A+Pr739+NXVkehJnEyMjw+ufvz43tOcEEeenhpm7Kx48fzJhQUMi8aHH0ACMpwYS44lQKiErGQEA2wpSDultm50AAAAASUVORK5CYII=");}

.expand:hover:before {background:url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAABPUlEQVQoU2MMDV3F7BDI48X8n9mMgeG/IANOwPj+L+PfUwfWf9nGOHXZNl8rA60yJQVJfQ42Vl5cen78+v353oPnF49duNbFOGPpjo6YYOc8VhZmTpiGf///MzAxMmLo//3n7/cla/dOAmmakhjulo2sYu7K3QwxgQ4M7GysGBrnr9w1Faumzrk7GJj+fmdIi3Rj4OflRtGIU1P/koMM377/YPj/8xNDcpgzg6SYEFwjXk2//vxj+Pv3DwPj788MJSl+DKwsLGCNBDXxcXMwBDvrMogJ8RBnEz8vJ0Ooqz4DLxc7cX7asO8yg5etFgMbKzPO0MOIp//AeGLEF09Tl24PsjLULFRWkDQExgtq+CLZ8/PX7693Hzw/f/zCzV5GUNpzDOT3Zfz33wRouACuZAS0/MN/JsYz+9d/3AwAMTak+LF+DT8AAAAASUVORK5CYII=");}

.collapse:before {background:url("data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAkUlEQVQoU2NkIAMwkqGHYehoamDKrJWoYmBiMsfw579/J6c3v2hjYGj4B5JD8VNowyo2bRmhdqb/DGowjf8YGW5dffKucnVD2C+YGEZAlHes4ucSEe5m/P9f8j8j4/Nvb96WdlaEfUS2HWvoVfXvkGTnYa39+eV3c1uhx3N05+IO8oYGJoYGiB+I14Qn1ukXuQBPjSsOqGAilgAAAABJRU5ErkJggg==");}

.collapse:hover:before { background: url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAABKklEQVQoU2MMDV3F7BDI48X8n9mMgeG/IANOwPj+L+PfUwfWf9nGOHXZNl8rA60yJQVJfQ42Vl5cen78+v353oPnF49duNbFOGPpjo6YYOc8VhZmTty2QGR+//n7fcnavZNAmqYkhrtlE9IAk5+/ctdUyjT9+/+fYf6qPQxXbj3EsFRHTZ4hMcyFgYmRkQHDpj9//jIs23GB4fmbT3CNkiJ8DFEeBgwsLMxgMazO+/bjF8OSbecY3n/6ziDIx8kQ42XEwMXBBjcEp5/ef/rGsG7fFYYgJx2gRi4U5+INiP9APzIC/YAOYJpIj6epS7cHWRlqFiorSBqys7Fy44qvn79+f7374Pn54xdu9jKC0p5jIL8v47//JkDXCODSBHTth/9MjGf2r/+4GQCJDZr42ZNCjQAAAABJRU5ErkJggg==");}

.expandable > summary {
-webkit-transition:all...

JavaScript

var handleClick = function(e) {
        if('classList' in e.target) {
            e.target.classList.toggle("expand")
            e.target.classList.toggle("collapse");
        }
        else{e.target.toggleClass("expand").toggleClass("collapse");}
    },
    expandables = $$('.expandable').addEvent('click',handleClick);