Skip to main content

Widget Layout Accordion

This section describes the options available for the Accordion layout of the widget.

Collapsible​

Select whether the accordion should be collapsible. The default is Yes.

Multiple (Open Items)​

Select whether multiple items can be opened at the same time. The default is Yes.

First Item open​

Select whether the first item should be opened by default. The default is No.

Image Position​

Select the position of the image. The default is above. Available options are:

  • Above - The image will be displayed above the title
  • Below - The image will be displayed below the title
  • Hidden - The image will not be displayed
  • Title - The image will be displayed in the title

If you select Title, you can select the media width by using the following options. On all other options besides hidden, the media will be rendered inside the Accordion and its width is set to 100%.

Media Width​

Select the width of the image. The default is 25%. Available options are:

  • 16.67% - 1/6 of the container width
  • 20% - 1/5 of the container width
  • 25% - 1/4 of the container width
  • 33.33% - 1/3 of the container width
  • 50% - 1/2 of the container width
  • small - Small image Size
  • medium - Medium image Size
  • large - Large image Size

Media Width @s​

Select the width of the image for screens with of 640px or larger. The default is small. Available options are:

  • 16.67% - 1/6 of the container width
  • 20% - 1/5 of the container width
  • 25% - 1/4 of the container width
  • 33.33% - 1/3 of the container width
  • 50% - 1/2 of the container width
  • small - Small image Size
  • medium - Medium image Size
  • large - Large image Size

Media Width @m​

Select the width of the image for screens with of 768px or larger. The default is small. Available options are:

  • 16.67% - 1/6 of the container width
  • 20% - 1/5 of the container width
  • 25% - 1/4 of the container width
  • 33.33% - 1/3 of the container width
  • 50% - 1/2 of the container width
  • small - Small image Size
  • medium - Medium image Size
  • large - Large image Size

Media Width @l​

Select the width of the image for screens with of 1200px or larger. The default is small. Available options are:

  • 16.67% - 1/6 of the container width
  • 20% - 1/5 of the container width
  • 25% - 1/4 of the container width
  • 33.33% - 1/3 of the container width
  • 50% - 1/2 of the container width
  • small - Small image Size
  • medium - Medium image Size
  • large - Large image Size

Media Ratio​

You can optionally define an aspect ratio for the image in the accordion title. Select 0 so that the image is not cropped.

Custom Classes​

Accordion Class​

You can optionally add a custom class to the accordion. This can be used to add custom CSS to the accordion. Multiple classnames can be separated by space:

my-custom-class another-custom-class

Accordion Item Class​

You can optionally add a custom class to the accordion item. This can be used to add custom CSS to the accordion item. Multiple classnames can be separated by space:

my-custom-class another-custom-class

Image Container Class​

You can optionally add a custom class to the image container. This can be used to add custom CSS to the image container. Multiple classnames can be separated by space:

my-custom-class another-custom-class

Image Class​

You can optionally add a custom class to the image. This can be used to add custom CSS to the image. Multiple classnames can be separated by space:

my-custom-class another-custom-class

Accordion Item Title Class​

You can optionally add a custom class to the item title. This can be used to add custom CSS to the item title. Multiple classnames can be separated by space:

my-custom-class another-custom-class