The accordion shortcode creates collapsible content sections that expand and collapse when clicked. It’s perfect for FAQs, documentation sections, or any content that benefits from progressive disclosure.
Usage GO
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{{< accordion caption ="Optional Caption Text" >}}
title : First Accordion Title
content : Your content here . ** go ** is supported !
<!-- accordion -- >
title : Second Accordion Title
content : More content here .
You can have multiple paragraphs .
- Bullet points work
- Lists are supported
<!-- accordion -- >
title : Third Accordion Title
content : Final section content .
{{< / accordion >}}
Parameters Parameter Required Default Description caption No - Optional caption displayed below all accordion items Table: Accordion Parameters
Content Structure Each accordion item is separated by <!--accordion--> and must follow this format:
Field Required Description title: Yes The clickable header text for the accordion item content: Yes The collapsible content (supports rich content). Table: Accordion Item Fields
Examples Basic Accordion
What is Hugo?
â–¶ Hugo is a fast and flexible static site generator written in Go.
Why use shortcodes?
â–¶ Shortcodes allow you to create reusable components in your content without writing HTML.
How do I install Hugo?
â–¶ You can install Hugo using package managers like Homebrew, Chocolatey, or download binaries from the official website.
Accordion with Caption
How do I get started?
â–¶ Simply create a new Hugo site and start adding content!
Is Hugo free?
â–¶ Yes! Hugo is completely free and open source.
Frequently Asked Questions Accordion with Rich Content
Installation Steps
â–¶ Follow these steps to install:
Download Hugo from the official site Extract the archive Add Hugo to your PATH Verify installation with hugo version
Configuration
â–¶ Configure your site using config.toml:
Basic settings:
baseURL - Your site’s URLtitle - Your site’s titletheme - The theme name
Troubleshooting
â–¶ Common issues and solutions:
Problem : Hugo not foundSolution : Make sure Hugo is in your PATHCheck the documentation for more help.
Dark Mode Support The accordion automatically adapts to dark mode using your theme’s color variables: