当打开模态和CSS - 手风琴顺利滑动时，首先在选项卡上以编程方式设置步骤1

Question

Jsfiddle - modal tabs

HTML

<div id="modal-signup" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="border:0!important; box-shadow: none!important;">
  <div class="mod-signup-wrapper" >
    <div class="modal-header">
      <h3>Sign up a new account</h3>
    </div>
    <div class="modal-body">
      <div class="accordion">
        <div id="step-1">
         <a href="#step-1" class="tab">Step 1 - Information</a>
          <div class="content">
            <div style="background: #fff;">
            <form>
                <input type="text" placeholder="Email Address" name="email">
                <input type="text" placeholder="Password" name="password">
                <input type="text" placeholder="Full Name" name="fullName">
            </form>
            </div>
          </div>
        </div>
        <div id="step-2">
          <a href="#step-2">Step 2 - Select</a>
          <div class="content">
            <div style="background: #fff;">
            skdjfhskfhskdfjksf
              </div>
            </div>
            </div>
      </div>
    </div>
  </div>
</div>

CSS

.accordion .tab {
  border-top: 1px solid #5b5b5b;
  display: block;
  height: 50px;
  text-decoration: none;
  color: #888;
}

.accordion .tab:hover,
.accordion div:target .tab {
  color: #000;
  border-top: 1px solid #7c7c7c;
}

.accordion div .content {
  display: none;
}

.accordion div:target .content {
  display: block;
}

.accordion > div {
  height: 50px;
  overflow: hidden;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.accordion > div:target {
  height: 400px;
}

试图使用herf =＆＃34; step-1＆＃34;并且它在某些页面上工作（不在网站上），因为带有/ test＃step-1的url有帮助。单击模态打开时，它首先显示第1步选项卡。但是在其他页面上使用url /＃step-1时，在打开模态时不会显示第1步选项卡。有没有办法打开第一个标签是/ test＃step-1还是/＃step-1？

手风琴似乎没有像本网站那样流畅或滑动：http://www.fortheloveoflaundry.com/

我不确定为什么手风琴没有顺畅地上下滑动。试图改变过渡，高度和其他css ..但没有用。有没有办法让它在不使用Jquery的情况下顺畅滑动？

Answer 1

这是我知道的唯一方法，如果你需要修改，请告诉我：http://jsfiddle.net/JWfdx/2/

$(function(){
    $('.tab').click(function(){ 
     $(this).parent().siblings().animate({height:'50px'},500);
        $(this).parent().animate({height:'200px'},500);

    });
});