represent a hide/show value inside an if statement

Question

I have a script when there is a toggle that make a div hide or show, using the .hide and .show I need to make another script when there is an if statement that happens only when the div is shown.

this is the script:

<script type="text/javascript">
  $(document).ready(function() {
  $('#click1').toggle(function(){
    $('#div1').show().animate({'height': '50%'}, 400);
  }, function(){
    $('#div1').animate({'height': '0px'}, 400).hide(0);
  });
  });
</script>

I need to add an if statment like this:

<script type="text/javascript">
  $(document).ready(function() {
  $('#click1').toggle(function(){
    if (div2==show)
    {
      $('#div2').animate({'height': '0px'}, 400).hide(0);
    }
    $('#div1').show().animate({'height': '50%'}, 400);
  }, function(){
    $('#div1').animate({'height': '0px'}, 400).hide(0);
  });
  });
</script>

thanks

possible duplicate of [Testing if something is hidden with jQuery](http://stackoverflow.com/questions/178325/testing-if-something-is-hidden-with-jquery) — mplungjan, Jul 14 '13 at 08:59

Manoj Yadav · Accepted Answer · 2013-07-14T09:18:58.377

0

Updated code to handle visibility and 0 height as suggested by @mplungjan and @Frexuz:

var div2 = $('#div2');
if (div2.is(':visible') && div2.height() > 0) {
    $('#div2').animate({'height': '0px'}, 400).hide(0);
}

edited Jul 14 '13 at 09:18

answered Jul 14 '13 at 08:59

Manoj Yadav

6,280
1
19
21

What if it has visibility:"hidden" or just 0 height? – mplungjan Jul 14 '13 at 09:01
This is a little bit better `if ($('#div2').is(":visible"))`, but it won't check for 0 height i think. – Frexuz Jul 14 '13 at 09:02
@Frexuz answer updated for `is(":visible")`, @mplungjan what you suggest for 0 height? Should I add height check like this `$('#div2').height() > 0` – Manoj Yadav Jul 14 '13 at 09:14

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

You want to hide another div while showing one div, right?

No need to add if statement, just give a class .content to all of your content div and hide it.

*You can also use slideUp and slideDown instead of animate.

Check DEMO http://jsfiddle.net/yeyene/8JQXB/1/

JQUERY

$(document).ready(function () {
    $('.link').on('click', function () {
        $('.content').slideUp(500);
        $('div#' + $(this).attr('target')).css({
            'height': '50%'
        }).slideDown(500);
    });
});

HTML

<a class="link" target="div1">Click1</a><br />
<div id="div1" class="content">Div 1 content</div>
<a class="link" target="div2">Click2</a><br />
<div id="div2" class="content">Div 2 content</div>
<a class="link" target="div3">Click3</a><br />
<div id="div3" class="content">Div 3 content</div>

represent a hide/show value inside an if statement

2 Answers2

JQUERY

HTML