jquery扁平风格的手风琴特效

<link href="path/to/css/bootstrap.min.css" rel="stylesheet">

<script src="path/to/jquery.min.js" type="text/javascript"></script>

<div class="item_box box10">

  <div class="item_box_wp">

    <div class="voice_2">

      <ul>

        <li class="li1" id="li1">

          <div class="fold" style="display:none;">

            <span class="img"></span>

          </div>

          <div class="unfold" style="display:block">

            <dl>

              <dt><img src="images/img10.png" /></dt>

              <dd>

                <b>语音外呼<a href="#">查看接口文档>></a></b>

              </dd>

              <dd>......</dd>

            </dl>

          </div>

        </li>

        ......

      </ul>         

    </div>

  </div>

</div>

$(function(){

  $(".voice_2 ul li").each(function(){

    var fold = $(this).find(".fold");

    var unfold = $(this).find(".unfold");

    if(fold.is(":hidden")){

      $(this).width(680);

    }else{

      $(this).width(100);

    }

  })

  $(".voice_2 ul li").click(function(){

    var li_index = $(this).index();

    $(this).animate({width:680},200);

    $(this).find(".unfold").show();

    $(this).find(".fold").hide();

    $(this).siblings().animate({width:100},200);

    $(this).siblings().find(".unfold").hide();

    $(this).siblings().find(".fold").show();

  })

})