html

 <div class="part1 par_ct">
        <div class="on" >
            <img src="images/part2-off-1.jpg" alt="">
            <a href="javascript:;" class="sliderBtn"></a>
        </div>
        <div class="off" >
            <img src="images/part2-on-1.jpg" alt=""/>
            <img src="images/part2-on-2.jpg" alt=""/>
            <a href="javascript:;" class="sliderBtn"></a>
        </div>
    </div>

js

  $('.on .sliderBtn').on('click',function(){
            var parent = $(this).parents('.par_ct');
            var top = parent.offset().top;
            parent.find('.on').hide().removeClass('animated slideInDown');
            parent.find('.off').show().addClass('animated slideInDown');
            $(document.body).scrollTop(top);
        });
        $('.off .sliderBtn').on('click',function(){
            var parent = $(this).parents('.par_ct');
            var top = parent.offset().top;
            parent.find('.off').hide().removeClass('animated slideInDown');
            parent.find('.on').show().addClass('slideInDown animated');
            $(document.body).scrollTop(top);
        })

css

参考css动画

值得思考的点在一般的展开和隐藏都可以用js来写，但是优化点确实有时候想不到的，这里是借助top数值和css动画使页面看起来更加的优美大气