jQuery .toggle( showOrHide ) not working

Question

I want to use .toggle( showOrHide ) function to check the status. In the api documentation, it is mentioned as;

$( "#foo" ).toggle( showOrHide );
if ( showOrHide === true ) {
    $( "#foo" ).show();
} else if ( showOrHide === false ) {
    $( "#foo" ).hide();
}

But its not working. Anybody knows how to make it work? I want to check the status whether its show or hide.

Answer 1

According to the docs: http://api.jquery.com/toggle/

The second version of the method accepts a Boolean parameter. If this parameter is true, then the matched elements are shown; if false, the elements are hidden. In essence, the statement:

You need to declare true or false;

var showOrHide = true;

if ( showOrHide === true ) {
    $( "#foo" ).show();
} else if ( showOrHide === false ) {
    $( "#foo" ).hide();
}

Using the shorthand would make sense in most cases, but it seems the OP has a requirement to check the status first.

Answer 2

This is answer is predicated on my inferring your question to be:

How do I assess whether something is shown or hidden?

This question inferred from your comment to another answer:

... I want to check the toggle status is show or hide.

You're misunderstanding what toggle(Boolean) does; if you pass a Boolean that evaluates to true (or otherwise 'truthy') then it will show the element, otherwise a false (or 'falsey') value will hide the element(s) upon which toggle() was called.

To retrieve whether the element is shown, you should evaluate the Boolean itself (allowing for truthy/falsey values):

var isShown = showOrHide ? "Yes, it's shown" : "No, it's hidden";

Or, more strictly:

var isShown = showOrHide === true ? "Yes, it's shown" : "No, it's hidden";

You could also use jQuery's .is(':visible') which returns a Boolean value describing whether the element upon which it's called is visible to the user (true), or hidden (false):

var isShown = $('#element').is(':visible');

A very simple case, illustrating the use of .is('visible'):

$('#toggleControl').on('change', function(){
    $('#demo').toggle(this.checked);
    $('#status').text(function(){
        return $('#demo').is(':visible') ? 'Shown' : 'Hidden';
    });
}).change();

JS Fiddle demo.

And, similarly, a demo testing the Boolean itself:

$('#toggleControl').on('change', function(){
    var checkbox = this;
    $('#demo').toggle(checkbox.checked);
    $('#status').text(function(){
        return checkbox.checked ? 'Shown' : 'Hidden';
    });
}).change();

JS Fiddle demo.

Both demos operate on the following HTML:

<input type="checkbox" id="toggleControl" /><label for="toggleControl"> element</label>
<div id="status"></div>
<div id="demo">
    <p>Can be shown or hidden, by checking, or unchecking, the checkbox.</p>
</div>

References:

• .is().
• .on().
• toggle().
• :visible selector.

Answer 3

Where in the jQuery docs did you find this? A quick lookup suggests this is a method to show or hide an element, not to return whether or not the element is visible: http://api.jquery.com/toggle/

Answer 4

Given an element

The code you supplied will work.

Create a function for it:

function showOrHide(element, display) {   
    if ( display === true ) {
        $(element ).show();
    } else if ( display === false ) {
        $(element).hide();
    }
}

And call it with foo

showOrHide($('#foo'), true);
showOrHide($('#foo'), false);

Answer 5

Here is the demo link: DEMO.

I update the answer and pls check if it is the correct one you want.

Here is the example code:

var showOrHide = false;
$( "button" ).click(function() {
    showOrHide = !showOrHide;
    if ( showOrHide === true ) {
        $( "#foo" ).show();
    } else if ( showOrHide === false ) {
        $( "#foo" ).hide();
    }
});

Answer 6

you miss understood the api (check here - scroll few lines up to see it). in the api it says that this $( "#foo" ).toggle( showOrHide ); is equivalent to:

if ( showOrHide === true ) {
  $( "#foo" ).show();
} else if ( showOrHide === false ) {
  $( "#foo" ).hide();
}

as for using it: you need to set the value of the variable "showOrHide" to either "true" or "false", and then use $( "#foo" ).toggle( showOrHide );, when of course, you need to change the "#foo" to whatever your element is.

as for checking if the element is visible or hidden - check this link.

Answer 7

How about using a variable to check your element's state:

var isShowing = true;

$('button').click(function () {
    if (isShowing) {
        $('#foo').hide();
        isShowing = false;
    }
    else {
        $('#foo').show();
        isShowing = true;
    }
});

jsFiddle based on what @urbz posted previously...

Answer 8

This may also help. as an alternative to the other answers

var showOrHide = !$( "#foo" ).is(':visible');
$( "#foo" ).toggle( showOrHide );