CODEWITHSUNDEEP
javascriptjqueryfunctiontoggle
Danny Englander
Danny Englander

Reputation: 2044

JQuery if statement for .is(':visible') not working

I have a div that when the page is loaded is set to display:none;. I can open it up using this simple code:

$(".field-group-format-toggler").click(function()
{
$(".field-group-format-wrapper").css({'display':'block'});
});

Once it's opened, I'd like the user to be able to close it so I tried using the .is(':visible') function and then wrapping my original code in an if statment but this time using display:none;

if($('.field-group-format-wrapper').is(':visible')){

   $(".field-group-format-toggler").click(function()
  {
    $(".field-group-format-wrapper").css({'display':'none'});
 });

}

This does not seem to work though and I am not getting any syntax errors that I know of.

I also tried this:

if ($('.field-group-format-wrapper').is(':visible'))
$(".field-group-format-toggler").click(function () {
$(".field-group-format-wrapper").css({'display':'none'});
});

... but that did not work either.

Upvotes: 3

Views: 1922

Answers (3)

Jamie Dixon
Jamie Dixon

Reputation: 54001

As already mentioned, you can use the toggle function to achieve what you want.

To add a bit of extra information, when attaching events like you're doing, you're actually using a subscription model.

Registering an event puts it in a queue of events subscribed to that handler. In this case, when you add the second event to change the CSS, you're adding an event, not overwriting the first one.

Whilst thing isn't actually causing your problem, it's worth being aware of.

Upvotes: 1

Thomas
Thomas

Reputation: 8849

I guess your function is only being called on page load at which time all divs are hidden.

Why not check the visibility in the click event handler?

$('.field-group-format-toggler').click(function(){
  var $wrapper = $('.field-group-format-wrapper'); //Maybe $(this).parent()?
  if($wrapper.is(':visible'))
    $wrapper.hide();
  else
    $wrapper.show();

Upvotes: 1

Rich O'Kelly
Rich O'Kelly

Reputation: 41757

You can just use the toggle function:

$(".field-group-format-toggler").click(function()
{
  $(".field-group-format-wrapper").toggle();
});

This will show the '.field-group-format-wrapper' elements if they are currently hidden and hide them if they're currently visible.

FYI the reason your code snippet in your question wasn't working is because you're only checking the visibility of the elements on dom ready, rather than on each click - so the event handler to show the elements will never be attached.

Upvotes: 5

Related Questions