jquery - Having two checkboxes at same level in a drop down filter -

jquery - Having two checkboxes at same level in a drop down filter -

i need have drop downwards filter 2 checkboxes side side(at same level) shown below. how can accomplish this? possible accomplish using jquery? user select value theatre , may take if featured or not! please help in how attain this. in advance.

multicolumn / multiselect dropdown checkbox

demo

html

<dl class="dropdown"> <dt> <a href="#"> <span class="hida">select</span> <p class="multisel"></p> </a> </dt> <div class="mutliselect"> <ul> <li class="col1"> <input type="checkbox" value="col1a" />col1 a</li> <li class="col2"> <input type="checkbox" value="col2a" />col2 a</li> <li class="col1"> <input type="checkbox" value="col1b" />col1 b</li> <li class="col2"> <input type="checkbox" value="col2b" />col2 b</li> <li class="col1"> <input type="checkbox" value="col1c" />col1 c</li> <li class="col2"> <input type="checkbox" value="col2c" />col2 c</li> <li class="col1"> <input type="checkbox" value="col1d" />col1 d</li> <li class="col2"> <input type="checkbox" value="col2d" />col2 d</li> </ul> </div> </dl>

css

body { font: normal 14px/100% "andale mono", andalemono, monospace; color:#fff; padding: 50px; width: 300px; margin: 0 auto; background-color: #374954; } { color:#fff; } .mutliselect, .dropdown dt { margin:0px; padding:0px; } .dropdown ul { margin: -1px 0 0 0; } .mutliselect { position:relative; } .dropdown a, .dropdown a:visited { color:#fff; text-decoration:none; outline:none; font-size: 12px; } .dropdown dt { background-color:#4f6877; display:block; padding: 8px 20px 5px 10px; min-height: 25px; line-height: 24px; overflow: hidden; border:0; width:272px; } .dropdown dt span, .multisel span { cursor:pointer; display:inline-block; padding: 0 3px 2px 0; } .dropdown ul { background-color: #4f6877; border:0; color:#fff; display:none; left:0px; padding: 2px 15px 2px 5px; position:absolute; top:2px; width:280px; list-style:none; height: 100px; overflow: auto; } .dropdown span.value { display:none; } .dropdown ul li { padding:5px; display:block; } .dropdown ul li a:hover { background-color:#fff; } .col1, .col2{ width:50%; float:left; }

jquery

$(".dropdown dt a").on('click', function () { $(".dropdown ul").slidetoggle('fast'); }); $(".dropdown ul li a").on('click', function () { $(".dropdown ul").hide(); }); function getselectedvalue(id) { homecoming $("#" + id).find("dt span.value").html(); } $(document).bind('click', function (e) { var $clicked = $(e.target); if (!$clicked.parents().hasclass("dropdown")) $(".dropdown ul").hide(); }); $('.mutliselect input[type="checkbox"]').on('click', function () { var title = $(this).closest('.mutliselect').find('input[type="checkbox"]').val(), title = $(this).val() + ","; if ($(this).is(':checked')) { var html = '<span title="' + title + '">' + title + '</span>'; $('.multisel').append(html); $(".hida").hide(); } else { $('span[title="' + title + '"]').remove(); var ret = $(".hida"); $('.dropdown dt a').append(ret); } });

credits

@elmahdimahmoud dropdown javascript

jquery css html5