Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.

package examples import "github.com/axadrn/shadcn-templ/v2/components/accordion"

package examples import "github.com/axadrn/shadcn-templ/v2/components/accordion" templ AccordionDemo() {	@accordion.Accordion(accordion.Props{Class: "max-w-lg"}) {		@accordion.Item(accordion.ItemProps{Open: true}) {			@accordion.Trigger() {				What are your shipping options?			}			@accordion.Content() {				We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.			}		}		@accordion.Item() {			@accordion.Trigger() {				What is your return policy?			}			@accordion.Content() {				Returns accepted within 30 days. Items must be unused and in original packaging. Refunds processed within 5-7 business days.			}		}		@accordion.Item() {			@accordion.Trigger() {				How can I contact customer support?			}			@accordion.Content() {				Reach us via email, live chat, or phone. We respond within 24 hours during business days.			}		}	}}

Installation

shadcn-templ add accordion

Copy and paste the following code into your project.

components/accordion/accordion.templ

package accordion import (	"context" 	"github.com/axadrn/shadcn-templ/v2/components/icon"	"github.com/axadrn/shadcn-templ/v2/utils") type Props struct {	ID         string	Class      string	Attributes templ.Attributes	DisableOpenMultiple   bool} type ItemProps struct {	ID         string	Class      string	Attributes templ.Attributes	Open       bool	Disabled   bool} type TriggerProps struct {	ID         string	Class      string	Attributes templ.Attributes} type ContentProps struct {	ID         string	Class      string	Attributes templ.Attributes} type ctxKey string const (	openKey     ctxKey = "accordionItemOpen"	disabledKey ctxKey = "accordionItemDisabled") func itemOpen(ctx context.Context) bool {	open, _ := ctx.Value(openKey).(bool)	return open} func itemDisabled(ctx context.Context) bool {	disabled, _ := ctx.Value(disabledKey).(bool)	return disabled} templ Accordion(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="accordion"		data-disable-open-multiple?={ p.DisableOpenMultiple }		class={			utils.CN(				"cn-accordion flex w-full flex-col",				p.Class,			),		}		{ p.Attributes... }	>		{ children... }	</div>} templ Item(props ...ItemProps) {	{{ var p ItemProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	{{ ctx = context.WithValue(ctx, openKey, p.Open) }}	{{ ctx = context.WithValue(ctx, disabledKey, p.Disabled) }}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="accordion-item"		data-disabled?={ p.Disabled }		class={			utils.CN(				"cn-accordion-item",				p.Class,			),		}		{ p.Attributes... }	>		{ children... }	</div>} templ Trigger(props ...TriggerProps) {	{{ var p TriggerProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<h3 class="flex">		<button			if p.ID != "" {				id={ p.ID }			}			type="button"			data-slot="accordion-trigger"			aria-expanded={ utils.IfElse(itemOpen(ctx), "true", "false") }			disabled?={ itemDisabled(ctx) }			if itemDisabled(ctx) {				aria-disabled="true"			}			class={				utils.CN(					"cn-accordion-trigger group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50",					p.Class,				),			}			{ p.Attributes... }		>			{ children... }			@icon.ChevronDown(icon.Props{				Class:      "cn-accordion-trigger-icon pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden",				Attributes: templ.Attributes{"data-slot": "accordion-trigger-icon"},			})			@icon.ChevronUp(icon.Props{				Class:      "cn-accordion-trigger-icon pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline",				Attributes: templ.Attributes{"data-slot": "accordion-trigger-icon"},			})		</button>	</h3>} templ Content(props ...ContentProps) {	{{ var p ContentProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="accordion-content"		hidden?={ !itemOpen(ctx) }		class="cn-accordion-content overflow-hidden"		{ p.Attributes... }	>		<div			class={				utils.CN(					"cn-accordion-content-inner h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",					p.Class,				),			}		>			{ children... }		</div>	</div>}

components/accordion/accordion.js

(function () {  "use strict";   // Mirrors Base UI's accordion: aria-expanded on the trigger is the single  // source of truth, panels animate between 0 and their measured height.   function triggerOf(item) {    return item.querySelector('[data-slot="accordion-trigger"]');  }   function panelOf(item) {    return item.querySelector('[data-slot="accordion-content"]');  }   function openItem(item) {    const panel = panelOf(item);    triggerOf(item).setAttribute("aria-expanded", "true");    if (!panel) return;    panel.removeAttribute("data-closed");    panel.hidden = false;    panel.style.setProperty("--tui-accordion-panel-height", panel.scrollHeight + "px");    panel.setAttribute("data-open", "");  }   function closeItem(item) {    const panel = panelOf(item);    triggerOf(item).setAttribute("aria-expanded", "false");    if (!panel) return;    panel.removeAttribute("data-open");    panel.style.setProperty("--tui-accordion-panel-height", panel.scrollHeight + "px");    panel.setAttribute("data-closed", "");    panel.addEventListener(      "animationend",      () => {        if (panel.hasAttribute("data-closed")) {          panel.removeAttribute("data-closed");          panel.hidden = true;        }      },      { once: true }    );  }   document.addEventListener("click", (e) => {    if (!(e.target instanceof Element)) return;    const trigger = e.target.closest('[data-slot="accordion-trigger"]');    if (!trigger) return;    const item = trigger.closest('[data-slot="accordion-item"]');    const accordion = trigger.closest('[data-slot="accordion"]');    if (!item || !accordion || item.hasAttribute("data-disabled")) return;     if (trigger.getAttribute("aria-expanded") === "true") {      closeItem(item);      return;    }    if (accordion.hasAttribute("data-disable-open-multiple")) {      accordion.querySelectorAll('[data-slot="accordion-item"]').forEach((other) => {        if (other === item) return;        if (other.closest('[data-slot="accordion"]') !== accordion) return;        if (triggerOf(other)?.getAttribute("aria-expanded") === "true") closeItem(other);      });    }    openItem(item);  });   // WAI-ARIA accordion keyboard support: arrow keys, Home and End move focus  // between the triggers of the same accordion.  document.addEventListener("keydown", (e) => {    if (!(e.target instanceof Element)) return;    const trigger = e.target.closest('[data-slot="accordion-trigger"]');    if (!trigger) return;    const accordion = trigger.closest('[data-slot="accordion"]');    if (!accordion) return;    const triggers = [...accordion.querySelectorAll('[data-slot="accordion-trigger"]')].filter(      (t) => !t.disabled && t.closest('[data-slot="accordion"]') === accordion    );    const index = triggers.indexOf(trigger);    let next;    if (e.key === "ArrowDown") next = triggers[(index + 1) % triggers.length];    else if (e.key === "ArrowUp") next = triggers[(index - 1 + triggers.length) % triggers.length];    else if (e.key === "Home") next = triggers[0];    else if (e.key === "End") next = triggers[triggers.length - 1];    if (next) {      e.preventDefault();      next.focus();    }  });})();

Component scripts are loaded through the shared script bundle, see JavaScript.

Update the import paths to match your project setup.

Usage

import "github.com/axadrn/shadcn-templ/v2/components/accordion"

@accordion.Accordion() {	@accordion.Item(accordion.ItemProps{Open: true}) {		@accordion.Trigger() {			Is it accessible?		}		@accordion.Content() {			Yes. It adheres to the WAI-ARIA design pattern.		}	}}

Composition

Use the following composition to build an Accordion:

accordion.Accordion├── accordion.Item│   ├── accordion.Trigger│   └── accordion.Content└── accordion.Item    ├── accordion.Trigger    └── accordion.Content

Basic

A basic accordion that shows one item at a time. The first item is open by default.

Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.

package examples import "github.com/axadrn/shadcn-templ/v2/components/accordion"

package examples import "github.com/axadrn/shadcn-templ/v2/components/accordion" templ AccordionBasic() {	@accordion.Accordion(accordion.Props{Class: "max-w-lg"}) {		@accordion.Item(accordion.ItemProps{Open: true}) {			@accordion.Trigger() {				How do I reset my password?			}			@accordion.Content() {				Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.			}		}		@accordion.Item() {			@accordion.Trigger() {				Can I change my subscription plan?			}			@accordion.Content() {				Yes, you can upgrade or downgrade your plan at any time from your account settings. Changes will be reflected in your next billing cycle.			}		}		@accordion.Item() {			@accordion.Trigger() {				What payment methods do you accept?			}			@accordion.Content() {				We accept all major credit cards, PayPal, and bank transfers. All payments are processed securely through our payment partners.			}		}	}}

DisableOpenMultiple

Use the DisableOpenMultiple prop to allow multiple items to be open at the same time.

Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices.

package examples import "github.com/axadrn/shadcn-templ/v2/components/accordion"

package examples import "github.com/axadrn/shadcn-templ/v2/components/accordion" templ AccordionMultiple() {	@accordion.Accordion(accordion.Props{DisableOpenMultiple: true, Class: "max-w-lg"}) {		@accordion.Item(accordion.ItemProps{Open: true}) {			@accordion.Trigger() {				Notification Settings			}			@accordion.Content() {				Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices.			}		}		@accordion.Item() {			@accordion.Trigger() {				Privacy & Security			}			@accordion.Content() {				Control your privacy settings and security preferences. Enable two-factor authentication, manage connected devices, review active sessions, and configure data sharing preferences. You can also download your data or delete your account.			}		}		@accordion.Item() {			@accordion.Trigger() {				Billing & Subscription			}			@accordion.Content() {				View your current plan, payment history, and upcoming invoices. Update your payment method, change your subscription tier, or cancel your subscription.			}		}	}}

Disabled

Use the Disabled prop on accordion.Item to disable individual items.

package examples import "github.com/axadrn/shadcn-templ/v2/components/accordion"

package examples import "github.com/axadrn/shadcn-templ/v2/components/accordion" templ AccordionDisabled() {	@accordion.Accordion(accordion.Props{Class: "w-full"}) {		@accordion.Item() {			@accordion.Trigger() {				Can I access my account history?			}			@accordion.Content() {				Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.			}		}		@accordion.Item(accordion.ItemProps{Disabled: true}) {			@accordion.Trigger() {				Premium feature information			}			@accordion.Content() {				This section contains information about premium features. Upgrade your plan to access this content.			}		}		@accordion.Item() {			@accordion.Trigger() {				How do I update my email address?			}			@accordion.Content() {				You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.			}		}	}}

Borders

Add border to the Accordion and border-b last:border-b-0 to the accordion.Item to add borders to the items.

We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members.

package examples import "github.com/axadrn/shadcn-templ/v2/components/accordion"

package examples import "github.com/axadrn/shadcn-templ/v2/components/accordion" templ AccordionBorders() {	@accordion.Accordion(accordion.Props{Class: "max-w-lg rounded-lg border"}) {		@accordion.Item(accordion.ItemProps{Open: true, Class: "border-b px-4 last:border-b-0"}) {			@accordion.Trigger() {				How does billing work?			}			@accordion.Content() {				We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members.			}		}		@accordion.Item(accordion.ItemProps{Class: "border-b px-4 last:border-b-0"}) {			@accordion.Trigger() {				Is my data secure?			}			@accordion.Content() {				Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols.			}		}		@accordion.Item(accordion.ItemProps{Class: "border-b px-4 last:border-b-0"}) {			@accordion.Trigger() {				What integrations do you support?			}			@accordion.Content() {				We integrate with 500+ popular tools including Slack, Zapier, Salesforce, HubSpot, and more. You can also build custom integrations using our REST API and webhooks.			}		}	}}

Card

Wrap the Accordion in a Card component.

Subscription & Billing

Common questions about your account, plans, payments and cancellations.

We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/accordion"	"github.com/axadrn/shadcn-templ/v2/components/card") templ AccordionCard() {	@card.Card(card.Props{Class: "w-full max-w-sm"}) {		@card.Header() {			@card.Title() {				Subscription & Billing			}			@card.Description() {				Common questions about your account, plans, payments and cancellations.			}		}		@card.Content() {			@accordion.Accordion() {				@accordion.Item(accordion.ItemProps{Open: true}) {					@accordion.Trigger() {						What subscription plans do you offer?					}					@accordion.Content() {						We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features.					}				}				@accordion.Item() {					@accordion.Trigger() {						How does billing work?					}					@accordion.Content() {						Billing occurs automatically at the start of each billing cycle. We accept all major credit cards, PayPal, and ACH transfers for enterprise customers. You'll receive an invoice via email after each payment.					}				}				@accordion.Item() {					@accordion.Trigger() {						How do I cancel my subscription?					}					@accordion.Content() {						You can cancel your subscription anytime from your account settings. There are no cancellation fees or penalties. Your access will continue until the end of your current billing period.					}				}			}		}	}}

API Reference

Accordion

The Accordion component is the root container that manages which items are open.

Prop	Type	Default
`DisableOpenMultiple`	`bool`	`false`
`Class`	`string`	-

Item

The accordion.Item component wraps a single trigger and content pair.

Prop	Type	Default
`Open`	`bool`	`false`
`Disabled`	`bool`	`false`
`Class`	`string`	-

Trigger

The accordion.Trigger component toggles its item open and closed.

Prop	Type	Default
`Class`	`string`	-

Content

The accordion.Content component holds the content revealed by the trigger.

Prop	Type	Default
`Class`	`string`	-

Components Alert

On This Page

Installation Usage Composition Basic DisableOpenMultiple Disabled Borders Card API Reference Accordion Item Trigger Content

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.