Stacks Image 6

FAQ 2

Accordion layout with a unique style of animation.

Get Everything Bundle Deal
Stacks Image 793

FAQ 2

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

Overview.

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.

Instant download.

Version : 1.0.5

Responsive : Yes

First released : 10/11/2015

Last Updated : 12/8/2016

Stacks V 3.0 or greater.

Live demo.

You can see a few live examples of the stack in action on this page.

Not only is there an example of FAQ 2 below, but we use FAQ 2 on every stacks demo page in the "Stacks settings" and "Stacks FAQ" sections.

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 670

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.

Stacks settings.

In this section we have provided a comprehensive list of available settings, and a full description of what each of the settings does for the stack.

Stacks Image 243
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.

Stacks edit mode.

We pay great attention to how we approach the editing interface of every stack, to ensure intuitive ease of use.

Stacks Image 297

Simply click the plus button to add a new section. Highlight and delete any section at any time. Drag to re-order any section at any time.

Stacks FAQ.

Important information that is pertinent to this stack. Please read, as there may well be something here that is essential to the deployment of this stack.

Browser support

This stack is supported in all modern browsers. Any exception to this rule will be listed below.

Safari

Chrome

Firefox

Explorer

Known compatibility issues

There are no known compatibility issues with this stack.

Stack installation

Download.

After purchase, you will be sent an email containing a download link for the stack.
Download the zip file from the link, and unzip it to reveal the stack inside.
You should now see the stack as a logo style icon.

Normal installation.

Double click the un-zipped stack file (the one that looks like a piece of lego).
This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Installation where more than one version of Rapidweaver is installed.

Sometimes if there is more than one version of Rapidweaver installed on your system, the double click method launches the wrong version of Rapidweaver to install the stack. To ensure the it is installed into the version you want to install to, you can, instead of double clicking the stack, just drag and drop it onto the appropriate Rapidweaver app icon in your dock at the bottom of your screen.

This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Secure checkout.

We trust PayPal as our secure checkout provider.

Don't have a PayPal account? No worries. PayPal allows you to pay with your credit card if you do not have an account set-up.

Instant download.

Stacks Image 589

© 2018 Doobox Software. Building premium Software Mac & RapidWeaver™