JSFiddle - React, Tailwind, and code Playground

by GarethElms

HTML

<div id="test">
    <a href="#test">test</a>
</div>
        
<input type="button" id="button" value="Test" />

CSS

#test{
    margin:50px;
    transition: -webkit-transform .5s ease;
    -webkit-transition: -webkit-transform .5s ease;
    -moz-transition: -webkit-transform .5s ease;
    -o-transition: -webkit-transform .5s ease;}

#test.hidden{
    transform: translateX(-100px);
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -o-transform: translateX(-100px);}

#test.shown{
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);}

JavaScript

$("#button").click(
    function()
    {
        if( $("#test").hasClass("hidden"))
        {
            $("#test").addClass("shown").removeClass("hidden");
        }
        else
        {
            $("#test").addClass("hidden").removeClass("shown");
        }
    });