Accordion

Making expandable content segments in your page

The 'Accordion' Content Type

The accordion content type is almost exactly like 'Content (no title)' - you can add it anywhere in the page and put any text and foreground images you like into it.
The only difference is that you can make segments of your text collapsed, on page load - and the site visitor can  expand/collapse that segment by clicking on the headline.

One content type - Multiple collapsible content segments

Accordion content types can have any number of collapsible segments.
Just make sure you mark each one's start with a 'Heading' 4 line.

Unlike the 'Show/Hide (FAQs)' content type, the page visitor can open multiple segments at the same time.
Just like 'Content' and 'Content (no title)', you can add foreground images, from the media library, into this content type - even in your collapsible segments.

Fast and Easy to Set Up

It's extremely quick and easy to add accordion items to pages - just add a single Accordion content type to your page and add content to it.
To make parts of this content expandable, put a 'Heading 4' headline before them, using the WYSIWYG editor's 'Format' drop-down: 

1. Put the text you want to be H4 on its own line
2. Make sure the cursor is somewhere on that line
3. Click on the Format tab, hover over the Block option, and choose Heading 4

This page is an example of this.  All of the above and below content was created in 2 'Accordion' content types.  The clickable lines, above and below, are the Heading 4's that were added to mark the start of expandable/collapsible content.

Important Accessibility Considerations

You need to ensure that the headings on the page don't jump a heading.  For example, all pages have a H1 (the section name) but for your page to be accessible to all (a legal requirement) your page must also have a H2 and H3 before you can add any H4's (to mark expandable segments).

If you've included a 'Content (Rich text)' in your page, its 'Title' field will become a H2 on your page, so, in that case, you will only need to add a H3 at the top of your Accordion content before defining your expandable sections.

Show the headlines used on this page

(Note: We have a bookmarklet that allows you to see the headlines on any page you browse to).

Maximum size

You are limited to 60,000 characters in an accordion content type.  That's room for a LOT of accordion content.
But if you need more, you can add another accordion content type to your page. (There's a 2nd accordion content type on this page)

Linking to content in an accordion

Originally you couldn't construct a link that would open a specific accordion item but I have retro-fitted this feature.
To set it up, add an anchor inside the accordion item you wish to open (i.e. under the H4 that defines the collapsible content).
Then you can link to the page, referencing the anchor name.
Normally, a browser places the anchor at the very top of the screen (if it can) but, for usability reasons, the accordion content type will make sure the H4 headline of the segment that contains the anchor doesn't scroll off screen.

For example: Expandable content #1 has an anchor called "first" in it.  Expandable content #2 has one called "second" and this segment has an anchor called 'linking'.  
So we can create links like this  http://universityofgalway.ie/t4training/examples/accordion/#first
and http://universityofgalway.ie/t4training/examples/accordion/#second
and to link to this segment: http://universityofgalway.ie/t4training/examples/accordion/#linking

Tip:  Never link to different accordion segment in the same page.
It won't work the way you expect!  The accordion opens the correct segment and scrolls to that section's headline when the web page loads.
If you click on a link to the page that you're already on, the browser won't reload the page - even if the anchor name is different. 
Instead, it will just scroll to where it knows the referenced anchor is.  And if that anchor is hidden in a collapsed accordion segment, the browser won't open it.
This is confusing for the user, so be sure to only link to accordion segments from other pages (or emails).

Defining Accordions the way you define Tabs

There is an 'Accordion Names' content type that allows you to define 6 accordion items in the same way as you would define tabs items.

With this approach, you could theoretically create accordions with a LOT of information in them - instead of having a limit of 60,000 characters for all your accordion content, you could add any number of content types into each tab. 
But ultra-long pages aren't a good idea - the more practical use for this content type is to easily convert a tabbed page into an accordion page by simply replacing the 'Tab Names' content type with an 'Accordion Names' one.

For more information, see the example tabbed page.

Multiple Accordion content types in one section

Even though 60,000 characters is a lot, it's possible to fill up your accordion content type.  In that case, you can usually add another Accordion to your page. 

Gaps between Accordion blocks

Even if you avoid entering an introduction paragraph (and put a H4 on the very first line of your 2nd Accordion's content field - as I have done here) there will still be an unavoidable gap between the 2 blocks of Accordion content on your page. 

If you are using a 2nd Accordion content type to extend the first one, it may look better if you add some text content before the first H4 in your 2nd Accordion block.

However, you may wish to take advantage of this gap between Accordion content types to group related expandable segments together, visually separating that group from other Accordion content on your page.

How will I know if I'm running out of space in my Accordion?

If you go over the character limit, the CMS won't let you save your change.  In that case, you'll need to cut your new content into your clipboard (by selecting it and using the Ctrl-X keyboard shortcut), save the accordion, create a new Accordion in the section, and paste (Ctrl-V) the new content into that.

If you want to see how many characters you have used up already, it's not so easy.  Version 7 of t4 had a handy character count in its WYSIWYG editor but that is gone in version 8. 

ISS have created a bookmarklet to count the selected characters on a page - Once you add this to your browser, you can use it to see how much of your 60,000 allocation you have already used up by doing the following:

1. Edit your Accordion content
2. In its 'Content' field, choose 'Tools' - 'Source Code' (or else 'View' - 'Source Code')
3. Use the Ctrl-A keyboard shortcut to select all.
4. Click the 'Selected Text Length' bookmarklet (the one you added to your browser via the above link).
5. Click OK to remove the alert window, showing you the character count.
6. Click the 'Cancel' button to return to the WYSIWYG editor.