The accordion effect of vertical sliding based on jQuery

Today we are going to share with you a beautiful and flexible vertical jQuery accordion effect. The main idea is to enlarge the click on the accordion piece and display more information. Other content fragments will become less transparent. When you use a navigation arrow to navigate the next clip, the new slice slides from the top or bottom.

Effects Demo Plugin Download

HTML Sample code:

<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" >            
JavaScript Sample code:
$ (' #va-accordion '). Vaccordion ({    accordionw      : $ (window). Width (),    accordionh      : $ (window). Height (),    visibleslices   : 5,    expandedheight  :    animopacity     : 0.1,    contentanimspeed:100});
　　
Related articles that may be of interest to you
 
 

  
  
 
   
Web development in a very practical 10 effects "source Download"
 
   
Carefully selected excellent jquery Ajax page plug-ins and tutorials
 
   
12 Amazing ideas for 404 error page Design
 
   
Let the website Move! 12 Excellent jQuery animation plugins
 
   
Stunning 8 x HTML5 & JavaScript Effects
 
  
 
 
This article links: Learn the accordion effect of vertical sliding based on jQuery
Compilation Source: Dream Sky focus on front-end development technology sharing web design resources
The accordion effect of vertical sliding based on jQuery