Accordion Module Documentation

Overview

The Accordion module in the HubSpot CMS allows you to, in the context of web design and development, refers to a user interface component that allows you to display collapsible and expandable content sections on a webpage. It's often used to present information in a compact and organized manner, especially when dealing with a lot of content that needs to be displayed in a limited amount of space.

 

Features Included

The Accordion Module in HubSpot offers beneficial features for your web page to help drive more traffic and offer transparency.

These features include:

  • Structure: An accordion consists of multiple sections or panels. Each panel has a header/title and a content area. The header is usually a clickable element that users can interact with.
  • Collapse and Expand: When a user clicks on a header, the corresponding content area expands to reveal its contents. If another header is clicked, the previously open panel may close, and the new one will open. This helps to keep the interface clean and prevents too much content from being visible at once.
  • Animation: The transition from a closed to an open state, and vice versa, is often accompanied by a smooth animation. This enhances the user experience and provides a visual cue for the action.
  • Customization: Accordions can be customized in terms of styling, animations, and behavior. You can often adjust settings such as the animation speed, icon placement, and more.
  • Responsive Design: Good accordion modules are usually responsive, meaning they adapt well to different screen sizes and devices. On smaller screens, the accordion might transform into an accordion-like dropdown menu or expandable list.

Module Set up

Setting up the Accordion Module is easy and straightforward. All you have to do is perform a simple drag and drop. 

Now let’s go through the setup steps:

  • First, log in to your HubSpot account and navigate to the “Marketing” tab.
Marketing

 

  • Click on “Website” in the dropdown menu and select “Website Pages” from the extended menu.
Website

 

  • Select the template and create your web page as usual. Under the module selection menu, search for “Accordion” and select the module.
Accordion

 

Module content

Screenshot_20230731_154638

 

Under “Content”, you can edit the content you want to be displayed on your Accordion section. Easily adjust and update the “Animation”, “Heading”, and “Description” as you please.

 

Module styles

Screenshot_20230731_155533

 

Module can be custom-styled to spacing, margin, heading font style, description style, and active state easily managed.

 

Support

Revival Pixel Support

For support, please reach out via email to
We aim to reply within 1 business day.