Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body onload="onload()">
<ul class="menus-nav">
<li><a href="#menu1" class="showFood" data-target="1">Menu 1</a></li>
<li><a href="#menu2" class="showFood" data-target="2">Menu 2</a></li>
<li><a href="#menu3" class="showFood" data-target="3">Menu 3</a></li>
</ul>
<div id="food1" class="targetFood">
<p>Items from menu 1</p>
</div>
<div id="food2" class="targetFood">
<p>Items from menu 2</p>
</div>
<div id="food3" class="targetFood">
<p>Items from menu 3</p>
</div>
</body>
</html>
 
$('.showFood').on('click', function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.targetFood').hide();
    $('#food' + $(this).data('target')).show(function() {
        $('#food' + $(this).data('target')).toggle("slide");
    });
});
$('.showFood').first().click();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers