← Mighty Studio · Discover gallery
Interactive Learning Template
Horizontal accordion
By Jocelyn Nadeau · 1,188 uses
Side-by-side panels that learners open to compare related topics, paths or program parts. You add page instructions, panel text and optional details like images, badges and buttons.
About this template
In the creator's words, from Jocelyn Nadeau.
Present content in a visually engaging and space-efficient format with the Horizontal Accordion interactive.
This component allows learners to explore a series of topics, concepts, or categories by expanding individual panels to reveal additional information. Each panel can include a title, description, image, badges, key metrics, learning objectives, and a customizable action button, making it ideal for both introductory overviews and detailed content exploration.
The Horizontal Accordion is particularly effective for:
- Presenting related topics side by side
- Comparing concepts, products, services, or processes
- Showcasing learning paths or program components
- Organizing large amounts of information without overwhelming learners
- Encouraging self-directed exploration and discovery
On desktop devices, panels expand horizontally to maximize available screen space and create an immersive browsing experience. On mobile devices, the layout automatically adapts to a vertical accordion for optimal usability.
With extensive customization options for colors, typography, content, and navigation, the Horizontal Accordion can be tailored to match your brand and learning objectives while maintaining a clean, modern learner experience.
Pick the panel behavior first
With audio player is the default preset. It starts with six panels and includes panel audio, transcription text and action links. Pick it for panel audio or links to another lesson, block or URL.
Modals starts with six panels. Pick it when panel details should open in a pop-up.
Always vertical starts with six panels. Pick it when you want the vertical layout from the start.
Fill in learning path panels
The first panel uses Fundamentals as the label and ADDIE / SAM as the short title. It also includes Duration: 3h and a mastery statement.
Swap these for your own module labels, short titles and summaries. Add panel visuals, color choices and optional sections for objectives or key indicators. You can also turn on action and details buttons.
Learners open and lock panels
The opening instruction tells learners to hover or click a tab to explore it. They click the open tab to lock it open.
Numbers are turned on in all three presets. With audio player and Always vertical can use panel viewing for completion.
Use another accordion for smaller reveals
Pick Mini Accordion with Icons for compact click-to-reveal cards with icons.
Pick Accordion with Image & Text when one image should carry the visual context. Pick Reveal table content when learners need to reveal table information at the moment they need it.
Questions people ask
- Which preset includes audio?
- Use With audio player for audio. Always vertical also starts with audio assets.
- Can I force a vertical layout?
- Yes. Start from Always vertical. It uses a vertical orientation setting from the start.
- Can learners open pop-up details?
- Yes. Use Modals. It lets panel details open in a pop-up, including badges, objectives and description.
Template by Jocelyn Nadeau. Notes by the Mighty team. Publishing, SCORM and LMS details that apply to every template are in the Mighty FAQ.