CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
superkytoz
superkytoz

Reputation: 1279

Checkbox with a clickable a dropdownlist

Hi I got a question about my code because I want to achieve the following checkbox with a clickable dropdownlist around it (which I had recorded on youtube to show you):

link: https://www.youtube.com/watch?v=ZodCcVHCAUo&feature=youtu.be

I have also put the code in jsfiddle so here is the link for it: http://jsfiddle.net/yomacho/ghv5aosv/

And I will also put the code here (but I can't put bootstrap.min.js because it's too long so you need to go the link above which I had given):

The html: 

<div class="col-md-1">
    <li>
        <div id="ButtonDropDown" href="#" class="ButtonDropDown">
            <input type="checkbox" class="check">
                <select class="showDropdown">
                    <option value="volvo" >Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select>
        </div>

        <div class="btn-group">
            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>

            </button>

            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>                  
    </li>
</div>

And the css:

.showDropdown{
    display: none;
}

.ButtonDropDown:hover .showDropdown{
    display: block;
}

#ButtonDropDown{
    display: inline-block;
    background: #ddd;
    border: 1px solid #ccc;
    padding: 5px 10px;
    color: blue;
    cursor: pointer;
}
.showDropdown{
    width: 15px;
}

I really appreciate it if someone also knows how to make a responsive version of it. And if someone knows the not responsive version of it, well then I also gladly wanna know that as well. Because i'm just curious about it hehe. Anyway thanks for your answer.

Upvotes: 1

Views: 554

Answers (1)

nklein
nklein

Reputation: 79

Are you looking for something like this? http://jsfiddle.net/nklein/Lm0t1aa8/

The following javascript prevents the dropdown from opening when you click on the checkbox, but allows the box to be checked.

$('.check').on('click', function (ev) {
    ev.stopPropagation();
});

EDIT:

I've updated the jsfiddle, the following events will add/remove the "caret" arrow when you hover/stop hovering over the element.

$('#selCars').on('mouseover', function (ev) {
    $('#selCars .caret-hover').addClass('caret');
});
$('#selCars').on('mouseout', function (ev) {
    $('#selCars .caret-hover').removeClass('caret');
});

Upvotes: 1

Related Questions