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


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , ,

Wordpress related questions and answers: