JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<ul>
    <li>
        <a class="toggler" href="#">Toggler</a>
        <div class="element">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi interdum suscipit risus, dapibus pharetra nulla vestibulum sed. Nam bibendum dictum volutpat. Aenean nec purus vitae sapien rutrum sollicitudin. Praesent et urna sed velit convallis placerat. Maecenas porttitor, mauris tincidunt tempor vehicula, dui turpis ornare mi, sed volutpat felis risus eu orci. Nulla vel neque metus, tempus interdum nunc</div>
    </li>
    <li>
        <a class="toggler" href="#">Toggler</a>
        <div class="element">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi interdum suscipit risus, dapibus pharetra nulla vestibulum sed. Nam bibendum dictum volutpat. Aenean nec purus vitae sapien rutrum sollicitudin. Praesent et urna sed velit convallis placerat. Maecenas porttitor, mauris tincidunt tempor vehicula, dui turpis ornare mi, sed volutpat felis risus eu orci. Nulla vel neque metus, tempus interdum nunc</div>
    </li>
    <li>
        <a class="toggler" href="#">Toggler</a>
        <div class="element">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi interdum suscipit risus, dapibus pharetra nulla vestibulum sed. Nam bibendum dictum volutpat. Aenean nec purus vitae sapien rutrum sollicitudin. Praesent et urna sed velit convallis placerat. Maecenas porttitor, mauris tincidunt tempor vehicula, dui turpis ornare mi, sed volutpat felis risus eu orci. Nulla vel neque metus, tempus interdum nunc</div>
    </li>
</ul>

CSS

a {
    display: block;
    padding: 2px 0;
}

li {
    margin: 0 0 10px;
}

div {
    overflow: hidden;
}

JavaScript

var togglers = $$('.toggler'), cont = $$('.element');

togglers.each(function(toggler, index){
    var fx = new Fx.Reveal(cont[index]);
    toggler.addEvents({
        click: function(e){
            e.stop();
        
            fx.toggle();
        }
    });
});