Accordion Layout Section

Accordion Layout Section

Last updated 03.29.24

Sections are the page building frameworks that hold widgets. This Accordion Layout section automatically creates an accordion to hold information in a collapsed, stacked format in which each pane is clickable to be opened or closed. This provides the option for putting a large amount of information in a compact space. 

  • Holds widgets inside collapsible accordions 
  • Provides one or two column layouts 
  • Key properties are the number of accordion panes, margins, padding and background color 
  • Provides widget space before and after accordion for additional content 

Related Links & Videos

How to add an Accordion Layout Section

1. Select where on the page you would like add a section 
2. Click on the gray plus add section icon. Hover over and click to select Accordion Layout 
3. A preliminary Accordion Layout appears on the page. Use the gear-shaped properties icon to adjust the settings. 

Accordion Layout Section Properties

5. In the Accordion Layout Section properties pop up adjust the number of columns, their width, margins and padding.
6. Click Apply button to update the widget with selected properties. The properties pop up will automatically close.
 

How to add content to Accordion Layout

1. Open pane where you want the widget to appear 
2. Click on the blue plus add widget icon  
3. Select the widget from the widget pop up and adjust its properties as usual 
4. Click Apply button 

How to delete the Accordion Layout Section

Hover over the Accordion Layout Section until it displays the properties and trash icons and click on the trash icon to delete. 

How to reposition the Accordion Layout Section

Hover over the Accordion Layout Section until it displays the grab icon on the left. Simply drag and drop in a new location. 
 

How to change section types

Hover over the Accordion Layout Section until it displays the change section type icon. Click to select.

Accordion Layout Section Properties

PROPERTYDESCRIPTION
Number of ColumnsSelect from 1-2 columns to create two accordion columns or one accordion column to hold a different type of widget.
Use Accordion InIf 2 columns are selected this option appears with the below selections:
  • Single (accordion will only appear in one column) 
  • Both Column (an accordion will appear in each column) 
Cell 1 Width (Large)
Cell 1 Width (Medium)
Cell 1 Width (Small) 

Select from sizes :
  • 1 (8%) 
  • 2 (16%)
  • 3 (25%)
  • 4 (33%)
  • 5 (42%)
  • 6 (50%)
  • 7 (58%)
  • 8 (66%)
  • 9 (75%)
  • 10 (83%)
  • 11 (92%) 
  • 12 (100%)
Number of Panes [cell 1]Enter number of accordion panes required for your content
Active Pane Index [cell 1]When “Require Open Pane” is selected, add pane # to stay open on page load
Custom CSS Class [cell 1]Code provided by the Atlas development team to achieve custom effects
Pane Title [cell 1]Add title for each pane of accordion in a simple list format
Require Opened Pane [cell 1]Check to keep one pane open on page load (all panes closed by default)
Cell 2 Width (Large)
Cell 2 Width (Medium)
Cell 2 Width (Small) 

Note Cell 2 properties appear if 2 columns are selected
Select from sizes :
  • 1 (8%) 
  • 2 (16%)
  • 3 (25%)
  • 4 (33%)
  • 5 (42%)
  • 6 (50%)
  • 7 (58%)
  • 8 (66%)
  • 9 (75%)
  • 10 (83%)
  • 11 (92%) 
  • 12 (100%)
Number of Panes [cell 2]Enter number of accordion panes required for your content
Active Pane Index [cell 2]When “Require Open Pane” is selected, add pane # to stay open on page load
Custom CSS Class [cell 2]Code provided by the Atlas development team to achieve custom effects
Pane Title [cell 2]Add title for each pane of accordion in a simple list format
Require Opened Pane [cell 2]Check to keep one pane open on page load (all panes closed by default)
MarginUse margin to increase spacing between the Accordion Layout Section and other sections on the page. This is helpful to provide visual room between elements and increase readability.

Top
User can select from 1-5 rems to increase spacing above the accordion layout section

Bottom
User can select from 1-5 rems to increase spacing below the accordion layout section

Right
User can select from 1-5 rems to increase to the right of the accordion layout section

Left
User can select from 1-5 rems to increase spacing to the left of the accordion layout section
PaddingUse padding to increase spacing within the Accordion Layout Section background area. This is especially useful when using a background color to provide space between the accordion content and the outside edges of the website.

Top
User can select from 1-5 rems to increase room in the top of accordion layout background area

Bottom
User can select from 1-5 rems to increase room in the bottom of the accordion layout background area

Right
User can select from 1-5 rems to increase room in the right of the accordion layout background area

Left
User can select from 1-5 rems to increase room in the left of the accordion layout background area
Enable BackgroundCheck to enable background for entire section filling the full-width of the page
Background ColorThe background color attribute effects the color behind the accordion to the full width of the page. Initially, Default is selected, which is no color added. Select from your custom brand colors or grayscale options from the menu. Additionally, you can select any color by adding the hexidecimal color code. Below is the list of Background colors that can be selected:
  • Default (None) 
  • Primary
  • Primary Color - Light
  • Primary Color - Dark
  • Secondary
  • Secondary - Light
  • Secondary - Dark
  • Gradient
  • White
  • Light Gray
  • Medium Gray
  • Dark Gray
  • Black
  • Custom (enter color in hex format – ex. #2c6090)

Accordion Layout Section Examples

Example of a One Column Layout

In this example we have four panes full-width. The panes can contain a wide variety of widgets added by clicking the blue plus icon.

WYSIWYG

WYSIWYG Widget


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.

Feature Large A

Feature Large A

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.

Button
Events
Timeline
2010

Retailer Founded

The retailer was founded in 2010

2012

Agronomy team expanded

The agronomy team expanded in 2012 to include more specialized agronomists.

2016

James Patrick hired as CEO

James Patrick joined the Retailer team as CEO in June 2016.

2022

New website launched

Example of a Two Column Layout

In this example we have five panes containing the WYSIWYG Widget on the left and an image on the right.

Pane 1

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.

Pane 2

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.

Pane 3

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.

Pane 4

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.

Pane 5

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.

Example of a Two Column Layout

In this example we have three panes containing the WYSIWYG Widget on the left and right.

Pane 1

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.  

Pane 2

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.  

Pane 3

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.  

Pane 1

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.  

Pane 2

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.  

Pane 3

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.