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-1e4753aa9263aedf8bb4d2a94865d530" class="btn btn-primary" href="#" data-bs-toggle="collapse" data-bs-target="#test_collapse">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-b0c68e57f89839c41fea66697b51f469" class="col-4 col-form-label">This is unchecked</label>
<div class="col-8">
<div class="form-check mt-1">
<input id="check-b0c68e57f89839c41fea66697b51f469" type="checkbox" class="form-check-input" name="8qRcBP18Lg" 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-9a44066d9bbfca39b449675cafca308c" class="col-4 col-form-label">This is checked</label>
<div class="col-8">
<div class="form-check mt-1">
<input id="check-9a44066d9bbfca39b449675cafca308c" type="checkbox" class="form-check-input" name="zkI1xwmzLd" checked data-bs-toggle="collapse" data-bs-target="#test_checkbox_collapse_opened">
</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-64582ac2fe6255a93028f51e19d4a73a" class="btn btn-primary" href="#" data-bs-toggle="collapse" data-bs-target="#test_collapse_open">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>