Vertical Sliding Accordion with jQuery

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.

From our sponsor: From online stores to member areas, Squarespace is everything you need to sell anything.

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):

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!

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 88

Comments are closed.
  1. Very slick ! Also browsing through her other articles, whoever this Mary Lou is, she has skills πŸ™‚

    Twitter handle ? (Would be nice if Codrops posted Twitter links for all of your authors — like SmashingMag does.)

  2. You are incredible, i don’t know how you come up with & code these so fast πŸ™‚

  3. Once again nice work, Mary Lou.

    Perhaps it is a nice idea to make a fluid/flexible/responsive/you know jQuery slider for one of your next tutorials. I found a couple (really only 2 or 3) basic percentage based sliders on the net, but due to the popularity of responsive designs there’s a need for more πŸ™‚

  4. although do not know anything about jQuery …
    every time a new article from here, always make all surprising πŸ˜‰
    so good so good ?

  5. These tutorials are just very well done!! I Love you Mary Lou and love this site!

  6. I hate coming to your site and your works cos [sobs πŸ™ ]…I JUST CAN’T WALK AWAY…your works are to beautiful and awesome; holds me spell bound that I loose track of time. So you see…YOU DEFINITELY ARE A TEMPTATION!

    Thanks with all my heart…Lou.
    From NIGERIA.

  7. Dammit, just thought of this as a awesome way for a new website and you guys beat me to it haha.

    There is one minor bug in the fullscreen version, if you resize your window it doens’t resize to.

    Could i use this code for my premium theme offcourse the source code credits stay in there.

  8. Thanks for another great tutorial Mary Lou, again you have built a beautifull piece of Jquery that any one would be proud of to include in their design. Keep up the good work! I look forward to your next post.

  9. Really a nice featured list.

    I guess example 2 and 5 will be really useful!

    Continue with this good quality!

  10. Hi, Thanks for sharing such a great stuff and tutorial, is there any way to use the same code for horizontal Accordion thanks

  11. Thanks Mary Lou. I have put this to use immediately.

    I’m still fairly new to js and am not sure about the NoJs css file. Does this somehow only kick in if the reader has turned off JS? Or is it in case I want to use this design without JS? The values in NoJs file seem to be overriding the style.css when I tried to apply your tutorial.

    Thanks

  12. great tutorial
    just one question, is it possible to leave out the arrow in the tutorial

  13. Great plugin.

    One way I think it could be better is by dynamically changing the width/height of the wrapper when the browser window resizes, making it more responsive. Any ideas how we could make that happen?

    -Jacob

  14. Great slide, thanks for sharig.
    How I can transform it in horizontal? any idea? IΒ΄m interested about fullscreen example.
    Best regards and thanks.

  15. Great Plugin!

    Very nice concept and very well executed.

    Having problems in internet explorer…any answers?

  16. I really want to install this on my site, but the accordion only shows my last image, right at the top. Any ideas?

    Sorry, I don’t have a test site.

  17. Great and thorough on your notes. I would quite like to do the fullscreen version but horizontally is this possible?

  18. Great job….anyone can suggest me how to avoid that the slice close after click the menu (or click the slice area). I’d like to leave it open.

  19. WAOn very nice creatively done. Can i use it for my commercial projects.

  20. Hi

    Is there a way to have this start on an open panel with faded in content?

    I’m trying to remove the need for have someone click through the unexpanded sections, but can’t seem to figure out what to change in the JS.

    Any help would be much appreciated!

    Marc

  21. Hi! Thank you, very much for this great script. Would be great if you’ll add an autoplay feature and a extra navigation menu. Thanks, again. πŸ™‚

  22. This is a beautiful accordion…
    How do I adjust the line-height with cache.sliceH. I tried to set that from 50px to 1px, but there is no difference. It stays at 150px for line-height.
    Let me know! Thanks!
    Keep up the great work!
    Norja

  23. Hello Marie Lou,
    Many thanks for your script. I’m trying to expand the first slide on load but didn’t find the way to do that. Did someone did it?

  24. Example 2 (my favourite) errors and fails in IE8 – not that I like IE8 but some people will ahve it, is there a fix for this?

    • Also, Mary Lou used data() method (http://api.jquery.com/data/). This is quotation from docs: “Note that this method currently does not provide cross-platform support for setting data on XML documents, as Internet Explorer does not allow data to be attached via expando properties”.
      Does anybody test the script in other version of IE?

      Also, accordion has fixed height and weight in full screen example. So, if user change browser size, beauty will disappear.

  25. Great work here!

    Any suggestions for making making the 5th example expand when the browser size is changed? Any help is much appreciated.

    Thanks

  26. Is there any way to have one of the slides in the open state? Something like $(‘#va-accordion’).vaccordion.selectSlice(2)..?