Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js" ></script>
<script>
$(document).ready(function (){
        
        $('.arrowlistmenu ul li:has("div")').find('h3');
        $('.arrowlistmenu ul li:has("div")').find('div.hide').hide();   
        $('.arrowlistmenu li:has("div")').find('h3').click (function (){ 
            $(this).parent('li').find('span:first').toggleClass();
            $(this).parent('li').find('div:first').slideToggle();
         
         });
    });
</script>
<title>Untitled Document</title>
</head>
​
<body>
<div class="arrowlistmenu">
<ul>
<li>
  <h3 class="menuheader"><a href="staples.html">FOOD &amp; GROCERY</a></h3>
<div class="hide">
<ul class="categoryitems">
<li><a href="staples.html" style="color:#cf1519;">STAPLES</a></li>
<li><a href="Packaged_food.html">PACKAGED FOOD</a></li>
<li><a href="beverages.html">BEVERAGES</a></li>
<li><a href="dairy.html">DAIRY</a></li>
<li><a href="bakery.html">BAKERY &amp; DELI</a></li>
<li><a href="non_veg.html">NON VEG</a></li>
<li><a href="fruits_vegetables.html">FRUITS &amp; VEGETABLES</a></li>
<li><a href="frozen.html">FROZEN</a></li>
</ul>
</div>
</li>
<li>
<h3 class="menuheader">PERSONAL &amp; HOME CARE</h3>
<div class="hide">
<ul class="categoryitems">
<li><a href="personal_homecare.html">CLEANING AIDS</a></li>
<li><a href="health.html">HEALTH &amp; BEAUTY</a></li>
</ul>
</div>
</li>
<li>
<h3 class="menuheader">HOME &amp; KITCHEN NEEDS</h3>
<div class="hide">
<ul class="categoryitems">
<li><a href="home_kitchen.html">KITCHENWARE</a></li>
<li><a href="electronic.html">ELECTRONICS</a></li>
<li><a href="home_decor.html">HOME DECOR</a></li>
<li><a href="luggage.html">LUGGAGE</a></li>
<li><a href="toys.html">TOYS</a></li>
<li><a href="stationery.html">STATIONERY</a></li>
</ul>
</div>
</li>
<li>
<h3 class="menuheader">FASHION &amp; ACCESSORIES</h3>
<div class="hide">
<ul class="categoryitems">
<li><a href="menswear.html">MEN'S WEAR</a></li>
<li><a href="womenswear.html">WOMEN'S WEAR</a></li>
<li><a href="kidswear.html">KID'S WEAR</a></li>
<li><a href="accessories.html">ACCESSORIES</a></li>
<li><a href="footwear.html">FOOTWEAR</a></li>
</ul>
</div>
</li>
<li>
<h3 class="menuheader">STAR BAZAAR BRANDS</h3>
<div class="hide">
<ul class="categoryitems">
<li><a href="our_products.html">OUR PRODUCTS</a></li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
​
 
​
.arrowlistmenu div {
    display:none;
}
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers