FAQ 2 Stack

Premium accordion stack for Stacks.

Description

An accordion type stack with a responsive ace up the sleeve. We use this stack on most pages in the Doobox website.

You have probably already seen and interacted with FAQ 2 stack. We use it widely throughout the Doobox website, to condense information into a smaller space. Every "FAQ" section, and "Stacks settings" section on the stacks demo pages employ FAQ 2 to present the information.

A beautiful minimalist design with eye catching animations, that is perfect for presenting large amounts of content such as FAQ in an accordion style.

Re-designed exclusively for Stacks version 3 and beyond, leveraging the power of the new API, allowing you to add as many items as you wish while retaining the ability to re-order them at any time.

Demo

You can see live examples of the stack in action below.

First content area

The first content area.

The first content area you add to the stack can be set to be open or closed when the page loads. You will notice that we have all the FAQ 2 stacks we use on our stacks demo pages set to have the first item open when the page first loads. This often helps to entice the user to read more.

Any type of content ?

What can I put into the stack?

Any type of content.

You can put anything you like into the sections of FAQ 2. Text images whatever. Just treat the sections as if they were in the page its self.

User interaction

User interaction.

The stack can be set to close any other open sections when a new section is opened, or just allow new sections to be opened, while leaving existing open sections open.

Title bar icons and animation

Icons and animation.

There is a selection of built in carefully paired icons for open and closed state built in for you to choose from. Each has it's own unique animation that it uses to go from representing a title bar open, to a title bar closed.

User Settings

A comprehensive overview of this stacks user settings.

Titles size

The size of the title text font seen in each of the title bars.

Titles padding

The size of the padding around the title text in each of the title bars.

Titles weight

The weight of the title text font seen in each of the title bars.

Corners

This is a choice of corner rounding on the title bars.
The choices are:

Square corners.
Small rounded corners.
Medium rounded corners.
Completely rounded corners.

Title bar open (colours)

The colour of the title bar when in an open state.

Title bar closed (colours)

The colour of the title bar when in an closed state.

Hover action

This is what happens when the mouse is over one of the title bars in a closed state.
The options are:

Lighten the colour.
Darken the colour.

Both options animate between the colour shades on hover in and out.

Animated icon

Choose an animated icon sequence to display in the title bar.
The choices are:

Toggle on/off
Question > close icon
Bars > close icon
Arrow right > arrow down

Each choice a a slightly different animation to morph between each icon state.

On page load

This is what happens when the page first loads.
The choices are:

First item is open
All items are closed

On item click

This is what happens when a title bar is clicked
The choices are:

Close any other open items
Just open this item

Item padding

Applies padding to the hidden content areas, where you place each item of content.

Compact

You can compact the stack in edit mode in two ways:

Compact only the items, hides the item content areas. Great for re-arranging the order of the items when needed.
Compact everything, reduces the stack down to just the titlebar when you have finished editing the stack, and would like a nice clean edit mode screen.

Last modified %(last_mod)%

FAQ Stack