Overview
The Image Accordion Block creates an interactive expandable image gallery where clicking on an image expands it while collapsing others. Perfect for showcasing portfolios, before/after comparisons, or image galleries in a space-efficient way.
Key Features
- Interactive Image Display: Click to expand images with smooth animations
- Automatic Collapsing: Other images automatically shrink when one is expanded
- Customizable Layout: Horizontal or vertical orientation
- Responsive Design: Adapts beautifully to all screen sizes
- Overlay Text Support: Add titles or descriptions over images
- Custom Sizing: Control expanded and collapsed widths
- Smooth Transitions: Configurable animation speeds
How to Use
- Click the + button in the editor
- Search for Image Accordion
- Upload or select images for each accordion item
- Add optional overlay text for each image
- Configure orientation in settings
- Adjust spacing, sizing, and animation settings
- Preview and publish
Block Settings
Layout Settings
- Orientation: Horizontal or vertical accordion layout
- Expanded Width: How much space the active image takes
- Collapsed Width: Size of inactive images
- Gap: Spacing between accordion items
Animation Settings
- Transition Duration: Speed of expand/collapse animation
- Easing Function: Animation timing curve
Common Use Cases
- Portfolio Display: Showcase multiple projects in limited space
- Product Gallery: Display product variations or features
- Before/After Comparisons: Show transformations or improvements
- Team Showcase: Introduce team members with expandable profiles
Best Practices
- Use images with similar aspect ratios for consistent appearance
- Optimize images for web to ensure smooth animations
- Keep overlay text concise and readable
- Test on mobile devices – consider vertical orientation for mobile
- Use 3-5 images for optimal impact