JSFiddle - React, Tailwind, and code Playground

by Sukanya Halder

HTML

<div id="Simple" class="Hide Show">
    <div>1. simple</div>
</div>
<input type="Button" OnClick=" $('#Simple').hide('slow').removeClass('Show');$('#Advanced').addClass('Show');" value="Switch" />

<div id="Advanced" class="Hide">
    <div>1. advanced</div>
    <div>2. advanced</div>
    <div>3. advanced</div>
    <div>4. advanced</div>
</div>

<div id="Content">
    This is a small content text
</div>

CSS

.Hide {
    max-height: 0;
    transition: max-height 0.7s ease;
    overflow: hidden;
}

.Show {
    max-height: 500px;
    transition: max-height 0.7s ease-in;
}