Skip to main content

Collapsable Section

Collapsable sections are custom elements that you can use anywhere in Kookaburra -- in albums, blogs, essays, pages, and sets -- to place content into collapsed, or collapsable blocks.

The basic markup looks like this:


<collapsable-section>
  <div slot="header">Title</div>
  <div slot="main">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</collapsable-section>

Collapsable sections are closed by default; use the visible attribute to render them open by default.


<collapsable-section visible>
  ...

Apply the slot="main" attribute to anything to make it content. Like this:


<collapsable-section>
  <div slot="header">Animals</div>
  <ul slot="main">
    <li>Kookaburra</li>
    <li>Okapi</li>
    <li>Pangolin</li>
  </ul>
</collapsable-section>

Or this:


<collapsable-section>
  <div slot="header">Animals</div>
  <div slot="main">
    <p>These animals are also the names of Backlight modules.</p>
    <ul>
      <li>Kookaburra</li>
      <li>Okapi</li>
      <li>Pangolin</li>
    </ul>
  </div>
</collapsable-section>

Customization​

To customize the appearance of collapsable sections, edit your Kookabura Page template. Find options in the "Collapsable Section" control group. Your preferences will be applied everywhere that your template is used.

But you can also override your template settings per instance of <collapsable-section> by defining CSS variables via the style attribute. Apply your overrides directly on the <collapsable-section> element, like this:


<collapsable-section style="--backgroundColor: red;">
  ...

Here's a completely example:


<collapsable-section visible  style="--headerChevron: 24px; --headerFontSize: 2rem; --mainPadding: 16px 0;">
  <div slot="header">Animals</div>
  <ul slot="main">
    <li>Kookaburra</li>
    <li>Okapi</li>
    <li>Pangolin</li>
  </ul>
</collapsable-section>

CSS Variables​

Here's a full list of CSS variables that you can use.

--backgroundColor
--borderColor
--borderRadius
--margin

--headerBackgroundColor
--headerColor
--headerFontFamily
--headerFontSize
--headerFontWeight
--headerLineHeight
--headerPadding

--mainBackgroundColor
--mainColor
--mainFontFamily
--mainFontSize
--mainFontWeight
--mainLineHeight
--mainPadding

Essay presentations in collapsable sections​

You can put essay presentations inside of collapsable sections. Just put slot="main" on the presentation snippet. Here's an example of a carousel presentation inside a collapsable section:


<collapsable-section style="--mainPadding: 0;">
  <div slot="header">NSFW</div>
  <div slot="main" data-albums="958051" data-presentation="carousel" data-images="958051_89756,958051_66000,958051_85260,958051_61442,958051_54558,958051_51222,958051_76440,958051_88473,958051_50223,958051_15983" style="--aspect-ratio: 50%; --aspect-ratio-mobile: 125%;"></div>
</collapsable-section>