JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="js-expando">
    <button class="button">Click me</button>
    <div class="expander">
        <div class="container">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>

CSS

.expander{
    overflow: hidden;
    transition: .9s;
}
.container > div{
    display: block;
    height: 120px;
    width: 200px;
    margin: 10px;
    background: black;
}

JavaScript

Expando.prototype = {
    init: function(){
        var parent = this,
            element = parent.element;
        parent.container = element.find(".container");
        parent.button = element.find(".button");
        parent.expander = element.find(".expander");
        parent.expander.css({"height": 0});
        parent.open = false;
        parent.button.on("click", function(){
            if(parent.open == false){
                parent.expand();
            } else{
                parent.close();
            }
        });
    },
	expand: function(){
        var parent = this,
            height = parent.container.height();
        parent.open = true;
        parent.element.addClass("expanded");
        parent.expander.css({"height": height+"px"});
    },
	close: function(){
        var parent = this;
        parent.open = false;
        parent.element.removeClass("expanded");
        parent.expander.css({"height": 0});
    }
};
function Expando(element){
    this.element = $(element);
    this.init();
}        
var expand = new Expando(".js-expando");
    expand.expand();