Larastrap
Usually you may want a trigger element to open or close a collapsible panel: apply the triggers_collapse parameter to a Button to link that node to a x-larastrap::collapse .
This is a collapse!
<x-larastrap::link triggers_collapse="test_collapse" label="Toggle Collapse" />
<x-larastrap::collapse id="test_collapse">
<p class="p-2">This is a collapse!</p>
</x-larastrap::collapse>
<a id="link-fe437675a0efa93f08f06046a50b830d" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#test_collapse" href="#">Toggle Collapse</a>
<div id="test_collapse" class="collapse">
<div class="card card-body">
<p class="p-2">
This is a collapse!
</p>
</div>
</div>Applying triggers_collapse to a x-larastrap::check , the initial open/close status of x-larastrap::collapse is determined by the checked status of the checkbox itself.
This is a collapse!
This is a collapse!
<x-larastrap::check triggers_collapse="test_checkbox_collapse_closed" label="This is unchecked" />
<x-larastrap::collapse id="test_checkbox_collapse_closed">
<p class="p-2">This is a collapse!</p>
</x-larastrap::collapse>
<x-larastrap::check triggers_collapse="test_checkbox_collapse_opened" label="This is checked" checked />
<x-larastrap::collapse id="test_checkbox_collapse_opened">
<p class="p-2">This is a collapse!</p>
</x-larastrap::collapse>
<div class="row mb-3">
<label for="check-9a9eada30905431a462763fad583b401" class="col-4 col-form-label">This is unchecked</label>
<div class="col-8">
<div class="form-check mt-1">
<input id="check-9a9eada30905431a462763fad583b401" type="checkbox" class="form-check-input" name="LZc3fNjVXF" data-bs-toggle="collapse" data-bs-target="#test_checkbox_collapse_closed">
</div>
</div>
</div>
<div id="test_checkbox_collapse_closed" class="collapse">
<div class="card card-body">
<p class="p-2">
This is a collapse!
</p>
</div>
</div>
<div class="row mb-3">
<label for="check-0ea7fe4afaa8a4af1901f2fdcd52a8f5" class="col-4 col-form-label">This is checked</label>
<div class="col-8">
<div class="form-check mt-1">
<input id="check-0ea7fe4afaa8a4af1901f2fdcd52a8f5" type="checkbox" class="form-check-input" name="PS91ClwGEb" data-bs-toggle="collapse" data-bs-target="#test_checkbox_collapse_opened" checked>
</div>
</div>
</div>
<div id="test_checkbox_collapse_opened" class="collapse show">
<div class="card card-body">
<p class="p-2">
This is a collapse!
</p>
</div>
</div>Alternatively, you can enforce the open/close status of the panel using the open parameter to it.
This is open by default
<x-larastrap::link triggers_collapse="test_collapse_open" label="Toggle Collapse" />
<x-larastrap::collapse id="test_collapse_open" open="true">
<p class="p-2">This is open by default</p>
</x-larastrap::collapse>
<a id="link-991f1fedd1ec4701e49e9ee5495c43ac" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#test_collapse_open" href="#">Toggle Collapse</a>
<div id="test_collapse_open" class="collapse show">
<div class="card card-body">
<p class="p-2">
This is open by default
</p>
</div>
</div>