Stacks Image 106

FAQ 2 Stack

Premium accordion stack for Stacks.


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.


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?
Stacks Image 885

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.
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.
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.
Made in England © 2023 Doobox Software
Mastodon - Twitter - Company - Subscribe - Cartloom - Branding - Contact Us

Last modified %(last_mod)%

FAQ Stack