- Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
-
-
+The collapse panel is available as [custom shortcode]({{< ref "custom-shortcodes#collapse" >}} "custom shortcode"). The following example displays a button that reveils a hidden panel:
+
+{{< button collapse="collapse-1" >}}
+Trigger panel
+{{< /button >}}
+
+{{< collapse id="collapse-1" class="p-3 border rounded" >}}
+Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
+{{< /collapse >}}
## Dropdowns
@@ -503,3 +499,7 @@ The tooltip is available as [custom shortcode]({{< ref "custom-shortcodes#toolti
{{< tooltip color="warning" title="Tooltip" href="#" >}}
Tooltip demonstration
{{< /tooltip >}}
+
+
+[bs_badge_heading]: https://getbootstrap.com/docs/5.2/components/badge/#headings
+[bs_close_button]: https://getbootstrap.com/docs/5.2/components/close-button/
\ No newline at end of file
diff --git a/content/en/blog/custom-shortcodes.md b/content/en/blog/custom-shortcodes.md
index b47d6de6..5b2a5e00 100644
--- a/content/en/blog/custom-shortcodes.md
+++ b/content/en/blog/custom-shortcodes.md
@@ -102,14 +102,15 @@ Use the `button` shortcode to display a button with a hyperlink. The inner conte
| Argument | Required | Description |
|-------------|----------|-------------|
-| href | Yes | Address for the button hyperlink. |
+| href | No | Optional address for the button or hyperlink. Automatically assigned when using collapse. |
| state | No | Optional state of the button, either "enabled" (default), "disabled", "active", or "inactive". |
| size | No | Optional size of the button, either "sm", "md" (default), or "lg". |
| color | No | Optional theme color of the element, either "primary" (default), "secondary", "success", "danger", "warning", "info", "light", or "dark". |
| badge | No | Optional positioned badge to display on top of the button. |
| outline | No | Optional flag indicating the button should be outlined, either "false" (default) or "true". |
| aria-label | No | Optional label for the badge. |
-| tooltip | No | Optional title to display in a tooltip. Ignored for active/inactive buttons. |
+| tooltip | No | Optional text to display in a tooltip. Cannot be used together with collapse. Ignored for active/inactive buttons. |
+| collapse | No | Optional panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive buttons. |
| placement | No | How to position the tooltip: "top" (default), "bottom", "left", or "right". |
{.table}
@@ -215,6 +216,39 @@ The result looks like this:
{{< img src="img/dunes.jpg" caption="slide 3" >}}
{{< /carousel >}}
+## Collapse
+
+Use the `collapse` shortcode to reveil or hide a panel. The panel can contain both HTML code and plain text. Link a button to the panel by assigning it's ID to the `collapse` attribute. The shortcode supports the following arguments:
+
+| Argument | Required | Description |
+|-------------|----------|-------------|
+| id | Yes | Required unique id of the collapse element, e.g. "collapse-1". |
+| class | No | Optional class attribute of the inner panel element, e.g. “p-3”. |
+{.table}
+
+As an example, the following shortcode displays a button that, when clicked, triggers a panel to appear or disappear.
+
+```html
+{{}}
+Trigger panel
+{{}}
+
+{{}}
+Some placeholder content for the collapse component. This panel is hidden by default but
+revealed when the user activates the relevant trigger.
+{{}}
+```
+
+The result looks like this:
+
+{{< button collapse="collapse-1" >}}
+Trigger panel
+{{< /button >}}
+
+{{< collapse id="collapse-1" class="p-3 border rounded" >}}
+Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
+{{< /collapse >}}
+
## Command Prompt
The `command` shortcode generates terminal output for either `bash`, `powershell`, or `sql` shell languages. The shortcode supports the following arguments:
diff --git a/layouts/partials/button.html b/layouts/partials/button.html
index 355be7a4..454bb3c8 100644
--- a/layouts/partials/button.html
+++ b/layouts/partials/button.html
@@ -10,7 +10,9 @@
"outline" Optional flag indicating the button should be outlined, either "false" (default) or "true".
"badge" Optional positioned badge to display on top of the button.
"aria-label" Optional assistive label for the badge.
- "tooltip" Optional text to display in a tooltip. Ignored for active/inactive buttons.
+ "tooltip" Optional text to display in a tooltip. Cannot be used together with collapse. Ignored for active/
+ inactive buttons.
+ "collapse" Optional panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive buttons.
"type" Optional type of the element, either "link" or "button" (default).
"placement" Optional position of the tooltip: "top" (default), "bottom", "left", or "right".
-->
@@ -59,6 +61,17 @@
{{ $href := .href -}}
+{{ $collapse := "" -}}
+{{ if not (strings.HasSuffix $state "active") -}}
+ {{ with .collapse }}{{ $collapse = . }}{{ $href = printf "#%s" . }}{{ end -}}
+{{ end -}}
+
+{{ if $tooltip -}}
+ {{ if $collapse -}}
+ {{ errorf "Cannot use tooltip and collapse at the same time" -}}
+ {{ end -}}
+{{ end -}}
+
{{ $type := "button" -}}
{{ with .type }}{{ $type = . }}{{ end -}}
{{ $supportedTypes := slice "button" "link" -}}
@@ -78,6 +91,7 @@
{{ if eq $type "button" }}class="btn btn-{{ if $outline }}outline-{{ end }}{{ $color }} {{ if ne $size "md"}}btn-{{ $size }}{{ end }} position-relative {{ if in (slice "disabled" "active") $state }}{{ $state }}{{ end }}" role="button" {{ if eq $state "disabled" }}aria-disabled="true"{{ end }}
{{ else }}class="link-{{ $color }} position-relative"{{ end }}
{{ with $tooltip }}data-bs-toggle="tooltip" data-bs-title="{{ . }}" data-bs-placement="{{ $placement }}"{{ end }}
+ {{ with $collapse }}data-bs-toggle="collapse" aria-expanded="false" aria-controls="{{ . }}"{{ end }}
{{ if eq $state "active" }}data-bs-toggle="button" aria-pressed="true"{{ end }}
{{ if eq $state "inactive" }}data-bs-toggle="button" aria-pressed="false"{{ end }}
>
diff --git a/layouts/shortcodes/button.html b/layouts/shortcodes/button.html
index d33a0709..82898d99 100644
--- a/layouts/shortcodes/button.html
+++ b/layouts/shortcodes/button.html
@@ -1,6 +1,6 @@
@@ -58,6 +60,7 @@
{{ $badge := .Get "badge" -}}
{{ $label := .Get "aria-label" -}}
{{ $tooltip := .Get "tooltip" -}}
+{{ $collapse := .Get "collapse" -}}
{{ $href := .Get "href" -}}
{{ $id := .Get "id" -}}
@@ -70,5 +73,5 @@
{{ end -}}
{{ if not $error }}
- {{- partial "button.html" (dict "type" $type "title" $title "size" $size "color" $color "outline" $outline "badge" $badge "label" $label "tooltip" $tooltip "href" $href "id" $id "state" $state "placement" $placement) -}}
+ {{- partial "button.html" (dict "type" $type "title" $title "size" $size "color" $color "outline" $outline "badge" $badge "label" $label "tooltip" $tooltip "collapse" $collapse "href" $href "id" $id "state" $state "placement" $placement) -}}
{{ end }}
diff --git a/layouts/shortcodes/collapse.html b/layouts/shortcodes/collapse.html
new file mode 100644
index 00000000..20f1ae44
--- /dev/null
+++ b/layouts/shortcodes/collapse.html
@@ -0,0 +1,23 @@
+
+
+{{ $id := .Get "id" -}}
+{{ if not $id -}}
+ {{ errorf "Missing value for param 'id': %s" .Position -}}
+{{ end -}}
+
+{{ $class := .Get "class" }}
+
+{{- $body := trim .Inner " \n" -}}
+{{ if not $body -}}
+ {{ errorf "Missing inner element text: %s" .Position -}}
+{{ end -}}
+
+