CODEWITHSUNDEEP
javascriptjquerycsstoggle
matenji
matenji

Reputation: 365

Is there a shorter way to write this jquery toggle code?

    $('#checkout #button-method').on('click', function() {
        $('#button-info').removeClass('pressed').addClass('pointer');
        $('#button-method').addClass('pressed').removeClass('pointer');     
        $('#shipping-info').addClass('hide');
        $('#shipping-method').addClass('add');
    });
    $('#checkout #button-info').on('click', function() {
        $('#button-info').addClass('pressed').removeClass('pointer');
        $('#button-method').removeClass('pressed').addClass('pointer');     
        $('#shipping-info').removeClass('hide');
        $('#shipping-method').removeClass('add');
    });

CSS for class 'pointer' is cursor: pointer; for class 'pressed' is a background-color change; for class 'hide' is display: none; for class 'add' is display: block

There are 2 buttons (button-method and button-info). On clicking button-method, button-info is disabled, shipping-info hides, and shipping-method appears. On clicking button-info, the opposite process occurs. Is there a way to compact this code using toggleClass on two different elements?

Upvotes: 0

Views: 251

Answers (3)

Bic
Bic

Reputation: 3134

You use toggleClass(), to swap out the classes:

$('#button-method').on('click', function() {
    $('#button-info').toggleClass('pressed pointer');
    $(this).toggleClass('pressed pointer');     
    $('#shipping-info, #shipping-method').toggleClass('hide add');
});
$('#button-info').on('click', function() {
    $(this).toggleClass('pressed pointer');
    $('#button-method').toggleClass('pressed pointer');     
    $('#shipping-info, #shipping-method').toggleClass('hide add');
});

Here is a Fiddle Demo.

Your shipping-info and shipping-method classes appears to be the same. If that is the case, you can modularize them in a method so you only have the code in one place. I assumed that was an error and wrote the solution accordingly.

You can condense it further with one lining the button toggles:

$('#button-method').on('click', function() {
    $('#button-method, #button-info').toggleClass('pressed pointer');
    $('#shipping-info, #shipping-method').toggleClass('hide add');
});
$('#button-info').on('click', function() {
    $('#button-info, #button-method').toggleClass('pressed pointer');     
    $('#shipping-info, #shipping-method').toggleClass('hide add');
});

At this point the handlers become the same, so you can bind the same handler to both buttons:

$('#button-info, #button-method').on('click', function() {
    if (!$(this).hasClass('pressed')) {
        $('#button-method, #button-info').toggleClass('pressed pointer');
        $('#shipping-info, #shipping-method').toggleClass('hide add');
    }
});

Upvotes: 0

Loe
Loe

Reputation: 327

You could use toggleClass like this:

function toggle(condition)
{
    $('#button-info').toggleClass('pressed', !condition).toggleClass('pointer', condition);
    $('#button-method').toggleClass('pressed', condition).toggleClass('pointer', !condition);     
    $('#shipping-info').toggleClass('hide', condition);
    $('#shipping-method').toggleClass('add', condition);
}

$('#button-method').on('click', function() {
    toggle(true);
});
$('#button-info').on('click', function() {
    toggle(false);
});

If you really want to compact the code, you could change your html and css so less class changes are required.

Upvotes: 0

André Catita
André Catita

Reputation: 1323

UPDATED: 4 lines of jQuery.

Ofcourse there is a better way. This is the best way to do it, from my point of view in your case.

Check code here: http://jsfiddle.net/ALsYT/10/

What I did is put them together in a "buttons" var, and since one starts hidden, that you have to do on load, I just used CSS as an example, and by using a toggle on both at the same time, I am always swapping between them.

HTML:

<button id="button-info" class="green">Button info</button>
<button id="button-method" class="red">Button Method</button>
<br /> <br />
<button id="shipping-info">Shipping info</button>
<button id="shipping-method">Shipping Method</button>

jQuery:

var buttons = $("#button-info, #button-method").on("click", function(){   
    $(buttons).toggleClass('red green');
    var buttons_to_toggle = $("#shipping-info, #shipping-method").toggle();
});

CSS:

.red {background-color:red}
.green {background-color:green}
#shipping-info { display:block; }
#shipping-method { display:none; }

Upvotes: 0

Related Questions