Accordion

Zentools2 accordion layouts make it possible to transform any content source into a responsive scalable accordion layout.

The accordion uses the title of your content item as the trigger for expanding and collapsing the accordion content. The accordion has a number of style and display options available.

Lines, right aligned arrows and two columns

The accordion settings make it possible to determine whether the icons are positioned ot the left or the right of the item title.

Bamboo.

Quisque et vestibulum massa. Donec a est accumsan, commodo ipsum at, pulvinar turpis. Integer tincidunt bibendum diam a venenatis. Phasellus quis ante non mauris rutrum tincidunt. Proin convallis tempor odio. Nunc vehicula mi at pharetra consectetur.

Above.

Quisque et vestibulum massa. Donec a est accumsan, commodo ipsum at, pulvinar turpis. Integer tincidunt bibendum diam a venenatis. Phasellus quis ante non mauris rutrum tincidunt. Proin convallis tempor odio. Nunc vehicula mi at pharetra consectetur.

Building.

Quisque et vestibulum massa. Donec a est accumsan, commodo ipsum at, pulvinar turpis. Integer tincidunt bibendum diam a venenatis. Phasellus quis ante non mauris rutrum tincidunt. Proin convallis tempor odio. Nunc vehicula mi at pharetra consectetur.

Bridge.

Quisque et vestibulum massa. Donec a est accumsan, commodo ipsum at, pulvinar turpis. Integer tincidunt bibendum diam a venenatis. Phasellus quis ante non mauris rutrum tincidunt. Proin convallis tempor odio. Nunc vehicula mi at pharetra consectetur.

Boxed layout, right aligned arrows and single column content

The boxed layout wraps each accordion item in a coloured box. The colors used in the moduel can be controlled via the theme settings and custom css can be created to allow multiple accordion styles on the same page.

trip to nowhere

In the fields

Man staring

Athlete

Lines and right aligned discs and two column content

The accordion content uses the same layout tool as the other layouts and so it's very easy to create a diverse range of layouts for your content inside the accordion.

Hues.

Etiam justo metus, ullamcorper eget nisl ac, consectetur imperdiet arcu. Proin condimentum feugiat ante in lobortis. Maecenas vel cursus ex. In hac habitasse platea dictumst. Praesent ac ipsum dictum, auctor mi et, mollis lectus. Donec cursus pellentesque mi vitae sagittis. Nunc commodo libero elit.

Farm.

Etiam justo metus, ullamcorper eget nisl ac, consectetur imperdiet arcu. Proin condimentum feugiat ante in lobortis. Maecenas vel cursus ex. In hac habitasse platea dictumst.

Window.

Praesent ac ipsum dictum, auctor mi et, mollis lectus. Donec cursus pellentesque mi vitae sagittis. Nunc commodo libero elit.

City.

Praesent ac ipsum dictum, auctor mi et, mollis lectus. Donec cursus pellentesque mi vitae sagittis. Nunc commodo libero elit.

Lines using left aligned arrows and non-standard open / close icons.

The accordion comes with the option to specify separate icons for the open and closing arrows. Zentools2 relies on the use of the Zen Shortcodes plugin to load Font Awesome and any of the icons incliuded in Font Awesome 4+ can be used for accordion arrows.

A-Mountain-top

Firelight

Golden-gates

Husky

Mountains-range

Options and settings

Open First Item

Determines whether or not to open the first item in the accordion on page load

Theme

Choose between none, boxed and lines

Arrow Position

The position of the arrow in relation to the title: Left or right

Arrow Style

Background style of the arrow icon: none, round, square

Open Symbol

Icon to use for item when item is open. 500+ icons available.

Closed Symbol

Icon to use for item when it is closed. 500+ icons available.

Reposition accordion

When enabled, the page is scrolled to a position on the page where the item that has just been clicked is at the top of the page. This option is best suited for accordions that have a lot of content in their panels causing the top half of the item to appear above the top of the screen when opened.

Position offset

This is the top offset that screen is repositioned. If set to 0 the title of the item that s has been clicked will be set to the very top of the browser window. If set to 40 the item will appear 40px below the top of the screen.