{"id":908,"date":"2017-09-05T20:51:43","date_gmt":"2017-09-05T20:51:43","guid":{"rendered":"https:\/\/in.nau.edu\/web\/?page_id=908"},"modified":"2020-05-04T15:12:49","modified_gmt":"2020-05-04T22:12:49","slug":"accordions","status":"publish","type":"page","link":"https:\/\/in.nau.edu\/web\/accordions\/","title":{"rendered":"Accordions"},"content":{"rendered":"

Accordions<\/h1>\n
Accordions are web design components that let you show headings while hiding blocks of related content. They are popular but often misused.<\/p>\n
Watch the Accordions shortcode video<\/u><\/a><\/p>\n\n
\n
\n
\n \n
\n
\n Overview Tab Open<\/span>\n <\/h4>\n <\/div>\n <\/a>\n <\/li>\n
\n \n
\n
\n How-To Tab Closed<\/span>\n <\/h4>\n <\/div>\n <\/a>\n <\/li>\n
\n \n
\n
\n Troubleshooting Tab Closed<\/span>\n <\/h4>\n <\/div>\n <\/a>\n <\/li>\n <\/ul>\n \n
\n \n
\n
Overview Accordion Open<\/span><\/h4>\n <\/span>\n <\/div>\n <\/a>\n
\n \n\n\n
Consider using accordions when<\/h3>\n
\n
You have two or more<\/strong> closely related<\/em> topics accompanied by a medium amount of detailed content.<\/li>\n
The content hidden in the accordion isn’t very short or very long.<\/li>\n<\/ul>\nDon’t use accordions when<\/h3>\n
\n
You only have a single topic<\/strong> and its related content to put into an accordion.<\/li>\n
The content you want to hide in an accordion is very short.<\/li>\n
The content you want to hide in an accordion is very long.<\/li>\n<\/ul>\n
Alternatives to accordions<\/h3>\n
\n
The simplest option is to display all of your text and images on the web page.<\/li>\n
Another alternative is to use anchor links<\/a> as a miniature table of contents on your page.<\/li>\n
Tabs suffer from many of the same problems as accordions, and they present even more accessibility challenges.<\/li>\n<\/ul>\n
Example<\/h3>\n
Accordions don’t belong inside of tabs! Please see the example below (on the mobile view, you’ll need to scroll to the bottom of the content to see the examples).
\n<\/p>\n\n <\/body><\/html>\n\n <\/div>\n<\/div>\n\n \n
\n \n
\n
How-To Accordion Closed<\/span><\/h4>\n <\/span>\n <\/div>\n <\/a>\n
\n \n\n\n
How to add accordions<\/h3>\n
Accordions can be attached to your page as a shortcode. The shortcode buttons appear at the top of the content editor window.<\/p>\n
\n
Select accordions shortcode. <\/b>The shortcode appears in the text editor.<\/li>\n
Insert your cursor between the shortcode bookends.<\/li>\n
Enter Heading 4 (H4) text for the accordion label or title.<\/li>\n
Insert text and or other elements for accordion content.<\/li>\n<\/ol>\n\n\n <\/body><\/html>\n\n <\/div>\n<\/div>\n\n \n\n \n
\n
Troubleshooting Accordion Closed<\/span><\/h4>\n <\/span>\n <\/div>\n <\/a>\n
\n \n\n\n
Check the following list if your accordions are not appearing as intended:<\/p>\n
\n
Ensure you created a new accordion for each one that you’d like to display<\/li>\n
Check that the accordion shortcodes aren’t nested – each must be discreet<\/li>\n
Ensure that the text for your shortcode is complete, all bookends are present, and each closing bookend contains a forward slash “\/”<\/li>\n<\/ul>\n\n\n <\/body><\/html>\n\n <\/div>\n<\/div>\n\n <\/div>\n\n
Example Kaltura shortcode embed<\/h2>\n\n