Lazy loaded Bootstrap collapse

Lazy loading Bootstrap expandable/collapsible collapse regions.

The Bootstrap collapse component allows to easily toggle visibility on an element. A similar behavior can be obtained with the Sircl onclick-toggleshow event-action attribute, with this difference that the Bootstrap collapse component includes a nice expanding/collapsing animation.

In addition, Sircl allows you to lazy-load Bootstrap collapse components: the content to appear when the component is expanded, is only loaded once expansion is triggered. For this, we simply add an ifexpanded-load attribute on the collapse target elements (lines 7 and 18). When expanded, the content of the collapse target will then be replaced by the content returned from invoking the URL (cq. the spinner will be replaced by the loaded content):

<div>
  <a data-bs-toggle="collapse" class="collapsed" href="#c1">
    <i class="fas fa-chevron-down"></i> Brown Fox
  </a>
</div>

<div id="c1" class="collapse" ifexpanded-load="/Samples/BrownFox">
  <i class="fas fa-spinner fa-spin"></i>
</div>

<div>
  <a data-bs-toggle="collapse" class="collapsed" href="#c2"
     onload-click=":this">
    <i class="fas fa-chevron-down"></i> Lorem Ipsum
  </a>
</div>

<div id="c2" class="collapse" ifexpanded-load="/Samples/LoremIpsum">
  <i class="fas fa-spinner fa-spin"></i>
</div>

In this example, the trigger hyperlinks (hyperlinks to expand/collapse the collapse elements) contain a "notch" using the Font Awesome chevron-down icon (lines 3 and 14). The following styling was added to have them rotate when expanding/collapsing. For it to work; the trigger hyperlinks received the classes collapsed. If no notch has to be rotated, this class can safely be removed.

<style>
  *[data-bs-toggle='collapse'] I {
    transition-duration: 0.2s;
  }
  *[data-bs-toggle='collapse'].collapsed I {
    transform: rotate(-90deg);
  }
</style>

To have the second tab initially expanded, you can add the class show to its collapse element (line 18). This will be sufficient to trigger the loading of the collapse content. But to have the notch pointing down, you'll also have to remove the class collapsed from its trigger hyperlink (line 12).

In this example, another technique was used: an onload-click attribute was set on the trigger hyperlink (line 12-15) using the ":this" relative CSS selector to simulate a click on the hyperlink as soon as the page is loaded, by this expanding the collapse region and rotating the notch at the same time.

This example uses Bootstrap 5 syntax.