How to add an if statement to a toggle function

Question

Consider the following code, which toggles visibility of two classes with separate click() functions:

<!-- Toggles -->
<div class="a"></div>
<div class="b"></div>

<!-- Result -->
<div class="x" style="display:none"></div>
<div class="y" style="display:none"></div>
<div class="z" style="display:none"></div>

<!-- Script -->
$( ".a" ).click(function() {
var $this = $(this);
  $this.siblings(".x").toggle();
});


$( ".b" ).click(function() {
var $this = $(this);
  $this.siblings(".y").toggle();
});

How would I update this so that any time both x and y are visible, a third class, "z" is shown instead of both x and y?

score 1 · Answer 1 · answered Oct 28 '13 at 09:41

1

Demo http://jsfiddle.net/Yn3L2/

API is(':visible') http://api.jquery.com/visible-selector/

Rest should fit your needs :)

Code

$(".a").click(function () {
    var $this = $(this);
    $this.siblings(".x").toggle();
    checkZ();
});

$(".b").click(function () {
    var $this = $(this);
    $this.siblings(".y").toggle();
    checkZ();
});

function checkZ() {
    $('.z').hide();
    if ($('.x').is(':visible') && $('.y').is(':visible')) {

        $('.z').show();
    }
}

answered Oct 28 '13 at 09:41

Tats_innit

33,991
10
71
77

@Tats_innit thanks, if I want to keep this relational to the $this var (i.e. be able to use this multiple times on the same page, but only trigger the function on sibling classes, would if ($this.siblings(".a").is(':visible') && () $this.siblings(".b").is(':visible')) work? – alias51 Oct 28 '13 at 09:47
1

@alias51 yeah sure you can `:)` pass `this` as a function parameter, http://stackoverflow.com/questions/10198768/jquery-pass-this-to-function-parameter **please note** you need to know the visibility status of both `x` and `y` at all time though! **please see this demo** http://jsfiddle.net/VxwUR/ *passing value as parameter* – Tats_innit Oct 28 '13 at 09:51
@Tats_innit, thanks, I'm having difficulty following how to pass this as a function parameter; I am using checkZ($this) but still get an uncaught reference error? – alias51 Oct 28 '13 at 10:29

Rob Schmuecker · Accepted Answer · 2013-10-28T10:34:37.720

This works as show here: http://jsfiddle.net/DKRe2/1/

HTML:

<!-- Toggles -->
<div class="a">a</div>
<div class="b">b</div>
<!-- Result -->
<div class="x" style="display:none">class x</div>
<div class="y" style="display:none">class y</div>
<div class="z" style="display:none">class z</div>

JS:

<!-- Script -->
$(".a").click(function () {

    var $this = $(this);
    if ($this.siblings(".y").css('display') != 'none' && $this.siblings(".x").css('display') == 'none') {
        //now Hide y and show Z  
        $this.siblings(".y").toggle();
        $this.siblings(".z").toggle();
    } else {
        $this.siblings(".z").css('display', 'none');
        $this.siblings(".x").toggle();
    }
});


$(".b").click(function () {
    var $this = $(this);
    if ($this.siblings(".x").css('display') != 'none' && $this.siblings(".y").css('display') == 'none') {
        //now Hide y and show Z   
        $this.siblings(".x").toggle();
        $this.siblings(".z").toggle();
    } else {
        $this.siblings(".z").css('display', 'none')
        $this.siblings(".y").toggle();
    }
});

Thanks, how would this work if I wanted to keep the code relational (i.e. by reference to sibilings), so only siblings were affected (classes are repeated elsewhere on the page)? — alias51, Oct 28 '13 at 10:30
Just add back the siblings selector from before. I removed it as it wasn't strictly necessary in the code example you gave. I will amend answer. — Rob Schmuecker, Oct 28 '13 at 10:32

score 0 · Answer 3 · answered Oct 28 '13 at 09:46

0

I think this is what you really want.

Working DEMO

Added jQuery code

function checkZ() {
    $('.z').hide();
    if ($('.x').is(':visible') && $('.y').is(':visible')) {
        $('.x').hide(500);
        $('.y').hide(500)
        $('.z').show();
    }
}

answered Oct 28 '13 at 09:46

MarsOne

2,155
5
29
53

Thanks, how would this work if I wanted to keep the code relational (i.e. by reference to sibilings), so only siblings were affected (classes are repeated elsewhere on the page)? – alias51 Oct 28 '13 at 10:31
BY probably providing a unique Id to the child div and referecing the ID in the jQuery – MarsOne Oct 28 '13 at 10:34

How to add an if statement to a toggle function

3 Answers3