JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<a href="#" onclick="toggleSlider();">toggle</a>
<div id="panelThatSlides" style="display:none;background:#ccc;padding:10px;">
    <div id="contentThatFades" style="opacity:0;filter:alpha(opacity=0);">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid dicta laborum iusto esse qui atque error facilis rem sit nemo tempore eos reiciendis. Accusamus labore blanditiis aspernatur! Autem distinctio voluptate.
    </div>
</div>

JavaScript

function toggleSlider() {
    if ($("#panelThatSlides").is(":visible")) {
        $("#contentThatFades").animate(
            {
                opacity: "0"
            },
            600,
            function(){
                $("#panelThatSlides").slideUp();
            }
        );
    }
    else {
        $("#panelThatSlides").slideDown(600, function(){
            $("#contentThatFades").animate(
                {
                    opacity: "1"
                },
                600
            );
        });
    }   
}