Build a Custom Mini Accordion Block in Rise

Sometimes the native Rise accordion is exactly what you need—and sometimes you just need a little more layout flexibility around it. In this walkthrough, we’ll build a custom mini accordion block with an image, body text, and Rise-style accordion behavior using Mighty Studio.

Design with Me: Building a Custom Mini Accordion Block in Rise (No Code Needed)

This comes from Brianna’s MC Challenge #4 build: create a block you wish Rise had.

The block we’re building#

The goal was not to replace Rise accordions with something wildly different. It was to make a block that fits alongside Rise’s native accordion block while adding a few controls Rise doesn’t provide in one native block.

The finished template includes:

• A side-by-side layout with image and text
• Accordion items that look and behave like native Rise accordions
• Full rich text editing capability
• Accessibility support for keyboard users and screen readers
• Options to place the image above or below the text
• Options to swap image and text column positions
• Image alt text and caption fields
• Image alignment controls
• An image size slider from 10% to 100% of the column width
• Layout choices, including a 50/50 split and a 1/3 versus 2/3 split
• An accent color setting
• A behavior toggle to allow multiple accordion items open at once

Start a new Studio template#

Brianna starts in Mighty Studio, where custom templates are created and managed. Here’s how to start a custom template in Studio:

1. Open your Rise course with Mighty enabled.
2. Open your Studio templates.
3. Go to Created by me.
4. Select New template.

On the new template page, Mighty provides a simple prompt you can copy into your AI assistant. In the video, Brianna takes that prompt over to Claude so it can help generate the first version of the template.

With Mighty Studio, you’re not starting with a blank code editor. You’re describing the interaction you want, then reviewing and refining the result like an instructional designer.

Prompt the block you actually want#

Here’s the key part of Brianna’s initial prompt, which she gave to Claude:

I want a side-by-side layout of an image and text plus accordions. I want the accordions to look like the native Rise accordions and behave exactly the same way. I want full rich text editing capability, full accessibility for keyboard users and screen readers, and the option to have the image appear above or below the text. What questions do you have for me?

A few things are doing important work in that prompt.

First, it names the layout: side-by-side image and text plus accordions. That keeps the block focused.

Second, it anchors the design to something familiar: native Rise accordions. If your stakeholders already understand Rise interactions, this helps the custom block feel like part of the same course system—not a random add-on.

Third, it asks for accessibility and editing requirements up front. That matters. A clever interaction is only useful if authors can maintain it and learners can actually use it.

After answering a few follow-up questions from Claude, Brianna reviewed the plan and told Claude to build it.

Preview the first draft in Studio#

Once the first draft was built, Brianna returned to the Studio tab and refreshed the page. The new block appeared in the template editor.

To test it, she turned on Authoring test mode.

Authoring test mode lets you try the form fields and see how the block behaves before you release it. In this first pass, Brianna tested:

1. Adding a sample image
2. Entering alt text
3. Adding a caption
4. Editing the body text
5. Editing the accordion titles and content

The block mostly worked—but there was one important mismatch.

The accordions didn’t quite look like the native Rise accordion block. Specifically, they were missing the outlines that make Rise accordions look like Rise accordions.

Like with many creative projects, the first AI-generated draft is rarely the final design. Treat it like a working prototype. You’re still the designer.

Refine the accordion styling#

To fix the mismatch, Brianna went back to her Rise course and compared the custom block with the native Rise accordion.

She took screenshots of the native accordion in both states: closed and open.

Then she shared those screenshots with Claude and described what was missing.

After a few tweaks back and forth between Claude and Studio, the custom accordion matched much more closely. The outlines were corrected, the open state looked right, and the accordion behavior felt consistent with Rise.

This is the part of the process that feels most like normal design work: compare, adjust, preview, repeat.

Test the authoring controls#

Once the accordion styling was in better shape, Brianna reviewed the form that Claude created. This form is what anyone using the Studio template will use to edit the block later.

With Authoring test mode turned on, she tested each control.

Layout controls

The layout section included options to:

• Move the image above or below the text
• Swap the image and text column positions
• Choose between layout splits, including 50/50 and 1/3 versus 2/3

That gives you several ways to use the same block across a course without making every instance look identical.

For example, you might use a wider text column when the accordion content is the main event, then flip the layout later when the image carries more instructional weight.

Image controls

The image section included fields for:

• Image upload
• Alt text
• Caption
• Image size
• Image alignment

At one point, the image felt too large in the layout. Instead of accepting the default, Brianna asked Claude to add a sliding scale to adjust the image size.

After refreshing the Studio page, the draft number increased and a new image size slider appeared in the image panel. The slider allowed the image to move from 100% of the column width all the way down to 10% of the column width.

Brianna landed around 70%, which gave the image room to breathe without overpowering the accordion content.

She also tested image alignment, setting it to the left so the image aligned with the text above it.

Accordion content controls

The accordion controls let her edit each item’s title and content. One nice detail: when she changed an accordion title, that title also updated in the authoring form.

That makes reordering easier. If you click and drag items to rearrange them, you can tell which accordion item you’re moving without opening each one.

Style and behavior controls

The style panel included an accent color setting. Brianna adjusted it to match the image she had added, so the open accordion state felt visually connected to the rest of the block.

The behavior panel included a toggle for Allow multiple accordions open at once.

With the toggle off, the accordion behaves like a typical single-open interaction. With it on, learners can open multiple sections at the same time.

This is useful because sometimes you want a tight, step-by-step reveal, while other times, you want learners to compare several pieces of information at once.

Save your preferred defaults#

Before releasing the template, Brianna saved her current configuration as the new default.

That included:

• The added fourth topic
• The accent color
• The image
• The layout and image settings
• The other form values she had already configured

Saving defaults means those settings appear automatically whenever the block is added to a course. You’re not just building a one-off block—you’re creating a reusable starting point.

If you work under tight timelines or brand requirements, this is where the payoff shows up. A well-set default can save future-you, your teammates, or your client from rebuilding the same layout decisions every time.

Name, tag, and release the template#

Once the block looked and behaved the way she wanted, Brianna prepared it for release.

One of the best things about Studio is the template library, where hundreds of Mighty-users have uploaded their custom-made interactions to share with the Mighty community. All you have to do to use one is pick the template you want to use, add it to your Rise course, and fill in your content.

To upload her accordion template, Brianna first renamed the template from Untitled interactive to: Accordion with image and text. Then she added keywords to make it easier to find later:

• accordion
• click to reveal
• columns
• MC challenge number four

“Accordion” is the obvious search term, but “click to reveal” and “columns” are also terms a designer might use when looking for this kind of block.

Finally, she selected Release draft.

Because this was the first release of a brand-new template, she didn’t need to add release notes. Release notes are more useful when you’re updating an existing template and need to explain what changed.

Once released, the interactive went live for her to use in courses.

Why this matters#

Rise gives you strong native blocks, and for many projects, those blocks are enough. But experienced Rise designers eventually run into a familiar constraint: you want a slightly different combination of content, layout, and interaction than the block library currently offers.

This mini accordion is a good example. None of the individual ingredients are unusual:

• Image
• Text
• Accordion
• Caption
• Accent color
• Layout options

The value is in combining them into one reusable, editable block that still feels native to Rise.

It also keeps accessibility and maintainability in the conversation. Brianna specifically asked for keyboard and screen reader support, alt text, and rich text editing. Those aren’t polish items—they’re part of making the block usable in real course production.

A good custom block still feels familiar#

The best part of this build is that it doesn’t try to be flashy. It solves a real authoring problem: “I want a Rise-style accordion, but with better image and layout flexibility.”

That’s a smart way to approach custom Rise blocks with Mighty. Start with a native limitation you run into often, then build the smallest reusable template that removes the friction.

Try this in your next course: pick one Rise block you use constantly, name the one layout option you wish it had, and prototype that as a Studio template. You might end up with a new favorite block in your lineup.