JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo" class="menu">
    <div id="foobox" class="special"></div>
</div>
<div id="foo2" class="menu">
    <div id="foo2box" class="special"></div>
</div>
<div id="foo3" class="menu">
    <div id="foobox3" class="special"></div>
</div>

CSS

div{border:thin solid #F00;margin:2px;}
.special{width:100px;height:50px;cursor:pointer;}

JavaScript

$('.special').live('click',function(){
    $('#foo').toggle(function(){
        $('.special').animate({marginLeft: '0'}, 100);
        $('#foobox').animate({marginLeft: '354'}, 100);
    },
    function(){
        $('#foobox').animate({marginLeft: '0'}, 100);
    });
    
    $('#foo2').toggle(function(){
        $('.special').animate({marginLeft: '0'}, 100);
        $('#foo2box').animate({marginLeft: '354'}, 100);
    },
    function(){
        $('#foo2box').animate({marginLeft: '0'}, 100);
    });
    
    $('#foo3').toggle(function(){
        $('.special').animate({marginLeft: '10'}, 100);
        $('#foobox3').animate({marginLeft: '354'}, 100);
    },
    function(){
        $('#foobox3').animate({marginLeft: '0'}, 100);
    });
});