Accordion

1 Install

• Requires Quarto >= 1.4.0
  
• In the root of the quarto project, run in terminal:

quarto add royfrancis/quarto-accordion

This will install the extension under the _extensions subdirectory.

2 Usage

• Add accordion to filters
  
• Define accordion contents (header, body) under yaml keyword accordion
  
• Insert shortcode in the quarto document

Here is the syntax where [text] is replaced as needed.

---
accordion:
  - [label]:
    - header: [text content for the header]
      body: [text content for the body]
filters:
  - accordion
---

{{< accordion [label] >}}

2.1 Minimal usage

---
accordion:
  - simple:
    - header: Click here to view contents
      body: This is the body content
filters:
  - accordion
---

{{< accordion simple >}}

This is the body content

2.2 More accordion items

---
accordion:
  - many-items:
    - header: Item 1
      body: This is the body content for item 1
    - header: Item 2
      body: This is the body content for item 2
    - header: Item 3
      body: This is the body content for item 3
    - header: Item 4
      body: This is the body content for item 4
filters:
  - accordion
---

{{< accordion many-items >}}

This is the body content for item 1

This is the body content for item 2

This is the body content for item 3

This is the body content for item 4

2.3 Multiple accordions

---
accordion:
  - ac-1:
    - header: Item 1
      body: This is the body content for item 1
    - header: Item 2
      body: This is the body content for item 2
  - ac-2:
    - header: Item 1
      body: This is the body content for item 1
    - header: Item 2
      body: This is the body content for item 2
filters:
  - accordion
---

**Topic A**

{{< accordion ac-1 >}}

**Topic B**

{{< accordion ac-2 >}}

Topic A

This is the body content for item 1

This is the body content for item 2

Topic B

This is the body content for item 1

This is the body content for item 2

2.4 Collapse state

All accordion items are collapsed as the default state. Any of the accordion items can be initialized as expanded by setting collapsed: false.

---
accordion:
  - ac-3:
    - header: Item 1
      body: This is the body content for item 1
    - header: Item 2
      body: This is the body content for item 2
      collapsed: false
  - ac-4:
    - header: Item 1
      body: This is the body content for item 1
      collapsed: false
    - header: Item 2
      body: This is the body content for item 2
filters:
  - accordion
---

{{< accordion ac-3 >}}

{{< accordion ac-4 >}}

This is the body content for item 1

This is the body content for item 2

This is the body content for item 1

This is the body content for item 2

3 Advanced

3.1 On Item IDs

Accordion items are automatically given unique ids. This should generally work fine. In case of a conflict, IDs can be set manually using id: my-id.

---
accordion:
  - id-conflict:
    - header: Bla
      body: bla
    - header: Bla
      body: bla
  - id-conflict-resolved:
    - header: Bla
      body: bla
    - header: Bla
      body: bla
      id: my-id
filters:
  - accordion
---

An example of accordion items with conflicting IDs

{{< accordion id-conflict >}}

Using custom ID to resolve conflict

{{< accordion id-conflict-resolved >}}

An example of accordion items with conflicting IDs

bla

bla

Using custom ID to resolve conflict

bla

bla

3.2 CSS styling

To target all accordian sub components on a page, target the class .quarto-accordion.

/*-- scss:rules --*/

.quarto-accordion .accordion-header-content {
  font-weight: 700;
}

To target specific accordions, use the label of that accordion as id. For example an accordion labelled css-styling. Here is the qmd file.

---
accordion:
  - css-styling:
    - header: This header has style
      body: This body has style
format:
  html:
    css: styles.css
filters:
  - accordion
---

{{< accordion css-styling >}}

And here is the css file.

/*-- scss:rules --*/

#css-styling .quarto-accordion .accordion-header-content {
  font-weight: 700;
  color: red
}

#css-styling .quarto-accordion .accordion-body-content {
  color: green;
}

This body has style

4 Limitations

4.1 Text formatting

Text formatting in yaml metadata does not work.

---
accordion:
  - simple-formatting:
    - header: "**How much formatting can I have in an accordion?**"
      body: "This is **bold** and *italic*"
filters:
  - accordion
---

{{< accordion simple-formatting >}}

This is bold and italic

4.2 Multiline content

Multiline content and complex formatting in yaml metadata does not work.

---
accordion:
  - complex-formatting:
    - header: "**How much formatting can I have in an accordion?**" 
      body: |
        This is multiline yaml content.

        This is **bold** and *italic*.
        
        This is an image link
        
        ![](https://images.pexels.com/photos/7604425/pexels-photo-7604425.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940)
        
        This is a markdown table.
        
        |Item|Category|
        |Spools|Marketing|
        |Cutters|Marketing|
        |Pins|Logistics|
filters:
  - accordion
---

{{< accordion complex-formatting >}}

This is multiline yaml content.This is bold and italic.This is an image linkThis is a markdown table.|Item|Category| |Spools|Marketing| |Cutters|Marketing| |Pins|Logistics|

4.3 Other output formats

The accordion content is simply ignored when the output format is anything other than html.