dzho,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.popular-view-list {
font-size: 20px;
cursor: pointer;
color: #666;
}
.popular-view-list ~ div .checkbox-down {
display: none;
}
.popular-view-list.active ~ div .checkbox-down {
display: block;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var items = document.querySelectorAll(".item");
[].forEach.call(items, function(item) {
var itemTitle = item.querySelector(".popular-view-list");
itemTitle.addEventListener("click", function(e) {
itemTitle.classList.toggle("active")
})
})
});
</script>
</head>
<body>
<div class="item">
<div class="popular-view-list" >list one</div>
<div class="col-sm-6">
<div class="checkbox-down">
<div class="checkbox-wrapper">
<input type="checkbox" id="popular-checkbox__column-two-number-three" value="Washing machine">
<label for="popular-checkbox__column-two-number-three">Washing machine</label>
</div>
<div class="checkbox-wrapper">
<input type="checkbox" id="popular-checkbox__column-two-number-four" value="Free wireless internet">
<label for="popular-checkbox__column-two-number-four">Free wireless internet</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="checkbox-down">
<div class="checkbox-wrapper">
<input type="checkbox" id="popular-checkbox__column-two-number-three" value="Washing machine">
<label for="popular-checkbox__column-two-number-three">Washing machine</label>
</div>
<div class="checkbox-wrapper">
<input type="checkbox" id="popular-checkbox__column-two-number-four" value="Free wireless internet">
<label for="popular-checkbox__column-two-number-four">Free wireless internet</label>
</div>
</div>
</div>
</div>
</body>
</html>
