JSFiddle - React, Tailwind, and code Playground

by alirizaadiyahsi

HTML

<ul id="navigation">
    <li class="about"><a title="A" href="#"> </a>
    </li>
    <li class="search"><a title="P" href="#"></a>
    </li>
    <li class="photos"><a title="G" href="#"></a>
    </li>
    <li class="rssfeed"><a title="U" href="#"></a>
    </li>
    <li class="contact"><a title="K" href="#"></a>
    </li>
</ul>
<div id="IDcontent" class="slide">
    <button>slide it</button>
    <div class="inner" style="margin-left: 100%">test</div>
</div>

JavaScript

$(document).ready(function () {
    $('#navigation li').click(function () {
        var marginLefty = $(this).next();
        marginLefty.animate({
            marginLeft: parseInt(marginLefty.css('marginLeft'), 10) == 0 ? marginLefty.outerWidth() : 0
        });
    });
});