CODEWITHSUNDEEP
javascriptphphtmlcsslaravel
Delano van londen
Delano van londen

Reputation: 416

checkbox list is not opening

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.

   <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>

enter image description here

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?

Upvotes: 0

Views: 73

Answers (1)

Jaya Rathinam
Jaya Rathinam

Reputation: 76

Actually you are forgot to close the <ul> tag in your html code.
Update the <ul> tag into </ul> after @endforeach

This is code you are looking for

<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>

Upvotes: 1

Related Questions