Create an Accordion Group

You can organize Style functionality in a way that fits your individual needs by creating tabs and moving Style controls to those tabs.

PREREQUISITES:

  • You must be assigned to a developer profile (i.e., developer (built-in)). See Create a Profile for more information on creating a developer profile.
  • You must be viewing the developer profile you've been assigned to in order to see any of the developer tools and functionality. See Switch Customization Profiles for more information.
  1. Select the Plugin and the Profile you want to customize. See Select a Plugin to Customize for more information.

In addition to the Controls and Layout Strings panels, there is a Layout panel added to the top of the page. The Layout panel is the developer view of the Controls panel. It allows you to view all the controls at the same time and how it will be laid out on the page.

You can use the Controls or Layout panels to insert, move, or remove containers, tabs, panels, or accordions.

  1. From the Controls or Layout panels, select the control you want to add an accordion group after or in (such as a container, panel, tab set, etc.).
  2. In the Control Details panel, click Insert Accordion Group.

When you click Insert Accordion Group a group and one accordion are added after the selected control.

Accordion groups can contain multiple accordions or accordion groups.

  1. Rename the group's Control Id in the Control Details panel to help you easily differentiate between multiple accordion groups and what they include. Such as Accordion1, AccordionLeft, AccordionContactInformation.

  1. Enter a width for the container.

The Widths field allows you to set breakpoints for devices that users may use, such as phones, tablets (portrait or landscape), desktop, or 4k screens. Breakpoints use a scale from 0 to 12 because web pages commonly have 12 column grids. Therefore, the scale specifies how many grids to take up on a web page and divides it by 12. For example, 9 divided by 12 is 75% of a screen's width.

There are five breakpoint values separated by commas in the width field that determine the width (breakpoint) of the screen for phones, portrait tablet, landscape tablet, desktop, or 4k screens.

NOTE: When you enter the widths, keep in mind that 0 uses the value of the previous breakpoint (or defaults to using the full screen if it is the first breakpoint value) and 12 means full screen; anything between 0 and 12 will be divided by 12 and use that amount of the screen for that device.

EXAMPLE

If you enter 12, 6, 12, 0, 6 for the value in the Widths field, it will affect the devices in the following way:

  • 12—Phone: full or 100% of the screen
  • 6—Portrait Tablet: half or 50% of the screen
  • 12—Landscape Tablet: full or 100% of the screen
  • 0—Desktop: full or 100% of the screen (the zero uses the previous value of 12)
  • 6—4k screen: half or 50% of the screen
  1. Select the accordion.
  2. Rename the accordion's Control Id to help you easily differentiate between multiple accordions.
  3. Enter a Label for the accordion. This is what the users viewing the profile will see.

  1. Select a control and move it to the accordion. See Move a Control or Panel for more information.

NOTE: An accordion and accordion group will be grayed out and not visible until a control is added to it.

  1. Move more controls as needed to the accordion.
  2. Select the accordion group and click Insert Accordion to add more accordions to the group.
  3. Select the accordion or accordion group and click Remove to remove a single accordion or the entire accordion group.
  4. Click Save Profile in the Profile panel.