This site requires JavaScript to be enabled

EPiServer Blocks: Accordion Block


Accordion Block with first item openedAn Accordion Block allows you to add interactive content to your page as well as adding a lot of content in a smaller vertical space. The first item will of your list will display while the following items will be hidden with a "+" icon noting these items can be expanded. Upon expanding another item, the items that is open will now close so only 1 item displays at a time.

Each accordion item has these properties:


Accordion items

To create an Accordion Block, you will first need to create the area in which you add the Accordion items: 

  • In the CMS content tree, navigate to your Microsite and expand it
  • Click on the Global Components container and add a new item 
    • Choose Accordion Container
    • Give it a Name of Accordion Container
    • publish this container
  • Click on the new Accordion Container and add a new item
    • Add a Name and Accordion Title
    • Click create
  • You can continuing editing and creating items or proceed to creating the block
Accordion block

Now to create your Accordion Block:

  • In the CMS Block tree, navigate to your site's folder to where you wish to create this block
  • Add a new block - type "Accordion Block"
  • Give it a Name and set the Accordion Folder property to the container you created in the previous steps (in Global Components)
  • Publish 

You can now drag this block onto a page.


Examples of the Accordion Block:

when a user click to expand an item, all other items close and that particular one opens:

Accordion Block with second item opened

If adding images, be mindful of the width as this block will grow and shrink based on browser width. Please make sure to test in desktop and making your browser smaller in width to test for mobile views. 

Accordion Block with third item opened and a full width image