More elegant way to show | hide in jQuery

Question

Hi Guys,

I am learning jQuery and just came up with this - but really not sure whether it is the best solution.

Would someone be able to assist and tell me whether this is something more "elegant" ?

$('#hde_test').hide();

$('#shw_test').click(function() {
    $('#shw_test').hide();
    $('#hde_test').show();
    $('.class1').show();
});
$('#hde_test').click(function() { 
    $('#shw_test').show();
    $('#hde_test').hide();
    $('.class1').hide();
});

Answer 1

You can use the .toggle() method or .toggleClass() method to toggle the objects visibility. That would let you do something like:

$('#show_toggle').click(function() {
    $('.class1').toggle();
});

Answer 2

You can shorten it down:

$('#shw_test').click(function() {
    $('#hde_test, #shw_test').toggle();
    $('.class1').show();
});
$('#hde_test').click(function() { 
    $('#hde_test, #shw_test').toggle();
    $('.class1').hide();
});

Likely, you can shorten it to:

$('#shw_test, #hde_test').click(function() {
    $('#hde_test, #shw_test, .class1').toggle();
});

Just depends how the initial state of things are.

Answer 3

You could refactor that into a "toggle" function:

function toggle(show, hide)
{
   $(show).show();
   $(hide).hide();
}

function doStuff(){
  //this will show shw_test and hide hde_test
  toggle('#shw_test', '#hde_test');

}