View on GitLab

Collapses

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 .

Toggle 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="JpSvXVbmys" 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="os2Wj5aTr2" 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>

open

Alternatively, you can enforce the open/close status of the panel using the open parameter to it.

Toggle Collapse

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>