Hide a toggle inside a toggle

Question

How can I hide a toggle when there's another toggle and if the user show the one inside and you hide the one outside the one inside keeps there? It should be hidden too.

I was not clear so here is the updated example: http://jsfiddle.net/jalxob/hEusd/5/

$('input[type="checkbox"]').click(function(){
if($(this).val()=="checking"){
    $(".open-box").toggle();
    if("none" == $(".open-box").css("display")) { 
        $(".box1").css("display", "none");
    }
}
});

$('.open-box').click(function() {
$(".box1").slideToggle();
});

Alright, I solved it again after you clarified. Welcome to StackOverflow by the way. — digitalextremist, Dec 06 '13 at 19:52
This isn't getting any clearer, could you draw an image (Paint will do) that describes the problem? — Popnoodles, Dec 06 '13 at 19:52
Ok on the new example: http://jsfiddle.net/jalxob/hEusd/5/ When you check the box it shows a link when you click on it, a new div appears. But when you uncheck the box the new div stills there. Two guys already solved it but they skip the input's value: http://jsfiddle.net/digitalextremist/Jm4L6/ — user2989327, Dec 06 '13 at 20:02
There's the 3rd one: http://jsfiddle.net/digitalextremist/Jm4L6/2/ — digitalextremist, Dec 06 '13 at 20:15

score 0 · Answer 1 · answered Dec 06 '13 at 19:20

0

In your jsfiddle, box2 isn't inside box1. If you put it inside box1, then it will get hidden. If you need to leave it outside, add something like this:

$('input[type="checkbox"]').click(function(){
    if($(this).val()=="checking"){
        $(".box1").toggle();
        if("none" == $(".box1").css("display")) { // ADD THIS IF BLOCK
            $(".box2").css("display", "none");
        }
    }
});

$('.open-box').click(function() {
    $(".box2").slideToggle();
});

answered Dec 06 '13 at 19:20

elixenide

44,308
16
74
100

2

Why not simply use `$(this).val()` ?? – Afzaal Ahmad Zeeshan Dec 06 '13 at 19:21
Wouldn't `if(!$(".box1").is(":visible")){` instead of `if("none" == $(".box1").css("display")) {` be simpler? – JCHebert Dec 06 '13 at 19:26
Updated example: http://jsfiddle.net/jalxob/hEusd/5/ I think you almost answer my question. Thank you! – user2989327 Dec 06 '13 at 19:43
I see you changed the class names and made one an `` tag, but the boxes still aren't nested. – elixenide Dec 06 '13 at 19:54
Yes, the structure I put as example was not the best. Sorry. – user2989327 Dec 06 '13 at 19:59

score 0 · Answer 2 · answered Dec 06 '13 at 19:24

You need to put both the boxes inside a container, and change it so that clicking the checkbox toggles the container div.

see example here: JSFiddle

I changed the HTML to put both boxes in a div like this:

<input type="checkbox" value="checking">
<div class="box-container">
    <div class="box1">
        <a href="#" class="open-box">Show next box</a>
    </div>
    <div class="box2"></div>
</div>

and changed the checkbox click event to toggle the container:

$(".box-container").toggle();

I was not clear with my question. Here is the updated example: http://jsfiddle.net/jalxob/hEusd/5/ — user2989327, Dec 06 '13 at 19:43

score 0 · Accepted Answer · edited May 23 '17 at 12:29

0

This solves it, and it's an easy fix: http://jsfiddle.net/digitalextremist/2PcWV/2

<input type="checkbox" value="checking">

<div class="box1">
    <a href="#" class="open-box">Show next box</a>
    <div class="box2"></div>
</div>

UPDATE:

After you clarified, here is a new snippet: http://jsfiddle.net/digitalextremist/Jm4L6/1

That is this:

$('input[type="checkbox"]').click(function () {
    if (this.checked) {
        $(".open-box").show();
    } else {
        $(".open-box").hide();
        $(".box1").hide();
    }
});

$('.open-box').click(function () {
    $(".box1").slideToggle();
});

With this HTML:

<input type="checkbox"> <a href="#" class="open-box">Show next box</a>

<div class="box1"></div>

It involves ideas talked about here: How to check whether a checkbox is checked in jQuery?

This third update ought to cover everything you asked:

http://jsfiddle.net/digitalextremist/Jm4L6/2/

edited May 23 '17 at 12:29

Community

1
1

answered Dec 06 '13 at 19:33

digitalextremist

5,952
3
43
62

I think I was not clear. Look at the updated example: http://jsfiddle.net/jalxob/hEusd/5/ – user2989327 Dec 06 '13 at 19:42
I see what you want, I am updating my answer with a new code snippet and a link to what you're asking about. – digitalextremist Dec 06 '13 at 19:50
It works well, but I need to use the input's value. How can I add it? – user2989327 Dec 06 '13 at 19:58
Did you uodate yout jsfiddle? I don't see any call to value="checking" – user2989327 Dec 06 '13 at 20:05
Yes, I updated the fiddle, but there is a problem with what you're asking. There is a line commented out which shows what I mean. The value attribute will always be 'checking' ... Whether it's hidden or showing. What you need to be checking is 'checked' ... How do you want to use the value of the checkbox? – digitalextremist Dec 06 '13 at 20:07
Wait, I see what you want. One second. – digitalextremist Dec 06 '13 at 20:13

JCHebert · Answer 4 · 2013-12-06T19:48:01.830

0

You shouldnt use $(this).val()=="checking" as it will always return true whether the checkbox is checked or not.

I would go with something like this :

http://jsfiddle.net/hEusd/12/

edited Dec 06 '13 at 19:48

answered Dec 06 '13 at 19:41

JCHebert

83
5

I just update the fiddle because my questions was not clear: http://jsfiddle.net/jalxob/hEusd/5/ – user2989327 Dec 06 '13 at 19:42
Updated the fiddle to reflect your changes. – JCHebert Dec 06 '13 at 19:48
When you check the checkbox the .open-class and .box1 should be hide – user2989327 Dec 06 '13 at 19:52
You changes works I just think you forgot to call the value's input. – user2989327 Dec 06 '13 at 19:56

Hide a toggle inside a toggle

4 Answers4