https://hugomods.com/bootstrap/collapse/

[giscus[bot]]

https://hugomods.com/bootstrap/collapse/

The collapse shortcode is used to show and hide content.

https://hugomods.com/bootstrap/collapse/

[gavlinski]

Hi! How can I use collapse shortcode inside/nested with another HTML element like an ordered list?
Inspecting the rendered code, the <ol> tag is closed and the collapsed block stays out of it.

Example:

1. Item 1
    {{% bs/collapse "Title" primary true %}}
    **markdown content collapsed inside list item 1**
    {{% /bs/collapse %}}
2. Item 2

Renders to:

<ol>
  <li>Item 1</li>
</ol>
<div class="collapse-wrapper">...</div>
<ol start="2">
  <li>Item 2</li>
</ol>

How it should be:

<ol>
  <li>
    <p>Item 1</p>
    <div class="collapse-wrapper">...</div>
  </li>
  <li>Item 2</li>
</ol>

I've tried different ways, using spaces, mixing codes, clearfix, but none of them worked.
Any help or tip is appreciated. Thanks!

[razonyang]

Seems a bug, fixed since v0.20.1, however there still a problem that you cannot break line, otherwise the layout was broken.

Working example as follows.

1. Item 1
2. Item 2 
3. Item 3 {{% bs/collapse "Title" primary true %}}**markdown content collapsed inside list item 3**{{% /bs/collapse %}}
4. Item 4

[razonyang]

Just noticed that the original usage not working anymore hugomods/bootstrap#141.

[razonyang]

The {{% %}} doesn't work well, please upgrade github.com/hugomods/bootstrap to latest version, and follow the examples.

[gavlinski]

Looks fixed after upgrading, thanks! But is the new style mandatory? Is there an option/parameter to revert to the previous one?

1. Item 1
2. Item 2 {{< bs/collapse "Exemple" primary true >}}
    ```sh
    journalctl -u aplicacao.service
    sudo systemctl enable aplicacao.service
    ```
    {{< /bs/collapse >}}
3. Item 3 {{< bs/collapse "Title" primary true >}}**markdown content collapsed inside list item 3**{{< /bs/collapse >}}
4. Item 4

The pokeball icon from new examples page is not loading, a simple rectangle is show instead.

Old style collapse from the HB Starter Theme Template tutorial.

[razonyang]

But is the new style mandatory? Is there an option/parameter to revert to the previous one?

Unfortunately, it's. I don't have a idea how to maintain two styles for now.

The pokeball icon from new examples page is not loading, a simple rectangle is show instead.

It should be a triangle, but it's a bad design by using unicode char (may encounter font missing issue), I replaced it with pure CSS triangle, it may look better now.

hugo mod get github.com/hugomods/[email protected]

[gavlinski]

Confirmed it's working now. Thanks for your help!