From our sponsor: Elevate all your marketing with Mailchimp Smarts.
Today we want to share a slick and flexible vertical jQuery accordion with you. The main idea is to expand the accordion slices on click and show some more information. The other slices will become less opaque and squeezed. When navigating to the next slice using one navigation arrows, a new slice will slide in from the top or the bottom. Once a slice is open and we navigate, the subsequent slice will open on slide.
The beautiful portrait photography is by Images by Alan Turkus. Check out his Flickr Photostream. The images are licensed under the Creative Commons Attribution 2.0 Generic (CC BY 2.0) License.
We also use the jQuery Mousewheel Plugin by Brandon Aaron which allows us to navigate through the accordion using the mouse wheel.
The options for this plugin allow to customize the height and width, the number of slices visible, the height of an expanded slice and others. Let’s first see some examples before we explain each option.
Examples
Take a look at all the examples (you can also navigate from them to all the other demos):
- 3 visible slices / Default
- With easing
- 5 visible Slices and higher transparency
- 2 visible slices and slower animation
- Fullscreen example
For the HTML structure we have the accordion container, the navigation spans and the wrapper with the slices:
<div id="va-accordion" class="va-container"> <div class="va-nav"> <span class="va-nav-prev">Previous</span> <span class="va-nav-next">Next</span> </div> <div class="va-wrapper"> <div class="va-slice va-slice-1"> <h3 class="va-title">Marketing</h3> <div class="va-content"> <p>Henry Watson</p> <ul> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <div class="va-slice va-slice-2"> ... </div> </div> </div>
We give each slice a different class to define a background image for them. In the last fullscreen example we have color classes to assign a different background color to each slice.
Let’s take a look at the example with just 2 slices and a slower animation speed:
$('#va-accordion').vaccordion({ expandedHeight : 350, animSpeed : 400, animOpacity : 0.7, visibleSlices : 2 });
The following options are available:
// the accordion's width accordionW : 1000, // the accordion's height accordionH : 450, // number of visible slices visibleSlices : 3, // the height of a opened slice // should not be more than accordionH expandedHeight : 350, // speed when opening / closing a slice animSpeed : 250, // easing when opening / closing a slice animEasing : 'jswing', // opacity value for the collapsed slices animOpacity : 0.2, // time to fade in the slice's content contentAnimSpeed: 900, // if this is set to false, // we collapse any opened slice // before sliding savePositions : true
If you, for example, would like to show a slice fully on expansion, using the whole height of the accordion container, then you set the expandedHeight to the same value like the accordionH (the height of the accordion). In our last example we used the full window width and height and also adjusted some style (see inline style in the example) in order to remove any margins:
$('#va-accordion').vaccordion({ accordionW : $(window).width(), accordionH : $(window).height(), visibleSlices : 5, expandedHeight : 450, animOpacity : 0.1, contentAnimSpeed: 100 });
We hope you like this accordion and find it useful!
Thanks for this accordeon! It works beautifully.
There is only one thing I cannot manage to do.
I have all my slices, wrapper and container with a transparent background, so I can to see my background image when the accordeon is closed.
Then I only the titles of each slice.
Tha works great.
I would like to put these titles very close to each other so , when you see the accordeon closed, you see a block of text with the lines superposed on the top and bottom borders. So then I see a block of letters.
The problem is that when I bring them close, even though ALL the backgrounds are transparent, they do not superspose but cut each other.
Is there any way I can do this?
Thanks!
To sat it more clearly……I want my ‘va.title’ classes to overlay on each other when my accordeon is closed and collapsed….
maybe this is more clear…
Is this possible?
Thanks!
Hi,
Is it possible to add a scrollbar on the right ?
If it’s possible, is there an easy way to do that ?
Thanks
For those trying to set it to open a slice on load, you can try
$(‘.va-slice-1’).trigger(‘click’);
that will display the contents of va-slice-1
also, I have mine so that instead of click, mine triggers on mouseenter (similar to hover), just change line 371 or the line that reads in the js file.
$slices.bind('click.vaccordion', function(e) {
with
$slices.bind('mouseenter.vaccordion', function(e) {