JSFiddle - React, Tailwind, and code Playground

by Glen Cheney

HTML

<button id="div">Div</button>
<div data-collapse data-open="false"></div>
<button id="section">Section</button>
<section data-collapse data-open="true"></section>
<button id="article">Article</button>
<article data-collapse data-open="false"></article>

CSS

[data-collapse] {
    width: 500px;
    height: 0;
    -webkit-transition: height 350ms ease-out;
    -moz-transition: height 350ms ease-out;
    transition: height 350ms ease-out;
}

div {
    background: #333;
}

section {
    background: #999;
}

article {
    background: #CCC;
}

JavaScript

$('div, article').height(0);
$('section').height(100);

$('button').on('click', function() {
    if ($(this.id).attr('data-open') == 'false') {
        $(this.id).attr('data-open', 'true').height(100);
    } else {
        return;
    }
   
    $('[data-collapse]').not($(this.id)).attr('data-open', 'false').height(0);

    
    setTimeout(function() {
        console.log('finished');
    }, 350);
});