I'm having trouble creating a dropdown checkbox list for my blog. Every time I try to check one of the boxes, the list closes unexpectedly. Any assistance would be greatly appreciated! The element is essentially a styled dropdown with checkboxes embedded in it. It should open when the anchor is clicked or something outside the tags is clicked.
HTML
<input type="text" value="" name="ne" id="sign-up"/>
<div id="list1" class="dropdown-check-list" tabindex="100">
<span class="anchor">Tags</span>
<ul class="items">
<li><input type="checkbox" name="nl1" value="1"checked ></li>
<li><input type="checkbox" name="nl2" value="2" checked ></li>
<li><input type="checkbox" name="nl3" value="3" checked ></li>
<li><input type="checkbox" name="nl4" value="4" checked ></li>
<li><input type="checkbox" name="nl4" value="5" checked >Projects</li>
<li><input type="checkbox" name="nl5" value="6" checked ></li>
<li><input type="checkbox" name="nl6" value="7" checked ></li>
</ul>
</div>
<input type="submit" id="signup-submit" value="sign up" />
CSS
.dropdown-check-list {
display: inline-block;
color:#49494b;
background-color:#f0efeb;
margin-left: -5px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding-top: 6px;
padding-bottom: 9px;
padding-right: 10px;
padding-left: 5px;
}
.dropdown-check-list .anchor:after {
position: absolute;
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
position: absolute;
background-color:#fff;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #000;
}
.dropdown-check-list.visible .items {
display: block;
}
Jquery
var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
if (checkList.classList.contains('visible'))
checkList.classList.remove('visible');
else
checkList.classList.add('visible');
}
checkList.onblur = function(evt) {
checkList.classList.remove('visible');
}
}