JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<div class="acc" ng-class="{ 'open': openIndex === 1 }">
    <button [data]="" *click="openIndex = 1" elfo="">
        Open
    </button>
    <p>hello world</p>
    <p>hello world</p><p>hello world</p>
    <p>hello world</p><p>hello world</p>
    <p>hello world</p><p>hello world</p>
    <p>hello world</p><p>hello world</p>
    <p>hello world</p><p>hello world</p>
    <p>hello world</p><p>hello world</p>
    <p>hello world</p><p>hello world</p>
    <p>hello world</p><p>hello world</p>
    <p>hello world</p><p>hello world</p>
    <p>hello world</p><p>hello world</p>
    <p>hello world</p><p>hello world</p>
    <p>hello world</p><p>hello world</p>
    <p>hello world</p><p>hello world</p>
    <p>hello world</p><p>hello world</p>
    <p>hello world</p><p>hello world</p>
</div>

CSS

.acc {
    overflow: auto;
    height: auto;
    border: solid 1px green;
    transition: 300ms linear;
    height: auto;
    max-height: 50px;
}

.acc.open {
    max-height: 2000px;
}

p {
    transition: 700ms;
    opacity: 0;
}



.acc.open p {
    opacity: 1;
}

JavaScript

this.openIndex = 1