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-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="zLNMLHk5cS" 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="M9K0vDhlfa" 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>

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

Larastrap