This page uses javascript to help render elements, if you have problems please enable javascript.
 
You are now inside the main content area
 
 
left col

Accordions and Tabbed Content

In the V5 templates we have changed up the accordions and tabbed content to use the HTML element details.  This comes with a summary element which is used as the text for the open/close status of the object.  In the editor we do not manage these items but when the page is published and loaded into a browser the detail/summary element is used.

These styles will help you add multiple content parts to a single editing section on your website.  They rely on you identifying the TITLE content and then everything below that is considered to be part of the content area until the next TITLE content is created. 

There is no limit to how many accordions or tabs you can create, but generally no more than 6 to 8 should be used.

right col
 
left col

Accordions

Accordions allow you to have content sections that show topical statements.  When the user clicks on one of these statements more content is opened up.  This allows you to post things like Frequently Asked Questions, process instructions, or even disclaimer informaiton on the page without cluttering up your pages.

The accordions will use the title text and automatically add an arrow on the right side.  These use the HTML object of <details><summary> to create the accordion feature.  Each block is indepenant from one another so the user can control which element is visible at any time.

right col
 
left col

Available styles

right col
 
 
left col

Use Style: accordion

This is a title

This is the content under the first title.  You can edit both sections within the same editing block but when you publich they will each be split under their separate accordions.

This is another title

This is the content under the second title.  Again, you can edit both sections within the same editing block but when you publich they will each be split under their separate accordions.

right col
 
 
left col
right col
 
left col
right col
 
left col

Tabbed Content Blocks

These areas are very similar to accordions but create tabs across the top or along the side of the content.  The content is only visible one tab at a time and should help 

right col
 
left col
right col
 
 
left col
This is a title

This is the content under the first title.  You can edit both sections within the same editing block but when you publich they will each be split under their separate accordions.

This is another title

This is the content under the second title.  Again, you can edit both sections within the same editing block but when you publich they will each be split under their separate accordions.

right col
 
left col

Additional Modifier: vertical

By adding the class vertical to your tabbed content you can generate tabs that run along the left sited, top to bottom, rather than across the top, left to right.

right col
 
 
left col

Use Style: tab-content

This is a title

This is the content under the first title.  You can edit both sections within the same editing block but when you publich they will each be split under their separate accordions.

This is another title

This is the content under the second title.  Again, you can edit both sections within the same editing block but when you publich they will each be split under their separate accordions.

right col
 
left col
right col