So i have a laravel website where i need to filter ‘file’s
the filter is for the ‘tags’ which are given to the file thru a pivot table
i have this piece of code for a dropdown with checkboxes as items.
all the code is placed in the same .php file
<div wire:model="tag_id" wire:change="filter" id="list1" class="dropdown-check-list" tabindex="100">
<span class="anchor">select tag </span>
<ul class="items">
@foreach ($categories as $category)
<li> <input wire:model="tag_id" wire:change="filter" type="checkbox" value="{{$category->id}}"/>{{ $category->name}}</li>
@endforeach
<ul>
</div>
css:
<style>
.dropdown-check-list {
display: inline-block;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.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;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: block;
}
</style>
script
<script>
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');
}
</script>

as you can see there is a dropdown, but it is not clickable. whenever i inspect it i can see the UL items. i followed the code found here: How to create checkbox inside dropdown?