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?

Tats_innit · Accepted Answer · 2013-10-28 09:41:12Z

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, 2013 at 9:41

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

alias51 Over a year ago

@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?

Tats_innit Over a year ago

@alias51 yeah sure you can :) pass this as a function parameter, stackoverflow.com/questions/10198768/… please note you need to know the visibility status of both x and y at all time though! please see this demo jsfiddle.net/VxwUR passing value as parameter

alias51 Over a year ago

@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?

Rob Schmuecker · Accepted Answer · 2013-10-28 10:34:37Z

0

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();
    }
});

edited Oct 28, 2013 at 10:34

answered Oct 28, 2013 at 9:41

Rob Schmuecker

8,9642 gold badges21 silver badges34 bronze badges

2 Comments

alias51 Over a year ago

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)?

Rob Schmuecker Over a year ago

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.

MarsOne · Accepted Answer · 2013-10-28 09:46:44Z

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, 2013 at 9:46

MarsOne

2,1875 gold badges30 silver badges54 bronze badges

2 Comments

alias51 Over a year ago

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)?

MarsOne Over a year ago

BY probably providing a unique Id to the child div and referecing the ID in the jQuery

Collectives™ on Stack Overflow

How to add an if statement to a toggle function

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related