The Accordion Block is a versatile content organization tool that allows you to create collapsible sections of content. This block is perfect for product information, step-by-step guides, or any content where you want to save space while keeping information accessible.
Overview
The Accordion Block creates interactive expandable sections where users can click on headers to reveal or hide content beneath. Each accordion can contain multiple items, and you have full control over styling, behavior, and appearance across all devices.
Adding an Accordion Block
To add an Accordion Block to your page:
- In the Block Editor, click the + button to open the block inserter
- Search for “Accordion” or navigate to the DigiBlocks category
- Click on the Accordion block to insert it
The block comes with one default accordion item that you can immediately start customizing.
Managing Accordion Items
Adding New Items
To add more accordion items:
- Click the Add Accordion Item button at the bottom of the accordion
- A new item will be added below the existing ones
- Click on the title area to edit the heading text
- Click in the content area to add your content
Editing Content
Each accordion item has two editable areas:
Title/Header: Click on the title text to edit it directly. This supports rich text formatting including bold, italic, and links.
Content: Click in the content area below the title to add your text. This area supports:
- Rich text formatting
- Lists (ordered and unordered)
- Links
- Basic HTML formatting
Item Controls
Each accordion item has control buttons that appear when you hover over or select the item:
- Move Up (↑): Moves the item up in the order
- Move Down (↓): Moves the item down in the order
- Duplicate: Creates a copy of the item
- Remove (🗑): Deletes the item permanently
Accordion Behavior
You can control how the accordion functions:
Allow Multiple Open: By default, only one accordion item can be open at a time. Enable this option in the Options tab to allow multiple items to be expanded simultaneously.
Options Tab Settings
Icon Configuration
Icon Type: Choose between two icon styles:
- Plus/Minus: Shows a + when closed and – when open
- Up/Down Arrows: Shows a down arrow when closed and up arrow when open
Icon Position: Set whether icons appear on the left or right side of the title.
Icon Size: Adjust the size of the icons using the responsive slider control (12px to 48px).
Style Tab Settings
Colors
The accordion offers comprehensive color customization with Normal and Hover states:
Normal State Colors:
- Title Color: Color of the accordion titles
- Active Title Color: Color when an accordion item is expanded
- Icon Color: Color of the expand/collapse icons
- Active Icon Color: Icon color when item is expanded
- Background Color: Background color of accordion items
- Active Background Color: Background when item is expanded
- Content Text Color: Color of the content text
- Border Color: Color of borders around items
Hover State Colors:
- Title Hover Color: Title color when hovering
- Icon Hover Color: Icon color when hovering
- Background Hover Color: Background color when hovering
- Content Hover Color: Content text color when hovering
- Border Hover Color: Border color when hovering
Typography
Title Typography: Control the appearance of accordion titles:
- Font family selection
- Font size (responsive)
- Font weight and style
- Text transform (uppercase, lowercase, capitalize)
- Text decoration
- Line height and letter spacing
Content Typography: Control the appearance of content text:
- All the same options as title typography
- Independent responsive sizing
- Separate styling from titles
Border & Shadow
Border Style: Choose from multiple border styles:
- None, Solid, Dotted, Dashed, Double, Groove, Inset, Outset, Ridge
Border Width: Set individual border widths for top, right, bottom, and left sides (responsive).
Border Radius: Control corner rounding with individual corner settings (responsive).
Box Shadow: Add depth with customizable shadows:
- Normal Shadow: Default shadow state
- Hover Shadow: Shadow when hovering over items
- Controls: Horizontal offset, vertical offset, blur, spread, color, and position (inset/outset)
Spacing
Padding: Control internal spacing within accordion items (responsive).
Margin: Control external spacing around the entire accordion block (responsive).
Advanced Tab Settings
Animation
Add entrance animations to make your accordion more engaging:
- Select an animation from the dropdown menu
- Choose from fade, slide, zoom, bounce, and many other effects
- Use the Preview Animation button to test the effect
- Animations trigger when the accordion comes into view
Visibility Controls
Control when the accordion appears on different devices:
- Hide on Desktop: Hide the accordion on desktop screens (992px+)
- Hide on Tablet: Hide on tablet screens (768px-991px)
- Hide on Mobile: Hide on mobile screens (767px and below)
Hidden elements appear with reduced opacity in the editor but are completely hidden on the frontend.
Additional Settings
HTML Anchor: Create a unique web address for this accordion:
- Enter a word or two without spaces
- Creates a direct link to this section of your page
- Useful for table of contents or navigation menus
Additional CSS Classes: Add custom CSS classes for advanced styling:
- Separate multiple classes with spaces
- Allows for custom CSS targeting
- Helpful for theme integration
Best Practices
Content Organization
Logical Grouping: Group related information together in individual accordion items. For example, group all shipping-related questions in one section.
Clear Titles: Use descriptive, action-oriented titles that clearly indicate what content will be revealed.
Concise Content: Keep content within each accordion item focused and concise. If content is very long, consider breaking it into multiple items.
Design Considerations
Visual Hierarchy: Use typography settings to create clear visual hierarchy between titles and content.
Consistent Styling: Maintain consistent colors and spacing throughout your accordion to match your site’s design.
Accessibility: Ensure sufficient color contrast between text and backgrounds for readability.
Performance Tips
Content Length: While accordions can handle lengthy content, consider the impact on page load times if including very large amounts of text or media.
Animation Usage: Entrance animations add visual appeal but use them judiciously to avoid overwhelming users.
Responsive Behavior
The Accordion Block is fully responsive and includes device-specific controls:
Mobile Optimization: The accordion works particularly well on mobile devices where screen space is limited.
Touch Interaction: Accordion headers are optimized for touch interaction on mobile devices.
Responsive Typography: Font sizes, line heights, and spacing adjust automatically across devices based on your settings.
Common Use Cases
Product Information
Organize product details into expandable sections:
Title: "Technical Specifications"
Content: "Detailed product specifications and requirements..."
Title: "Installation Instructions"
Content: "Step-by-step installation guide..."
Service Descriptions
Break down complex services into digestible sections:
Title: "Phase 1: Discovery and Planning"
Content: "During this phase, we work with you to understand..."
Styling Tips
Creating Visual Consistency
Color Scheme: Use your brand colors for backgrounds and text to maintain consistency with your site design.
Typography: Match your accordion typography with your site’s existing fonts and sizing.
Spacing: Use consistent padding and margin values that align with your site’s overall spacing system.
Enhancing User Experience
Visual Feedback: Use hover states and active colors to provide clear feedback when users interact with the accordion.
Icon Positioning: Choose icon position based on your content flow – left icons work well for short titles, right icons for longer titles.
Border and Shadow: Subtle borders and shadows help define accordion items and improve visual separation.
Troubleshooting
Content Not Displaying
If accordion content isn’t showing properly:
- Check that the item is set to open in the editor
- Verify there’s actual content in the content area
- Ensure visibility settings aren’t hiding the content on your current device
Styling Issues
If custom styles aren’t applying:
- Check for conflicting CSS from your theme
- Verify that custom CSS classes are spelled correctly
- Ensure sufficient specificity in your custom CSS
Animation Problems
If animations aren’t working:
- Confirm JavaScript is enabled in the browser
- Check for JavaScript errors in the browser console
- Test with animation disabled to isolate the issue
Mobile Display Issues
If the accordion doesn’t work properly on mobile:
- Test responsive settings in the editor
- Check visibility controls for mobile devices
- Verify touch interactions are working properly
The Accordion Block provides a powerful way to organize and present content while maintaining a clean, user-friendly interface. With its extensive customization options and responsive design, it can adapt to virtually any design requirement while improving the user experience on your website.