Accordion (web design)

Question

I'm using twitter Bootstrap:

What I'm trying to do?

I'm building "login", "sign up" side by side button using accordion, which should display form inside div alternatively. i.e when login button is clicked "sign up" form inside division should hide and "login" form inside same div should display, similarly vice-versa for "sign up" button.

View html markup below and screenshot of html page.

screenshot of login & signup inside a div

<div class="login-window"><!-- login window-->
     <button type="button" class="btn btn-primary accordion" 
             data-toggle="collapse" data-target="#login">Log in</button>
     <button type="button" class="btn btn-primary accordion" 
             data-toggle="collapse" data-target="#signup">Sign up</button>
     <div id="login" class="collapse in">
       <form role="form">
              <div class="form-group">
                  <input type="text" class="form-control" id="nm" 
                         placeholder="Username"style="margin-top:5px;">
                  <input type="email" class="form-control" id="email" 
                         placeholder="Email" >
                  <input type="password" class="form-control" id="psw" 
                         placeholder="Password"style="margin-top:5px;">
              </div>
          </form>
      </div>
   <div id="signup" class="collapse">
      <form role="form">
             <div class="form-group">
                 <input type="email" class="form-control" id="email" 
                        placeholder="Email" >
                 <input type="text" class="form-control" id="nm" 
                        placeholder="Username"style="margin-top:5px;">
                 <input type="password" class="form-control" id="psw" 
                        placeholder="Password"style="margin-top:5px;">
             </div>
         </form>
     </div>
</div><!-- login window ends-->

JSFILLDE : https://jsfiddle.net/b18t8o66/