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!
-
GeneralThe 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 StyleIvy 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
-
LabelLabels 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
-
ContentYou'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
-
AnimationWhen 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
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.