Expandable Blocks

Better-structure your content with an expand/collapse pattern.

A short and sweet one today, we're happy to introduce to you the Expandable block.

Ever wanted to make a bunch of content collapsed by default?

Well now you can!

What is it?

The Expandable block lets you create expandable-or-collapsible blocks in your content. Super useful for things like FAQs or multi-stepped documentation that would otherwise make for long and unruly pages.

How do I use it?

Select the 'Expandable' option in the editor palette (CMD + / on Mac, CTRL + / on Windows) to add the block wherever you need it.

Enter a title or short description for the block, hit Return or tap the block's chevron icon to expand the block and start adding more content.

Best practices

The expandable block is best used when you know you have discrete pieces of content that won't all be relevant to any single reader at a given time. It's great for things like FAQs and multi-stepped content.

Example: FAQs

How can I contribute to Super Cool Project?

Thanks for asking! Check out the How To Contribute page for a detailed guide.

How is Super Cool Project different to Other Cool Project?

The main difference is that Super Cool Project is Super Cool while Other Cool Project is simply just Cool. Pretty simple really.

Can I donate to Super Cool Project?

Yes! You can contribute to Super Cool Project financially through GitHub Sponsors.

Does Super Cool Project have a Code of Conduct?

We sure do! We expect all contributors to follow our Code of Conduct. Check out our How to Contribute page for the TL;DR, or view the whole Code of Conduct in full.

Example: Multi-stepped content

Heads up: these steps include example install and bash commands. Don't run them, just in case.

Step 1: Install the Super Cool Project package

Install with either npm install {super-cool} or yarn add {super-cool}

Step 2: Write your first Super Cool component

Let's build out a simple Hello World with Super Cool

import SuperCool from 'super-cool'

export const HelloWorld = SuperCool(
    <h1>Hello World</h1>
)

SuperCool.render(HelloWorld, '#main');

Step 3: Get familiar with props

Let's extend the work we did in Step 2 to include some props from elsewhere in our code.

import SuperCool from 'super-cool'
const props = {
    introText: 'Hello Shrek',
}

export const HelloWorld = SuperCool(
    <h1>{props.introText}</h1>
).withProps(props)

SuperCool.render(HelloWorld, '#main');

Enjoy!

We've had a lot of feedback asking for blocks like this and while it's a pretty simple addition to the editor, there's a bunch of new possibilities to explore when creating your content.