Connect directly with our accredited consultant to get clear answers on your HubSpot underutilized features, integrations, reporting and automation.
HubSpot Consulting Needs
Custom Automation Plan 
Accordions are a versatile web design feature that helps create dynamic and organized layouts. They’re useful for FAQs, product descriptions, and any content-heavy section where space-saving is essential.
If you’re looking to enhance your HubSpot website, learning how to build an accordion HubSpot module can be a game-changer.
In this guide, we’ll walk you through creating an accordion module tailored to your needs. Whether you’re starting from scratch or building for a group of content items, this step-by-step tutorial has you covered.
Did you Know That?
Studies show that users retain 25% more information when content is presented in digestible sections, like accordions.
They also contribute to a 15% faster page interaction time, as users quickly locate the information they need.
For mobile users, accordions enhance usability by collapsing content into a sleek design, leading to a 20% lower bounce rate.
Source: Statista
Accordion modules improve user experience by presenting information in a collapsible and expandable format.
This ensures that users can quickly access the details they need without overwhelming them with lengthy content.
For businesses targeting audiences in the USA, where user-friendly design is paramount, accordions can make a big difference.
Here’s what we’ll cover in this guide:
By the end of this blog, you’ll not only understand how to add an accordion in HubSpot module, but also have a fully functional and customizable solution ready to implement.
Before diving into code, plan the structure of your accordion.
Decide what information you want to include, and whether the content will be static (fixed) or dynamic (fetched from a database or CMS).
Key Features to Consider
Collapsible Sections
Each section should expand or collapse when clicked.
Responsive Design
Ensure it’s mobile-friendly.
Customizable Styles
Ability to adjust colors, fonts, and sizes.
Dynamic Content Integration
Pull content directly from your HubSpot CMS if needed.
Example Structure:
Title (e.g., FAQ, Product Details)
Accordion items with headings and corresponding descriptions.
Navigate to HubSpot Design Manager:
Log in to your HubSpot account and go to Marketing > Files and Templates > Design Tools.
Create a New Module:
Click on the “File” menu, then select “New File.” Choose “Module” and name it “AccordionModule.”
Define Fields for the Module:
Add the following fields:
Accordion Title: For the overall title of the section.
Accordion Items Group: A repeatable group for headings and content.
Set Up the HTML and HubL Structure:
Use the code below as a starting point:
<div class=”accordion”>
{% for item in module.accordion_items %}
<div class=”accordion-item”>
<h3 class=”accordion-header”>{{ item.heading }}</h3>
<div class=”accordion-content”>{{ item.content }}</div>
</div>
{% endfor %}
</div>
To ensure your accordion looks professional and matches your branding, you’ll need some CSS. Below is an example:
.accordion {
border: 1px solid #ddd;
border-radius: 5px;
}
.accordion-item {
margin-bottom: 10px;
}
.accordion-header {
background-color: #f4f4f4;
padding: 10px;
cursor: pointer;
font-weight: bold;
}
.accordion-content {
padding: 10px;
display: none;
border-top: 1px solid #ddd;
}
.accordion-content.active {
display: block;
}
To make the accordion functional, you’ll need JavaScript. Here’s a basic script to toggle content visibility:
To make the accordion functional, you’ll need JavaScript. Here’s a basic script to toggle content visibility:
document.querySelectorAll(‘.accordion-header’).forEach(header => {
header.addEventListener(‘click’, () => {
const content = header.nextElementSibling;
content.classList.toggle(‘active’);
});
});
For larger projects, you might want to group multiple accordions within a single module. Here’s how:
Add a Repeatable Field Group
In the module editor, create a group for accordion items, making it repeatable. This allows you to add as many items as needed.
Update Your HubL Code
<div class=”accordion-group”>
{% for accordion in module.accordion_groups %}
<div class=”accordion”>
<h2>{{ accordion.group_title }}</h2>
{% for item in accordion.items %}
<div class=”accordion-item”>
<h3 class=”accordion-header”>{{ item.heading }}</h3>
<div class=”accordion-content”>{{ item.content }}</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
Building an accordion in HubSpot is a straightforward yet impactful way to enhance user experience on your website. By following this guide, you’ve learned how to build an accordion HubSpot module group for dynamic content, and style it for professional results. Whether you’re showcasing FAQs, product details, or other information, this module will keep your content organized and accessible.
Have questions or need further assistance? Drop a comment below or contact us for expert guidance. Let’s make your website shine!
