Question

I have the following HTML structure

<div class="categories">
    <div class="category">1</div>
    <div class="category">2</div>
    <div class="category">3</div>
</div>

I want to make this structure function like a SELECT/OPTION,(I can’t change the tags)
I have tried applying TOGGLE on the parent DIV, but that only opens and closes the DIV container, it doesn’t change the functionality like SELECT-OPTION.

EDIT:
Just changing it visually like a dropdown SELECT-OPTION type is enough.

Any help appreciated. Thank You.

Answer 1

Use the following javascript code. Which will solve your problem

JS Bin http://jsbin.com/utoyej/43/edit

  //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();


        });