Accordion

An accordion allows a lot of info to be hidden on page load. The action tab heading clearly states the type of content and, when open, allows the visitor to focus on the content without distraction.
Stack
Rather than have a multi function accordion with several panels the ThemeKit Accordion widgets create separate sections - each with a specifuc purpose - which are stacked and combine. When an action tab is clicked/tapped, a previously opened content area will close.

Applications

Accordions are ussfull for …

• Creating a one page responsive website
• Reducing on load content to save phone users a lot of scrolling
• Adding supplementary info for on load items
• Interactive content to allow visitor's to discover more …

Action

The visible header itself is active. It has a heading and an animated open/close icon. The content area is open for editing on the EverWeb design canvas and closed prior to publising.
Any one item can be open on page load - usually the first one.

Styles

The accordion widgets have controls for border width, color and radius and for adding a bottom box shadow. There are controls for top, horizontal and bottom spacing for separation and to show the box shadow when present.
Action Bar
The bar has text with controls for font size, color, andbackground. The text can be aligned left or center.
The icon animates between open and close. It inherits the text color and can have a border added by checking a box.
The examples show the various types of accordion widget with styling options. The can also be stacked to appear to be one unit. Follow the link below to see an example …