HQReact UI
DocsThemes
  • Getting Started
  • Introduction
  • Installation
  • Client Side Routing
  • MCP Server
  • LLMs
  • Framework Guides
  • Nextjs
  • Laravel
  • Vite
  • Tanstack Start
  • Components
  • Buttons
  • Button
  • File Trigger
  • Toggle
  • Charts
  • Chart
  • Collections
  • Accordion
  • Bubble
  • Collapsible
  • Context Menu
  • Dropdown Menu
  • Grid List
  • Item
  • List Box
  • Message
  • Table
  • Tag Group
  • Tree
  • Colors
  • Color
  • Controls
  • Command
  • Kbd
  • Slider
  • Switch
  • Toolbar
  • Date And Time
  • Calendar
  • Range Calendar
  • Date Field
  • Date Picker
  • Date Range Picker
  • Time Field
  • Drag And Drop
  • Drop Zone
  • Forms
  • Field
  • Input
  • Combobox
  • Input Group
  • Checkbox
  • Radio
  • Select
  • Text Field
  • Number Field
  • Search Field
  • Input OTP
  • Layouts
  • Container
  • Navbar
  • Sidebar
  • Media
  • Avatar
  • Carousel
  • Navigation
  • Link
  • Breadcrumbs
  • Tabs
  • Pagination
  • Overlays
  • Dialog
  • Alert Dialog
  • Sheet
  • Popover
  • Tooltip
  • Statuses
  • Alert
  • Badge
  • Empty
  • Meter
  • Progress
  • Skeleton
  • Toastalpha
  • Surfaces
  • Card
  • Separator

On this page

Accordion (Disclosure Group)

DisclosureGroup

Installation

CLI
Manual

npx shadcn add https://hq-ui.vercel.app/r/accordion

Examples

Basic

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

accordion-basic

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.

Yes, you can upgrade or downgrade your plan at any time from your account settings. Changes will be reflected in your next billing cycle.

We accept all major credit cards, PayPal, and bank transfers. All payments are processed securely through our payment partners.

Multiple

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

accordion-multiple

Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.

Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.

Disabled

Use the isDisabled prop on AccordionItem to disable individual items.

accordion-with-disabled

Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.

This section contains information about premium features. Upgrade your plan to access this 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 AccordionItem to add borders to the items.

accordion-with-borders

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.

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.

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.

accordion-in-card
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.

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.

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.
Chart
Bubble

On this page

  • Installation
  • Examples
  • Basic
  • Multiple
  • Disabled
  • Borders
  • Card