Ivy stack

A supremely responsive accordion

Stacks Image 160

Flexible accordion

Ivy is a responsive accordion stack that helps you to organize your pages into collapsable sections and streamline your content. Ivy can be easily customized through a variety of different settings.

Highlights

Built-in Styles

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

Custom Styles

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.

Open All

Ivy comes with an Open All option. Enabling Open All adds a switch to the bottom of the accordion which allows your visitor to open every accordion item at once.

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.

Icons

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.

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.

These are just a few of the many different features we've packed into the Ivy accordion stack! Ivy comes loaded with a lot of different options to customize it to your specific needs depending on what project you're using it for!

  • General
    The General settings affect the stack overall. Under the General section you'll find the following settings.

    • Items
    • Start with first open
    • Multi-view
    • Open All toggle
    • Open All label
  • Accordion Style
    Ivy allows you to style your accordion using either one of the many built in, predefined settings, or to customize the its look using a series of color pickers. Here's a look at the Accordion Style settings:

    • Style (pre-defined or custom)
    • Rounded corners

    Here is a list of the predefined styles that are offered in Ivy to make getting started quick and easy:

    • Ghost
    • Dark Grey
    • Blue Grey
    • Light Blue
    • Flat Teal
    • Flat Orange
    • Forest Green
    • Earthy
    • Purple Power
    • Bold Blue
    • Baby Blue
    • Shamrock
    • Crimson
    • Gun Metal
    • Bright Blue
    • Tesla
    • Rustic
    • Ruby
    • Feather
    • Abstract
    • Pinky
    • Custom
  • Label
    Labels are an important part of Ivy. It is what your visitor initially sees and what they click, to tap on to expand the accordion items. We've given you a lot of control over these labels through the following settings:

    • Arrow location
    • Closed arrow icon
    • Open arrow icon
    • Label font
    • iPhone (vertical) font size
    • iPhone (landscape) font size
    • iPad font size
    • Desktop font size
  • Content
    You're able to adjust the content area of the accordion items, adjusting the padding as you see fit and choosing a font that fits your needs.

    • Padding (including a detailed padding setting)
    • Content font
  • Animation
    When Ivy's labels are clicked to reveal the appropriate content an animation occurs, sliding the accordion content open. Here you can adjust the settings for that animation:

    • Animation speed
    • Animation style
Open all

Options

Ivy comes packed with options for customizing the look and feel of your accordions. We've included an array of different settings that will help you in getting exactly the right setup for your responsive site. Below we show all of Ivy's settings that you have access to when designing your page in Stacks.

Featured

Team-up

The Ivy accordion stack pairs really well with our Structure suite of responsive layout stacks. The combinations of responsive designs you can achieve with Ivy & Structure together is unlimited.

Beautiful simplicty

The theme we've used for this live preview site is our Telsa Pro theme. Tesla Pro gives you a solid, responsive theme to build your sites with and works great with Ivy and Structure!