(That's a weird sentence, right?)

Do you have a ton of information to present to your visitors but don’t want to overwhelm them with a page chock-full of content? Maybe a FAQ, or a survival guide or something? The Accordion page type is perfect for this sort of thing. We've created several examples using Ivy 2 below:

This sample shows our Ivy accordion using its default setting, for the most part. You'll notice the though that the accordion has a Tesla Pro theme inspired styling, with thin arrows as indicator icons. By default the Open All toggle is enabled and Multi-view is turned off.

In this example we're using our built-in Ghost style. This style has a nice, clean, minimalistic look. We've selected the Thick Arrow icon as our open and close indicator. We've enabled Multi-view for this sample, allowing more than one accordion item to be open at a time. Inside the first and third accordion item we've used the Foundry columns stack. We've also positioned the Open All toggle on the right-hand side this time.

In our third example we've opted for our nice dark Blue Grey style. We've also chosen to enable the Start with First Open feature, letting the visitor see the contents of the first accordion item right away. In this example we've disabled the Open All feature.

In this example we've created two different accordions, both using our built-in Navigator theme style, and placed them into the Foundry columns stack so that we can have two, responsive accordions side-by-side.

WE've attempted to give you a good idea of a few of the things you can do with Ivy, but the truth is that there are so many combinations and style settings that we couldn't possibly cover every possibility.

The Ivy stack is highly customizable. With its large set on controls you'll be able to quickly and easily make your accordions fit in with the rest of your site's design. Whether you're using a pre-designed theme, or a framework like Foundry, Ivy will give you supreme control over streamlining your page's content.

Don't forget to watch through our overview / tutorial video at the upper portion of the page. This video gives you an idea of how the stack works and helps you get up and running in no time.

In addition to the tutorial walk through video, at the top of this page, we also offer detailed documentation for each of the settings within the Ivy accordion stack. This helps aid you when creating your site as well as in making the decision to purchase the Ivy stack.

You can find the full documentation and tutorials for Ivy, as well as all of our other products in the Elixir Support Hub.

Ivy relies on the Stacks API to load icons and other tools needed for features in this stack.Let's look at the required software as well as the browser support for this stack.