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.
(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.
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 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, 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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
Clean up and organize your site's content for yourself, and your visitors. Perfect styling for both desktop and mobile devices.
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.
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:
This add-on works great with Foundry v3 as well as the legacy Foundry v2.
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: