main content Accordion

Displays collapsible content panels for presenting information in a limited amount of space. (Note this tool is being phased out for the new accordion tool that built into LiveWhale 1.7 and up.)

Instructions using a widget and blurbs

Description: Here is an expanding “accordion” style and created using LiveWhale Blurbs a Blurbs Widget and a special class within that widget.

---

---

Step-by-step

In LiveWhale, create a blurb type.

If this is a Q&A format, add blurbs creating individual questions and answers per blurb.

Type the question into the Blurbs Title (i.e., Untitled Blurb) and the answer in the Blurb body. The title of the blurb will display as the section header (e.g. “Is it true you are a carrot?”) while the answer will remain hidden until the user clicks on the question.

Create a Blurbs widget.

Select your Blurbs type.

In the Format area, enter the following in the “Format results with” text area making sure the {title} is surrounded by selectors with the class “title” in it.:

Finally, in the Advanced section, type in js-accordion in the Apply custom class text field.

On your content page, place the widget on the page (you can use the gear/sprocket icon) and it should work automagically!

Instructions using HTML

Description: Here is an expanding “accordion” style and created using HTML. Please contact the New Media team if you need help.

Sample of using HTML version

---

---