JSFiddle - React, Tailwind, and code Playground

by thcipriani

HTML

<a class="js-show-div1-trigger" href="javascript:void(0);">Show Slide</a>
<div class="js-div1 visibly-hidden">
    Hidden Text
</div>

CSS

.visibly-hidden {
    margin-left: -400px;
    background: tomato;
    width: 300px;
    height: 200px;
    color: #f1f1f1;
    
    -webkit-transition: all 0.5s ease-out; 
       -moz-transition: all 0.5s ease-out; 
         -o-transition: all 0.5s ease-out; 
            transition: all 0.5s ease-out; 
}

.show-it {
    margin-left: 0;
}

JavaScript

(function($) { 
    var $div1 = $('.js-div1'),
        $div1Trigger = $('.js-show-div1-trigger');
    
    $div1Trigger.on('click', function(e) {
        $div1.toggleClass('show-it');
    });
})(jQuery);