I’m creating a login / register form for a woocommerce shop.
The default woo template shows two side by side forms, one for new customers to register, one for existing customers to login. IMHO this sucks.
I want to use a button group above a single form that swaps out the login / register forms based on the users selection, this way only one option is presented at a time. Hence, I need to swap content, and apply/remove active classes to the appropriate buttons.
I’ve done the following:
1.) Added a twitter bootstrap button-group like so:
<div class="col-sm-4 col-sm-offset-4"> <div class="btn-group btn-group-justified"> <div class="btn-group"> <button type="button" id="login_click" class="btn btn-default active" data-toggle="button">Login</button> </div> <div class="btn-group"> <button type="button" id="register_click" class="btn btn-default">Register</button> </div> </div> </div>
2.) Wrapped the two forms in bootstrap classes and added IDs for simple targeting.
<div id="login_form" class="col-sm-4 col-sm-offset-4"> // login form </div> <div id="register_form" clas="col-sm-4 col-sm-offset-4"> //register form </div>
I know there are built in jQuery plugins for accomplishing this. I’ve tried using the
.active class without success. I also tried using
data-toggle="button" and use the
.toggle() method without success. I can’t wrap my head around the appropriate jQuery, I either end up with both buttons toggled, or no buttons toggled.
Could someone guide me in the right direction?
Read more here: Use Bootstrap Button Group to Swap Divs