An accordion control is used to display content or a navigation menu in sections, one of which is revealed while the others are hidden. A user either clicks or mouses over a section header to reveal a section.
Accordion controls have gained in popularity in recent years. They can be useful for displaying navigation menus as well as general content.
Internet Explorer 7+, Firefox 3+, Safari 4+
- Unique Element ID
- The value for the id attribute assigned to the inserted root HTML tag for the component. This value is used to uniquely identify the component.
- Accordion Width
- The width of the accordion control in either pixels or percent.
- Accordion Height
- The height of the accordion control in pixels.
- Select Section By
- Defines how a user selects a different section in the accordion: either by clicking or mousing over the section title bar.
- Document BG Color
- This option does not affect the content that is actually inserted into the web page, but it can be used so that the component live preview reflects a desired background color.
- Section Content Padding
- The padding applied to the content area of each section in the accordion.
- Section Content BG Color
- The background color applied to the content area of each section in the accordion.
Options: Title Appearance
- Title Padding
- The padding applied around the text of each section title.
- Title Alignment
- How titles are aligned: right, center (default), or left.
- Title Background Style
- Select whether the title background should be a solid color or a gradient. If a solid color is selected, then the title bar will expand vertically to fit the title text if the text wraps. If a gradient is selected, then the title bar will always remain a fixed height: either 14px, 20px, or 30px depending on the type of gradient selected.
- Selected Title BG Color
- The background color for the title bar of the selected section.
- Selected Title Gradient Color
- Only applicable if a gradient title background is selected. Defines the color of the applied gradient for the title bar of the selected section.
- Unselected Title BG Color
- The background color for the title bars of the sections that are not selected.
- Unselected Title Gradient Color
- Only applicable if a gradient title background is selected. Defines the color of the applied gradient for unselected title bars.
- Selected Title Text Color
- The color of text for the title of the selected section.
- Selected Title Border Width
- The width of the border applied to the title bar of the selected section, in pixels.
- Selected Title Border Color
- The color of the border applied to the title bar of the selected section.
- Unselected Title Text Color
- The color of text for the titles of the unselected sections.
- Unselected Title Border Width
- The width of the border applied to the title bars of the unselected sections, in pixels.
- Unselected Title Border Color
- The color of the border applied to the title bars of the unselected sections.
- Underline Titles
- Should title text be underlined?
- Title Font
- The font of section title text.
- Number of Sections
- The number of sections in the accordion control.
- Title
- The title text to display for a particular section.