I'm trying to toggle a collapse div including a duallist box which expects some skills. But before doing that the user must select a category in a dropdown belonging to a branch(as in that the categories belong to the branch). The skills that eventually will be displayed belong to the selected category. All this happens in blade foreaches. But it seems I can't put the collapse div in the last foreach because it's in an . So I need to fetch the categories outside their loop.
view:
@foreach($branches as $branch)
<div class="btn-group">
<button type="button" class="btn btn-outline b-info text-info dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<ul class="dropdown-menu">
@foreach($branch->categories as $category)
<li>
<a data-toggle="collapse" data-target="#skills" aria-expanded="false"
aria-controls="skills">
</a>
</li>
<div class="collapse" id="skills">
<label for="skills" class="form-control-label">Select skills to add:</label>
<br/>
<br/>
<select multiple size="10" name="skills[]" id="skills" class="form-control">
@foreach($category->skills as $skill)
<option value=""
ondblclick="window.location.href = '';">
</option>
@endforeach
</select>
<small>Double click to show skill</small>
</div>
@endforeach
</ul>
</div>
@endforeach
this is what I tried but that doesnt work ofcourse.
putting it outside the loop just shows the skills for the first category everytime.
I also tried using angularjs but I have no idea how to parse a blade variable with a ng-click...
advice appreciated.
via Thomas96