Accordion

An accordion is like a stack of folders on your computer: you can click on one to open it up and see what's inside, while the others stay closed. On a webpage, it's a way to organize lots of information neatly. It's handy for things like FAQs or product details where you want to show a lot of info without cluttering up the page.

The accordion block is fairly straightforward and simply accepts entries created in the FAQ collection as this is the primary use case the accordion will be used for on this site. Here's to begin adding items to the accordion:

To get started with linking an existing entry select Link Existing Item. Otherwise to create a new item select Create and Link Item.

Selecting Create and Link Item gives you the ability to create your own question and answer if it doesn't yet exist. Let's have a look:

We now get access and ability to add a new entry to the FAQ's collection from here. All that needs to be done is enter a title and an answer. Optionally selecting Link a Resource allows you to link this accordion item to another entry from any collection. It could be a blog post, a product, a piece of literature, or anything else you want to link as long as it exists as an entry.

Once the entry has been created be sure to save and it will automatically be added as a linked entry to the accordion items.

Once the accordion items are entered as desired the size in which the accordion should span the page can be selected. It's nice to use Live Preview to view how it will appear in real time.

What does each field do?

Recapping the steps above here's a small glossary of what each field does within our Accordion block:

Entries - Create and Link an Item allows you to create a new entry and add link it as an entry to Accordion Entries field. Link Existing Item lets us view any existing entries we have already create and gives us the ability to link them to our Entries field.

Size - Selecting a size from the available options Normal, Large, and XL gives us the option to select how we want the accordion to span the width page. Always nice to use Live Preview for this.

In this doc we introduced the accordion block as a way to organize information, primarily using FAQs. It guides users through creating and linking entries, selecting the accordion's size, and explains the purpose of each field within the block. Here's to keeping content clean and neat!