twitter bootstrap - Accordion (web design) -
i'm using twitter bootstrap:
what i'm trying do?
i'm building "login", "sign up" side side button using accordion, should display form inside div alternatively. i.e when login button clicked "sign up" form inside division should hide , "login" form inside same div should display, vice-versa "sign up" button.
view html markup below , screenshot of html page.
screenshot of login & signup inside 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/
Comments
Post a Comment