Adsd collapse shortcode

content/en/blog/bootstrap.md

@@ -113,19 +113,15 @@ The result looks like this.
 
 ## Collapse
 
-<p>
+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:
-  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
+
-    Link with href
+{{< button collapse="collapse-1" >}}
-  </a>
+Trigger panel
-  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+{{< /button >}}
-    Button with data-bs-target
+
-  </button>
+{{< collapse id="collapse-1" class="p-3 border rounded" >}}
-</p>
+Some placeholder content for the collapse component. This panel is <i>hidden by default</i> but revealed when the user activates the relevant trigger.
-<div class="collapse" id="collapseExample">
+{{< /collapse >}}
-  <div class="card card-body">
-    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
-  </div>
-</div>
 
 ## 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 >}}
+
+<!-- MARKDOWN PUBLIC LINKS -->
+[bs_badge_heading]: https://getbootstrap.com/docs/5.2/components/badge/#headings
+[bs_close_button]: https://getbootstrap.com/docs/5.2/components/close-button/

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
+{{</* 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 <i>hidden by default</i> but 
+revealed when the user activates the relevant trigger.
+{{</* /collapse */>}}
+```
+
+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 <i>hidden by default</i> 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:

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

layouts/shortcodes/button.html

@@ -1,6 +1,6 @@
 <!-- 
     Displays a button. The shortcode supports the following arguments:
-    "href"          Optional address for the button or hyperlink.
+    "href"          Optional address for the button or hyperlink. Automatically assigned when using collapse.
     "id"            Optional id of the button, to be used in the DOM.
     "state"         Optional state of the button, either "enabled" (default), "disabled", "active", or "inactive".
     "size"          Optional size of the button, either "sm", "md" (default), or "lg".
@@ -9,7 +9,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 label for the badge.
-    "tooltip"       Optional title to display in a tooltip.
+    "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.
     "placement"     Optional position of the tooltip: "top" (default), "bottom", "left", or "right". 
 -->
 
@@ -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 }}

layouts/shortcodes/collapse.html

@@ -0,0 +1,23 @@
+<!-- 
+    Displays a hidden panel that can be reveiled by a trigger. The shortcode supports the following arguments:
+    "id"            Required unique id of the collapse element, e.g. "collapse-1".
+    "class"         Optional class attribute of the inner panel element, e.g. “p-3”.
+-->
+
+{{ $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 -}}
+
+<p>
+    <div class="collapse" id="{{ $id }}">
+        <div class="{{ $class }}">{{ $body | safeHTML }}</div>
+    </div>
+</p>