Question

I’m still relatively new to javascript and jQuery and was just wondering this.

Suppose I have this HTML snippet:

<p id="disclaimer">
Disclaimer! </p>
<input type="button" id="hideButton" value="hide" />

I could hide the div in the following ways:

$(document).ready(function() {
    $('#hideButton').click(function() {
        if ($('#disclaimer').css('display') == 'none') {
            $('#disclaimer').show();
            $('#hideButton').val('hide');
        } else {
            $('#disclaimer').hide();
            $('#hideButton').val('unhide');         
        }
    })
});

OR

$(document).ready(function() {
$('#hideButton').click(function() {
    if ($('#disclaimer').is(':visible')) {
        $('#disclaimer').hide();
        $('#hideButton').val('unhide'); 
    } else {
        $('#disclaimer').show();
        $('#hideButton').val('hide');
    }
    })
});

My question is: Is there a preferred method of hiding the div or is it just a matter of personal preference?

Answer 1

i’d write that like this

$(function() {
    $('#hideButton').click(function() {
        $('#disclaimer').toggle();
        $(this).val(
            $('#disclaimer').is(":visible") ? 
                'hide' : 'unhide'
        );
    })
})

or even

$(function() {
    $('#hideButton').click(function() {
        $(this).val(
            $('#disclaimer').toggle().is(":visible") ? 
                'hide' : 'unhide'
        )
    })
})

in response to the comment, here some points why i think this code is better

• $(…) looks nicer than document.ready
• toggle() without a param is better than “if is visible then hide else show” – don’t ask, tell.
• always use $(this) to refer to the object itself in an event handler
• use chaining when it doesn’t hurt readability