A question about a standard way to hide a div in Javascript and jQuery

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开发者_Python百科="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?

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

Yes, you could use the .toggle(showOrHide) variant:

$(document).ready(function() {
    $('#hideButton').click(function() {
        var $disclaimer = $('#disclaimer'),
            isVisible = $disclaimer.is(':visible');

        $disclaimer.toggle(!isVisible);
        $('#hideButton').val(isVisible ? 'unhide' : 'hide'); 
    });
});

There is no point in querying the element's style to find out if it's visible; you can retain its state programmatically:

var isVisible = true,
    disclaimer = $('#disclaimer'),
    hideButton = $('#hideButton');

hideButton.click(function(){
    disclaimer[isVisible ? 'hide' : 'show']();
    hideButton.val(isVisible ? 'unhide' : 'hide');
    isVisible = !isVisible;
});

I would do the actual hiding exactly like user187291 wrote.

But for your questions, I would suggest using the ":visible" selector since there are more ways to hide an element other than changing its display css attribute. From the jQuery specification:

Elements can be considered hidden for several reasons:

    * They have a CSS display value of none.
    * They are form elements with type="hidden".
    * Their width and height are explicitly set to 0.
    * An ancestor element is hidden, so the element is not shown on

the page.

A certain animation may reach the state of having the width and height set explicitly to 0 and not change the display attribute.