Accordion component

This component should be aligned to the left hand side for most of our sites, including Scottish Enterprise and Find Business Support. We do this by adding the component to a container, and adjusting the span of the container rather than the panel. 

Using a template

You can add an accordion to a new panel using the Accordion template, which is already built to be left aligned. 

You can add further accordions to the component by adding a new 'content section'. When you’re adding components within each accordion, you’ll be limited to components which are appropriate for accordions, such as titles text, image and video.  

If you're adding the accordion component to a page with left hand navigation, you'll need to remove the span from the accordion container. 

From scratch

If you don’t use the accordion template when creating a new panel, you’ll need to:

1. Add a container to your panel
2. Add an ‘Accordion Component’ to the container
3. Add a ‘Content section’ for each accordion.
4. Add the content and components you need into each content section. You'll only be able to add components that are appropriate for accordions
5. Add the correct modifiers at panel and container level

Your accordion structure in Umbraco should look something like this: 

• Accordion panel
  • Accordion container 
    • Accordion component
      • Content section 1 / Accordion 1
        • Component
        • Component
      • Content section 2 / Accordion 2
        • Component 
        • Component
      • Content section 3 / Accordion 3
        • Component
        • Component

On SDI, this component should be aligned to the centre of the page. This happens automatically when you apply a span to the panel.

Using a template

You can add an accordion to a new panel using the Accordion template. You can add further accordions to the components by adding a new 'content section'. When you’re adding components within each accordion, you’ll be limited to components which are appropriate for accordions, such as titles text, image and video.  

From scratch

If you don’t use the accordion template when creating a new panel, you’ll need:

1. Add an ‘Accordion Component’ to the panel
2. Add a ‘Content section’ for each accordion
3. Add the content and components you need to each content section/accordion.You'll only be able to add components that are appropriate for accordions
4. Apply the correct modifiers 

Your accordion structure in Umbraco should look something like this: 

• Accordion panel
  • Accordion component
    • Content section 1 / Accordion 1
      • Component
      • Component
    • Content section 2 / Accordion 2
      • Component
      • Component
    • Content section 3 / Accordion 3
      • Component
      • Component