jQuery垂直动画选项卡展开隐藏内容

本文的垂直选项卡实现方法很简单，主要用了jQuery的fadeOut方法，新手一看就懂，快来制作属于自己的第一款手风琴效果吧。

分类：选项卡/滑动门 > 图片选项卡难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

jQuery垂直选项卡点击显示内容

<div class="accordion-container"> 
    <div class="container"> 
        <div class="accordion">
            <a href="#"><h4>素材火网</h4><i class="fa fa-plus-circle"></i></a>
        </div> 
        <div class="accordion-desc"> 
            <h3>素材火网</h3> 
            <p>www.sucaihuo.com</p>
            <p> <button>更多</button> </p>
        </div> 
        <div class="accordion">
            <a href="#"><h4>wap手机模板</h4><i class="fa fa-plus-circle"></i></a>
        </div> 
        <div class="accordion-desc"> 
            <h3>素材火网</h3> 
            <p>www.sucaihuo.com</p>
            <p> <button>更多</button> </p>
        </div> 
    </div> 
</div>

$(".accordion-desc").fadeOut(0);
$(".accordion").click(function() {
    $(".accordion-desc").not($(this).next()).slideUp('fast');
    $(this).next().slideToggle(400);
});