how to force only one accordian open in hubspot

Lussy04

2 min read

·

25-01-2025

1

0

Share

HubSpot's accordion component is a great way to present information concisely. However, the default behavior allows multiple accordions to be open simultaneously. This can be visually confusing and detract from the user experience. This article will show you how to force only one accordion to be open at a time using custom CSS. We'll cover the process step-by-step, making it easy for even those with limited coding experience to implement.

Understanding the Problem and Solution

The standard HubSpot accordion allows multiple sections to expand at once. This isn't always ideal for a clean, user-friendly experience. The solution involves adding custom CSS to your HubSpot page to override the default behavior. This CSS will target the accordion elements and ensure that only one section can be expanded at any given moment.

Step-by-Step Guide: Enforcing Single Accordion Open

Here's how to modify your HubSpot page to restrict your accordion to a single open section:

Step 1: Accessing the Custom CSS Editor

1. Navigate to your HubSpot page: Log into your HubSpot account and locate the page containing your accordion.
2. Open the page editor: Click "Edit" to access the page editor.
3. Find the "settings" menu: Look for a settings icon (often a gear) within the page editor. This may vary slightly depending on your HubSpot version.
4. Locate the CSS editor: Within the settings, you should find an option for "Custom CSS." Click to open it.

Step 2: Adding the Custom CSS Code

Paste the following CSS code into the custom CSS editor:

.hubspot-accordion__panel {
  display: none; /* Initially hide all panels */
}

.hubspot-accordion__panel.is-active {
  display: block; /* Show only the active panel */
}

This code uses the HubSpot class names for accordion panels. It initially hides all panels and then shows only the panel that is marked as "active" (when expanded).

Step 3: Save and Test

After adding the CSS, click "Save" or the equivalent button to apply your changes. Preview your page to verify that only one accordion section opens at a time. If it's not working, double-check that you've correctly copied and pasted the CSS code, and ensure your accordion is using HubSpot's default accordion component.

Troubleshooting and Alternatives

• Incorrect Class Names: HubSpot's class names might change in future updates. If the code doesn't work, inspect the accordion element using your browser's developer tools (usually accessed by pressing F12) to find the correct class names and adjust the CSS accordingly.
• Custom Accordion Implementations: If you're using a custom-built accordion rather than HubSpot's default component, the CSS selectors will need to be adjusted to match your specific implementation's class names or IDs.
• JavaScript Solutions: While CSS is generally sufficient, more complex accordion behaviors may require JavaScript. However, for the simple requirement of only one open section at a time, CSS is the most efficient solution.

Conclusion

By implementing this simple CSS code, you can significantly improve the usability of your HubSpot accordions. This ensures a cleaner, more intuitive user experience by preventing the potential confusion of multiple simultaneously expanded sections. Remember to always test your changes thoroughly after implementing any custom CSS. This straightforward method ensures your content remains well-organized and visually appealing. If you encounter any issues, don't hesitate to consult HubSpot's documentation or their support channels for assistance.