Image
Stacks add-on

Ivy

Ivy is a responsive, easily customized, accordion that helps you organize your pages into collapsable sections and streamline your pages for your visitors.

This page outlines the settings included in the Ivy stack and looks at what they do, and how they affect the its functionality. In addition we have a tutorial and walk-thru video below that helps get you started using the stack, as well as gives you an idea what the stack can do before your purchase. For examples of the stack in action, please visit the product page.


Let's dive deep into Ivy's many settings

Below we take a look at what each setting within the Ivy stack does. This is a good reference for you as you work with the stack, as well as it provides you an inside look at each setting within the stack before you make your purchase.

Image

General

START WITH FIRST OPEN
Enable this setting if you'd like the first item within your Ivy accordion to start out opened up when the page loads. This may be beneficial is there is content in your accordion that you want to make sure your visitor does not miss.

MULTI-VIEW
Multi-view allows your visitor to open more than one Ivy accordion item at a time. When disabled only one items will open at a time. When opening a new item previously opened items will close automatically.

OPEN ALL TOGGLE
Ivy allows you to include a toggle that lets the visitor open every item in an accordion at the same time. This makes it convenient for visitors to read all of the content in an accordion if they so choose.

OPEN ALL & CLOSE ALL LABELS
When the Open All Toggle is enabled you're given fields for customizing the labels next to the toggle.

SWITCH ALIGNMENT
The Open All Toggle includes a toggle switch icon. This setting allows you to align that switch, and the appropriate labels, to the left, center or right of the accordion.

Image

Accordion Style

STYLE
Ivy is designed to make life easier on not just your visitors, but you as well. We've built out some pre-styled accordions for you already. Many of these styles match themes in the Elixir lineup as well, which makes things even simpler.

If you'd rather tweak the accordion to your own specific liking you can do that as well using our Custom style setting. When set to Custom you'll have control over the following items:

  • Border
  • Label Background
  • Label Text
  • Label Divider
  • Selected Label Background
  • Selected Label Text
  • Selected Label Divider
  • Content Background
  • Content Text
  • Open All Toggle Icon
  • Open All Text
  • Close All Text

ROUND CORNERS
This setting allows you to adjust the roundness of the corners used in the stack's styling.

Image

Label

The Label section of the Ivy accordion is the title bar which the visitor will click in order to open the accordion's content to view its contents.

ARROW LOCATION

Choose whether you'd like to put the arrow indicator on the left- or right-hand side of the label.

CLOSED ARROW
This drop down allows you to choose the icon used when a label's content is closed.

OPEN ARROW
This drop down allows you to choose the icon used when a label's content is open.

LABEL FONT
Ivy provides several fonts to choose from for your labels. You can opt for one of the fonts included in the stack or choose Theme Font to allow the theme's own font to be used for the label's text.

LABEL FONT SIZES
These settings allow you to choose how large the text within the label should be at various responsive breakpoints.

Image

Content

PADDING
Customize your content sections by choosing how much padding should surround your content. You can set a uniform padding on all sides, or use the Detailed Padding to provide a different value for each of the four sides of your content.

CONTENT FONT
Choose one of several fonts for your content. You can opt for one of the fonts included in the stack or choose Theme Font to allow the theme's own font to be used for the text in your content sections.

Image

Animation

SPEED
Adjusting this value will determine how fast the accordion items open and close. The larger the number the slower the animation is to execute.

STYLE
This drop down provides you a way to customize the style of animation used for opening and closing items.

Image

Edit Mode

COLLAPSE DISPLAY
Enabling the Collapse Display toggle hides the Content sections for the individual accordion items. This cleans up Edit Mode some to make working on your page a bit easier when you're not actively working with your Ivy accordion.

HIDE STACK TITLE
This turns off the title bar at the top of the stack.

On this page