Accordions

This block can be used to display sections of expandable content. 

Episerver Required Blocks

  • Accordion - Collection of accordion sections.
  • Accoridon Section - Expand/collapse accordion section that can be placed into an accordion group. 

Add To

Accordion

  • The main content area on any content page
  • Padding containers
  • Tab sections

Accordion Section

  • An accordion block

Fields & Configurations

Accordion 

Property

Configuration

Validation

Accordion Sections

Content area for adding Accordion Sections.

 

Title

Add a title to the accordion, to display in a large font at the top of the accordion.

 

Use "Title" as h1?

If checked, the "Title" property (if added) will show in the HTML as an 'h1' tag for SEO purposes. This should only be checked for 1 block on the page, if any other blocks also have this option added.

 

Body

Add text to display in regular font beneath the title, if a title has been added.

 

Disclaimer

Add text to display in small font at the bottom of the accordion.

 

 

Accordion Section 

Property

Configuration

Validation

Label

Add a text value which will display at the top of each accordion section.

Required

Content

Add blocks to the content area. 

  • Two or Three-Across CTA Container
  • Image/Video 
  • Menu Item
  • Three Across Container
  • Two Across Container
  • Wysiwyg Editor

Required

 

Example Blocks

The examples shown below represent this block and all of its various configurations.

This is the title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • HISTORY, PURPOSE AND USAGE

    Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:

    “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”

    The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.

    _Template Visible Text
  • This is a picture of some people swimming.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.