JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script>
<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" class="tab">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 {
  height: 50px;
  overflow: hidden;
}

JavaScript

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