Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 <div class="categories">
    <div class="category">1</div>
    <div class="category">2</div>
    <div class="category">3</div>
</div> 
 
//This is while page load showing first element
        jQuery('.category').addClass('inactive').hide();
        jQuery('.category:first').addClass('active').removeClass('inactive').show();
  //Showing all option
        jQuery('.categories').mouseover(function(){
          jQuery('.category').show();
        });
   //Showing selected option
        jQuery('.categories').mouseleave(function(){
          jQuery('.categories .inactive').hide();
        });
 //Onclick making the option active
        jQuery('.category').click(function(){
            jQuery('.category').addClass('inactive').removeClass('active');
          jQuery(this).addClass('active').removeClass('inactive');
          jQuery('.categories .inactive').hide();
        });
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers