Question

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.

Answer 1

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.