Document how accordion shortcodes work (#4390)

* Document how accordion shortcodes work

Signed-off-by: Ian Maddaus <[email protected]>

* Style testing

Signed-off-by: Ian Maddaus <[email protected]>

* Linting

Signed-off-by: Ian Maddaus <[email protected]>

---------

Signed-off-by: Ian Maddaus <[email protected]>

Author: IanMadd

content/style/shortcodes.md

@@ -284,6 +284,72 @@ and `panel-id`/`panel-link` values must be unique HTML IDs on the page.
 
 <!-- markdownlint-enable MD046 MD032 -->
 
+## Accordion list
+
+The Accordion shortcodes create a [Foundation Framework Accordion](https://get.foundation/sites/docs/accordion.html).
+
+To add an accordion, wrap the `accordion-list` shortcode around as many `accordion-item` shortcodes as you want.
+
+The following example creates an accordion list with a single list item:
+
+```markdown
+{{</* accordion-list */>}}
+{{</* accordion-item accordion-title="List item description" */>}}
+Hello, world.
+{{</* /accordion-item */>}}
+{{</* /accordion-list */>}}
+```
+
+### Parameters
+
+The `accordion-list` shortcode has the following parameters:
+
+`data-multi-expand`
+: Whether more than one list item can be displayed at the same time.
+
+  Default value: `false`
+
+`data-allow-all-closed`
+: Whether all list items can be closed at the same time.
+
+  Default value: `false`
+
+The `accordion-item` shortcode has the following parameters:
+
+`accordion-title`
+: The accordion item title.
+
+`is-active`
+: Whether the list item is active by default.
+
+  Default value: `false`
+
+### Examples
+
+The following example creates and accordion with two list items, the second is active by default, all items can be displayed at the same time, and both can be closed at the same time.
+
+```markdown
+{{</* accordion-list data-multi-expand="true" data-allow-all-closed="true" */>}}
+{{</* accordion-item accordion-title="List item description" */>}}
+Hello, world.
+{{</* /accordion-item */>}}
+{{</* accordion-item accordion-title="Active item" is-active="true" */>}}
+This is active by default
+{{</* /accordion-item */>}}
+{{</* /accordion-list */>}}
+```
+
+Which looks like this:
+
+{{< accordion-list data-multi-expand="true" data-allow-all-closed="true" >}}
+{{< accordion-item accordion-title="List item description" >}}
+Hello, world.
+{{< /accordion-item >}}
+{{< accordion-item accordion-title="Active item" is-active="true" >}}
+This is active by default
+{{< /accordion-item >}}
+{{< /accordion-list >}}
+
 ## `highlight` shortcode
 
 You can add code examples using the `highlight` shortcode.

content/style/test.md

@@ -503,6 +503,59 @@ Checklists are an unordered list with a checkbox.
 
 <!-- markdownlint-enable MD031 -->
 
+### Accordions
+
+Basic two item accordion:
+
+{{< accordion-list data-multi-expand="true" data-allow-all-closed="true" >}}
+{{< accordion-item accordion-title="List item description" >}}
+Hello, world.
+{{< /accordion-item >}}
+{{< accordion-item accordion-title="Active item" is-active="true" >}}
+This is active by default
+{{< /accordion-item >}}
+{{< /accordion-list >}}
+
+Accordion in an ordered list:
+
+<!-- markdownlint-disable MD031 -->
+
+These are procedures:
+
+1. Do this.
+
+1. Do that:
+
+    {{< accordion-list data-multi-expand="true" data-allow-all-closed="true" >}}
+    {{< accordion-item accordion-title="Active item" is-active="true" >}}
+    This is active by default
+
+    ```json
+    {
+        "This": "is a sample json",
+        "for": "markdown and Hugo testing."
+    }
+    ```
+    {{< /accordion-item >}}
+    {{< /accordion-list >}}
+
+Accordion in an unordered list:
+
+This is a list:
+
+- Some text
+
+  {{< accordion-list data-multi-expand="true" data-allow-all-closed="true" >}}
+  {{< accordion-item accordion-title="List item description" >}}
+  Hello, world.
+  {{< /accordion-item >}}
+  {{< accordion-item accordion-title="Active item" is-active="true" >}}
+  This is active by default
+  {{< /accordion-item >}}
+  {{< /accordion-list >}}
+
+<!-- markdownlint-enable MD031 -->
+
 ## Code
 
 ### Code blocks