Changing DIV tags functionality like select-option?

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.

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


        });

Solution 2

You can try this: http://jsfiddle.net/VRjfm/

$('.categories').prepend('<span>select options</span>');

$('.categories').click(function(){
  $('div',this).slideToggle();
  $('.categories span').html('select options');
});

$('.category').click(function(e){
  e.stopPropagation(); // <--this will stop the event bubbling to its parent.
  $('.category').slideToggle();
  $('.categories span').html($(this).text());
});

Solution 3

I have done with the following :

HTML Part :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="dd" class="select-wrapper">--- Select ---
<div class="categories">
 <div class="category">1</div>
 <div class="category">2</div>
 <div class="category">3</div>
</div>

CSS Part :

.select-wrapper {
    /* Size & position */
    position: relative;
    width: 200px;
    margin-top: 25px;
    margin-left: 25px;
    padding: 12px 15px;

    /* Styles */
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.select-wrapper:after { /* Little arrow */
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #4cbeff transparent;
}

.select-wrapper .categories {
    /* Size & position */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    /* Styles */
    background: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid rgba(0,0,0,0.2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* Hiding */
    max-height: 0;
    overflow: hidden;
}


.select-wrapper .categories div {
    display: block;
    text-decoration: none;
    color: #333;
    padding: 10px;
    transition: all 0.3s ease-out;
    border-bottom: 1px solid #e6e8ea;
}


/* Hover state */

.select-wrapper .categories div:hover {
    color: #57a9d9;
}

/* Active state */

.select-wrapper.active {
    border-radius: 5px 5px 0 0;
    background: #4cbeff;
    box-shadow: none;
    border-bottom: none;
    color: white;
}

.select-wrapper.active:after {
    border-color: #82d1ff transparent;
}

.select-wrapper.active .categories {
    border-bottom: 1px solid rgba(0,0,0,0.2);
    max-height: 400px;
}

.select-wrapper:focus {
    border-radius: 5px 5px 0 0;
    background: #4cbeff;
    box-shadow: none;
    border-bottom: none;
    color: white;
}

.select-wrapper:focus:after {
    border-color: #82d1ff transparent;
}

.select-wrapper:focus .categories {
    border-bottom: 1px solid rgba(0,0,0,0.2);
    max-height: 400px;
}

jQuery Part :

function DropDown(el) {
        this.dd = el;
        this.initEvents();
    }
    DropDown.prototype = {
        initEvents : function() {
            var obj = this;

            obj.dd.on('click', function(event){
                $(this).toggleClass('active');
                event.stopPropagation();
            }); 
        }
    }

    $(function() {

        var dd = new DropDown( $('#dd') );

        $(document).click(function() {
            // all dropdowns
            $('.select-wrapper').removeClass('active');
        });

    });

To see it in action : http://jsfiddle.net/john_rock/LhUsc/

I think this may help you to resolve your problem.

Solution 4

jsFiddle DEMO

EDIT: I revised the jsFiddle to show custom label after the div has a new selection.

For a pure JavaScript solution, this jsFiddle uses a simple plugin that has excellent animation effects and configuration settings.

HTML:

  <div class="categories" id="examplePanel1" style="position:absolute; width:150px; height:75px; top:20px; left:0px; background:#a6bbcd; text-align:center; overflow:hidden;">
    <div class="category" onclick="slideExample1('examplePanel1', 'exampleHeader1'); resetLabel1(); dark(); return false;">1 - Dark</div>
    <div class="category" onclick="slideExample1('examplePanel1', 'exampleHeader1'); resetLabel1(); light(); return false;">2 - Light</div>
    <div class="category" onclick="slideExample1('examplePanel1', 'exampleHeader1'); resetLabel1(); image(); return false;">3 - Image</div>
  </div>

JavaScript:

// Div 1 choice: Show purple color via image.
function light() {
  document.getElementById('theBox').style.backgroundImage = "url(http://placehold.it/100x100/FFFF99&text=Light)";
}

// Div 2 choice: Show yellow color via image.    
function dark() {
  document.getElementById('theBox').style.backgroundImage = "url(http://placehold.it/100x100/333399&text=Dark)";
}

// Div 3 choice: Show image
function image() {
  document.getElementById('theBox').style.backgroundImage = "url(http://www.gravatar.com/avatar/66cc4497ef4e7a711a1f83e6a74cfea1?s=100&d=identicon&r=PG)";
}

Original Tutorial
Panel Animation and Tutorial

If you like the jsFiddle, please do check out the Panel Animation link to see many different types of animations just by configuration.

Solution 5

You can add a click event on the inner ('.catefory') divs and there capture the "selected" value.

ex:

var selectedValue = '';

$('.category').click(function () {
  selectedValue = $(this).text();
  $('.categories').hide(); /* if you want to hide the options panel */ 
});

View more solutions