Image

The flexible, responsive accordion stack for RapidWeaver

The Ivy stack is not only highly customizable, it is also extremely easy to use. In addition to its many settings for customizing its looks and functionality, we've also included several preset styles, many of which match our RapidWeaver themes. And of course it is responsive, because all good, modern web tools are.

Ivy helps you streamline your content for your visitors

Let's have a look at some of the highlights of what Ivy 2 can do for us when building our pages. We also offer a quick overview and tutorial video to give you an idea of what the stack can do, and get you started.

Customizable

We've included the ability to customize the look and feel of your accordion using a series of different color pickers instead of using a built-in style.

Iconic

You can choose from a variety of different open and close icons for your accordion labels. You can also place the icons on either the right- or left-hand side of the label.

Multiples

You can place as many Ivy accordions on a page as you like. The stack is also capable of having other Ivy accordions nested within it to create unique layouts.


Optional Pre-styled Accordions

Ivy comes with 24 different built-in styles, with something to match most themes. In fact we've included several that are geared toward Elixir's own themes.


Overrides

Each Ivy item can have its colors overridden. This allows you to make one stand out more than another. We've also added transparency sliders to some of the color pickers for more versatility.

Open All

Ivy comes with an Open All option. Enabling Open All adds a switch to the accordion accordion which allows your visitor to open and close every accordion item in a specific Ivy stack at once.

Padding

You can adjust the padding for your accordion's content to add nice clean whitespace to your design, or get rid of the padding altogether.

Alignment

You can now align the Open All toggle to the left, center or right side of the Ivy accordion. You can also choose whether you'd like the Open All toggle to appear at the bottom or top of the accordion.

Start Open

You can choose to have Ivy automatically start with the first accordion item open when the page loads, getting your visitors right into your content.

Multi-view

Turning on Ivy's Multi-view allows for your visitor to open more than one accordion item at a time. When Multi-view is off only one accordion element will open at a time.

Font Styling

You have the ability to choose font stylings for both the label and content of your Ivy accordion, as well as pick font sizes for your label that resize at 4 different responsive breakpoints.

Animations

Ivy has a few different animation styles for when your accordion items open and close. In addition to choosing an animation style you can set how long it will take for the animation to execute.

Rounded

The Ivy accordion comes with a setting to let you adjust the design's corners, allowing you to choose a border radius from 0 to 6 px in size.

New in two

What's new in version 2 of the Ivy accordion stack?

We've added a lot of niceties to the latest version of Ivy to help make customizing and using it even easier, for both you and your site visitors!

Reorganize with ease

Ivy 2 adds new functionality to allowing you to rearrange accordion elements within the stack, as well as delete individual items anywhere! We've also added a new collapse mode that makes rearranging elements a breeze!

Refined

We've added opacity sliders for the content background, label background, and selected label background color pickers. We've also included the ability to adjust each Ivy Item's colors independent from the rest of the accordion.

Close all

Ivy 2 brings with it a new Close All label. You can set your own customizable text for the Close All label that is shown when your visitor expands all of the Ivy Items with the Open All toggle.

More stylish

Ivy 2 brings with it a new Close All label. You can set your own customizable text for the Close All label that is shown when your visitor expands all of the Ivy Items with the Open All toggle.

Samples

Let's grow some beautiful accordions

(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:

Simple & stylish

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.

  • Nikola Tesla

    Serbian-American engineer and physicist Nikola Tesla (1856-1943) made dozens of breakthroughs in the production, transmission and application of electric power. He invented the first alternating current (AC) motor and developed AC generation and transmission technology. Though he was famous and respected, he was never able to translate his copious inventions into long-term financial success—unlike his early employer and chief rival, Thomas Edison.

  • Thomas Edison

    Thomas Edison was an American inventor who is considered one of America's leading businessmen and innovators. Edison rose from humble beginnings to work as an inventor of major technology, including the first commercially viable incandescent light bulb. He is credited today for helping to build America's economy during the Industrial Revolution.

  • Michael Faraday

    Michael Faraday, who came from a very poor family, became one of the greatest scientists in history. His achievement was remarkable in a time when science was usually the preserve of people born into wealthy families. The unit of electrical capacitance is named the farad in his honor, with the symbol F.

  • Benjamin Franklin

    Benjamin Franklin was a Founding Father and a polymath, inventor, scientist, printer, politician, freemason and diplomat. Franklin helped to draft the Declaration of Independence and the U.S. Constitution, and he negotiated the 1783 Treaty of Paris ending the Revolutionary War. His scientific pursuits included investigations into electricity, mathematics and mapmaking.

Open all Close all

Clean & minimal

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.

  • Two Columns
    Header

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

    Header

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

  • One Column
    Header

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

  • Three Columns
    Header

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

    Header

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

    Header

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Open all Close all

Dark

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.

  • What's new?

    What's new in version 2 of the Ivy accordion stack?

    We've added a lot of niceties to the latest version of Ivy to help make customizing and using it even easier, for both you and your site visitors!

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

  • Responsive, flexible

    A flexible, responsive accordion stack

    The Ivy stack is not only highly customizable, it is also extremely easy to use. In addition to its many settings for customizing its looks and functionality, we've also included several preset styles, many of which match our RapidWeaver themes.

    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

  • Streamline your content

    Streamline your content for your website's visitors

    Let's have a look at some of the highlights of what Ivy 2 can do for us when building our pages. We also offer a quick overview and tutorial video to give you an idea of what the stack can do, and get you started.

    Ivy 2 adds new functionality to allowing you to rearrange accordion elements within the stack, as well as delete individual items anywhere! We've also added a new collapse mode that makes rearranging elements a breeze!


Side-by-side

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.

Open all Close all
Open all Close all

There's so much more you can do with Ivy 2

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.

Stylish

Clean up and organize your site's content for yourself, and your visitors. Perfect styling for both desktop and mobile devices.

Documentation

What does this setting do?

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.


Requirements

What will you need?

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.

What you need

As mentioned, we use the latest Stacks API for the Ivy stack to help facilitate its functionality. You'll need the following tools to make use of Ivy for your site:

  • RapidWeaver v8 or newer
  • Stacks v4 or newer
Browser support

This stack is designed with modern browsers in mind to give your visitors the best experience possible. Ivy will work nicely in the most recent versions of these browsers:

  • Safari
  • Firefox
  • Chrome
  • Edge
elixir

THE FORGE. Stay up to date on future versions of Elixir products, as well as important news, updates and more through our newsletter.

Re-Download Purchases

Use your email address to look up your previous orders and retrieve download links.


© 2006-2021 Elixir Graphics

RapidWeaver is a Registered Trademark of
Realmac Software Limited