Use Bootstrap Button Group to Swap Divs

Question

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?

Answer 1

You can just set some jQuery to hide/show the form divs:

$('#switch-forms .btn').on('click', function() {
    $('#switch-forms .btn').removeClass('active');
    $(this).addClass('active');
});
$('#login_click').on('click', function() {
    $('#register_form').hide();
    $('#login_form').show();
});
$('#register_click').on('click', function() {
    $('#login_form').hide();
    $('#register_form').show();
});

JS Fiddle: http://jsfiddle.net/ezrafree/HZbvA/

Also, you misspelled the class attribute on button#register_click . Updated markup is:

<div class="row">
    <div class="col-sm-4 col-sm-offset-4">
        <div id="switch-forms" class="btn-group btn-group-justified">
            <div class="btn-group">
                <button type="button" id="login_click" class="btn btn-default active">Login</button>
            </div>

            <div class="btn-group">
                <button type="button" id="register_click" class="btn btn-default">Register</button>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div id="login_form" class="col-sm-4 col-sm-offset-4">
        <p>Login Form</p>
    </div>

    <div id="register_form" class="col-sm-4 col-sm-offset-4">
        <p>Register Form</p>
    </div>
</div>

Answer 2

For anyone interested I made it work. Not the "bootstrap way" but it works as desired. Someone with better jQuery chops could certainly simplify this.

<script>
$(document).ready(function() {
    var login_btn = $('#login_click');
    var register_btn = $('#register_click');
    var register_form = $('#registration_form'); 
    var login_form = $('#login_form');

    // set defaults 
    register_form.addClass("hidden");
    login_btn.addClass("active");

    // events for register button
    register_btn.on("click", function(){
        login_form.addClass("hidden");
        login_btn.removeClass("active");
        register_btn.addClass("active");
        register_form.removeClass("hidden");
    });
    //events for login button
    login_btn.on("click", function(){
        register_form.addClass("hidden");
        register_btn.removeClass("active");
        login_btn.addClass("active");
        login_form.removeClass("hidden");       
    });
});
</script>

Answer 3

Code updated No jQuery, you could do it with bootstrap collapse. try this

<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" data-toggle="collapse"  data-target=".class1">Login</button>
        </div>

        <div class="btn-group">
            <button type="button" id="register_click" class="btn btn-default" data-toggle="collapse" data-target=".class1">Register</button>
        </div>
    </div>
</div>
        <div  class="col-sm-4 col-sm-offset-4">
<div class="class1 collapse in">123</div>
<div class="class1 collapse">321</div>
        </div>

cannot comment in feed. there right way to use toggleClass not good

$('#switch-forms .btn').on('click', function() {
$('#switch-forms .btn').removeClass('active');
$(this).addClass('active');
});

good

$('#switch-forms .btn').on('click', function() {
$('#switch-forms .btn').toggleClass('active');
});