CSS3手风琴样式分步向导特效【原创】

页面的head部分仅需要引入CSS样式即可，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分先设置好每个步骤的容器，代码如下：

<section class="jq22-container">
	<div class="container">
		<ul class="payment-wizard">
	    	<li class="active">
	        	<div class="wizard-heading">
	            	1. 要求
	                <span class="icon-user"></span>
	            </div>
	            <div class="wizard-content">
	            	<p>第一个阶段，是做出要求，对宇宙发出指令，让宇宙了解你想要些什么，宇宙就会自动回应你的想法。</p>
	            	<button class="btn-green done" type="submit">下一步</button>
	            </div>
	        </li>
	        <li>
	        	<div class="wizard-heading">
	            	2. 信念
	                <span class="icon-location"></span>
	            </div>
	            <div class="wizard-content">
		            <p>第二步是信念。你要相信你已经拥有它了。要有一种毫不动摇的信念，就是我的说法，要相信还没有实现的事，“你的愿望就是我的命令”，宇宙就会开始运作安排，从而满足你心中的愿望。</p>
	            	<button class="btn-green done" type="submit">下一步</button>
	            </div>
	        </li>
	        <li>
	        	<div class="wizard-heading">
	            	3. 接受
	                <span class="icon-summary"></span>
	            </div>
	            <div class="wizard-content">
	            	<p>第三步，就是这个过程最后一步，接受。开始感觉好极了，想想要是你想要的事物已经出现，那会是什么感觉。</p>
	            	<button class="btn-green done" type="submit">下一步</button>
	            </div>
	        </li>
	        <li>
	        	<div class="wizard-heading">
	            	4. 实现
	                <span class="icon-mode"></span>
	            </div>
	            <div class="wizard-content">
	            	<p>当你感觉好的时候，你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事，帮助自己具有拥有它们的感觉。无论你能做什么，只要去做，就有助于把这些东西吸引过来。</p>
	            	<button class="btn-green" type="submit">完成</button>
	            </div>
	        </li>
	    </ul>    
	</div>
</section>

然后引入jQuery库，设置好点击事件的响应，代码如下：

$(window).load(function(){	
	$(".done").click(function(){
		var this_li_ind = $(this).parent().parent("li").index();
		if($('.payment-wizard li').hasClass("jump-here")){
			$(this).parent().parent("li").removeClass("active").addClass("completed");
			$(this).parent(".wizard-content").slideUp();
			$('.payment-wizard li.jump-here').removeClass("jump-here");
		}else{
			$(this).parent().parent("li").removeClass("active").addClass("completed");
			$(this).parent(".wizard-content").slideUp();
			$(this).parent().parent("li").next("li:not('.completed')").addClass('active').children('.wizard-content').slideDown();
		}
	});
	
	$('.payment-wizard li .wizard-heading').click(function(){
		if($(this).parent().hasClass('completed')){
			var this_li_ind = $(this).parent("li").index();		
			var li_ind = $('.payment-wizard li.active').index();
			if(this_li_ind < li_ind){
				$('.payment-wizard li.active').addClass("jump-here");
			}
			$(this).parent().addClass('active').removeClass('completed');
			$(this).siblings('.wizard-content').slideDown();
		}
	});
})