Accordion Component

Written Steps:

Step 1: In the CMS (Umbraco), locate the site you want to create an Accordion for, in the navigation pane on the left hand side

Step 2: Hover over the site name, and click the 3 dots that appear on the right

Step 3: The left pane should expand and show the Create pane. in this new pane, click 'FAQs'

Step 4: An FAQ Content page should be created, enter a name where it says “Enter a name…” its at the top of the window - the field should be automatically in focus. then click save in the bottom right corner.

Step 5: Navigate off the component, by using the left navigation pane, click any other page for example “Home”. and then navigate back to the component you just created. it should now have the “Create FAQ Item” button under the name of the component at the top of the page, along with the notice, “No child items have been added”:

Step 6: Click the “Create FAQ Item” button, this is where you create your FAQ Items, you need to give each item a Title, this is separate from the heading of the FAQ content, which you can see is under the “Content” section. this Title is for your internal use, and so can be named anything. if you want to make it the item title too you can do, but it’s easier to keep this simple. For example, “Q1”

Step 7: In the Content section, fill in the 'Accordion item heading' . the heading will be that which a user will click to expand. so, for example: What insurance do you cover?

Step 8: In the Accordion item description, you put in the description of what you’re answering from the heading. what the expanded content will be. following the example, we can put: “Car, Pet and Home insurance”. and because it is a Rich Text editor, you can use bullet points if you’d like, and make it look something like this: “Items we cover: Car, Pet and Home”

Step 9: Click save, and when its complete, you’ll notice a back arrow appear next to the FAQ Title, click that arrow to view the whole accordion and its content. it also takes you back to accordion to create more.

Step 10: Repeat Steps 6-9 for as many Items as needed. These components are reusable! so you can create as many accordion items as you want, not just FAQs.

Step 11: Once you have created all you want, publish the component to the site. so, it’s made available to be used. do this by going to the parent page - the one that lists all the Child Items and has the “Create FAQ Item” button. in the bottom right where you click save, click save and publish.

Step 12: Now you can go down the list of items and check all the ones that you want to publish. if you want to publish them all, simply use the check all box next to the “Name” heading, it is the shape of a ticked box. this will select all. Once selected, click publish in the blue bar that appears above the selected items. then click publish when prompted in the pop-up box.

Congratulations, you have created the Accordion/FAQ Component!

Add FAQ Item to website

Step 13: Now to add the component to the website, navigate to the page you want to use the component on, for example the FAQ Page, click on the page using the Navigation pane on the left-hand side

Step 14: in the Layout Container, in the Grid Layout add a section block, by clicking add content and then selecting Section Block from the Pane that appears on the right-hand side.

Step 15: in the Section Block add content and from the Layout Blocks from the Right-hand side click Manuscript Single Column, or whichever layout you’d like to use to add more content later.

Step 16: under the layout you chose, click add content - be sure to click the right one. if you click the layout blocks add content you should see the right pane appear with ‘Content Blocks’. if Layout Blocks has opened again, you’ve clicked the wrong one.

Step 17: In the Content Blocks Right Pane, you should see FAQ Item listed there, with arrows as an icon. click it, and the FAQ Item picker should be opened.

Step 18: Click Add next to the FAQ Item Picker and the Select Content pane should open. locate the Accordion Component you created earlier; it should be listed under the site you created it for. Note: the component itself will not be selectable, rather you’ll have to click the small drop-down arrow next to it, to open the list of FAQ Items. Once you do, the component should open up in the pane and the list of items you published should be there

Step 19: Click/Check as many items as you wish to use, they’ll be highlighted with a tick mark when selected and then press the submit button in the bottom right corner. you will see they’ve been added to the FAQ Item picker. at this point you can add other FAQ Items from other components you may make for other sites within Umbraco too - if there are any similar or overlapping uses. like the insurance question.

Step 20: When you’re content with the contents of the picker, click create in the bottom right-hand corner. You should see the pane close, and the FAQ Item in the content block. Save and publish in the bottom right-hand corner and the component will go live on the site!

Item Styling

Step 21: To change the way the component looks on the page, you can use the Item Styling option within the component settings. to do this, click on the component within the section block to bring up the Component Content, and in the right-hand pane notice the gear and settings icon, click on it to access Item styling

Step 21 Alt: An alternative and quicker way to access Styling, is by hovering the cursor over the component in the Page Contents and selecting the gear icon on the right of the item - you will also see icons for editing the content, deleting and copying it.

Step 22: In the Item Styling pane on the right, you can pick the colour for the Question and the Answer. Click add, and a selection of options will appear that have been taken from the Theming of the site, select which colour you want from the list, and when you’ve done that for all the items you want (Question and Answer) you can click Submit in the bottom right corner.

Tips: You can remove the colour change in styling simply by pressing the remove button next to the colour, once you’ve selected.

And that is how FAQ Items are created and used in Umbraco!!