Help:Shortcode Accordion

{{< accordion >}}

{{< accordion_item name="A test" >}}
This is just a test.
{{< /accordion_item >}}

{{< accordion_item name="Another Test" >}}
Just another Test.
{{< /accordion_item >}}

{{< /accordion >}}

<!-- 

  Accordion Shortcode
  ===================

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes: 
    - accordion_item (mandatory)
  Parent Shortcodes: None

  LAYOUT: /layouts/shortcodes/accordion.html
  STYLE:  /assets/scss/components/_shortcode_accordion.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Accordion.md

  Description
  -----------

  Use the accordion, together with the accordion_item, shortcode shortcode to
  create a collapsible accordion.

  Changelog
  =========

  Version 1
  ---------

  Initial release

-->


{{/* prettier-ignore-start */}}
{{ $is_html := .Get "html" | default false }}

{{- .Page.Scratch.Add "accordionset-counter" 1 -}}
{{- $accordion_set_id := .Get "name" | default (printf "accordionset-%s-%d" (.Page.RelPermalink) (.Page.Scratch.Get "accordionset-counter") ) | anchorize -}}
{{- $accordion_items := .Scratch.Get "accordion_item" -}}

{{- if .Inner -}}{{- /* Needed for the accordion to work, but not used  */ -}}{{- end -}}

<div class="accordion accordion-flush" id="accordionFlush-{{- $accordion_set_id -}}">
  {{- range $i, $e := $accordion_items -}}
    {{- $id := printf "%s-%d" $accordion_set_id $i -}}
    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-heading-{{- $id -}}">
        <button
          class="accordion-button collapsed"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#flush-collapse-{{- $id -}}"
          aria-expanded="false"
          aria-controls="flush-collapse-{{- $id -}}"
        >
          {{- trim .name " " -}}
        </button>
      </h2>
      <div
        id="flush-collapse-{{- $id -}}"
        class="accordion-collapse collapse"
        aria-labelledby="flush-heading-{{- $id -}}"
        data-bs-parent="#accordionFlush-{{- $accordion_set_id -}}"
      >
        <div class="accordion-body">
        {{- with .content -}}
          {{- if $is_html -}}
            {{- . -}}
          {{- else -}}
            {{- . | markdownify -}}
          {{- end -}}
        {{- end -}}
        </div>
      </div>
    </div>
  {{- end -}}
</div>
{{/* prettier-ignore-end */}}

<!-- 

  Accordion Item Shortcode
  ========================

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes: None
  Parent Shortcodes:
    - accordion (mandatory)

  LAYOUT: /layouts/shortcodes/accordion_item.html
  STYLE:  /assets/scss/components/_shortcode_accordion.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Accordion.md

  Description
  -----------

  Use the accordion, together with the accordion_item, shortcode shortcode to
  create a collapsible accordion.

  Changelog
  =========

  Version 1
  ---------

  Initial release

-->

{{/* prettier-ignore-start */}}
{{ if .Parent }}
	{{ $name := trim (.Get "name") " " }}
	{{ $include := trim (.Get "include") " "}}
	{{ if not (.Parent.Scratch.Get "accordion_item") }}
  	{{ .Parent.Scratch.Set "accordion_item" slice }}
	{{ end }}
	{{ with .Inner }}
      {{ $.Parent.Scratch.Add "accordion_item" (dict "name" $name "content" . ) }}
  {{ else }}
    {{- errorf "[%s] %q: tab shortcode missing its inner content" site.Language.Lang .Page.Path -}}
	{{ end }}
{{ else }}
	{{- errorf "[%s] %q: tab shortcode missing its parent" site.Language.Lang .Page.Path -}}
{{ end}}
{{/* prettier-ignore-end */}}

/*

  Accordion Shortcode
  ===================

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes:
    - accordion_item (mandatory)
  Parent Shortcodes: None

  LAYOUT: /layouts/shortcodes/accordion.html
  STYLE:  /assets/scss/components/_shortcode_accordion.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Accordion/index.md

*/

.accordion-header {
  margin-top: 0;
}

@include color-mode(dark) {
  .accordion {
    --#{$prefix}accordion-color: $body-bg-dark;
    --#{$prefix}accordion-border-color: #{$gray-800};
  }

  .accordion-button {
    color: $gray-300;
    background-color: $body-bg-dark;
  }

  .accordion-item {
    background-color: $border-dark;
  }

  .accordion-body {
    table {
      --bs-table-bg: $gray-300;
      --#{$prefix}accordion-bg: #{$gray-300};
    }

    thead,
    tbody,
    tfoot,
    tr,
    td,
    th {
      border-color: $gray-300;
    }
  }

  .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239adafb'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  }

  .accordion-button:not(.collapsed) {
    color: #{$black};
    background-color: $focus-color-dark;
    box-shadow: inset 0 -1px 0 rgba(29, 45, 53, 0.125);
  }

  .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

    /* transform: rotate(-180deg); */
  }
}