Hide the child div of the child div when the parent div is toggled/slideDown

1
votes

I want to achieve this effect - that when the parent div is toggled/slides down, the child div of the child div should also hide.

Right now, I have a parent div, which toggles and shows child div. When I click on the link in the child div, a related child div toggles and shows. However, now if I don't toggle the child div again (to hide it) but directly toggle the parent div, the parent div toggles and hides the child div. But the sub-child of the child div still shows instead of hiding as well.

Here is the code: http://jsfiddle.net/fuz3d/LECWe/3/

If you click on Settings, it will display the child div with two links - Create Album and Upload. If I click on create album, it will show a sub-child div. If I click on Settings now, its child div will hide, but the sub-child div still shows.

How can I make it hidden when the parent div hides its child div?

I don't want the sub-child to show on the click of the parent div though.

2
javascriptjquery
your code has no children of children - Naftali

2 Answers

2
votes

I've added a single line that will do the job:

$("span.reference a[id]").click(function() {
    $("#" + this.id.substr(1)).slideToggle(600)
    .siblings('.toggleDiv').slideUp(600);
    $(this).css('color' , '#F47A20');
    $("span.reference a[id]").not(this).css('color' , '#FFF');
    $(".toggleA").hide("normal"); //i added this line
});

Is this what you want?

0
votes

Just an FYI, you also need to fix the color on of the "middle man": (I would add classes and toggle and remove the classes for the color instead of directly so it is all in the CSS instead of all this css stuff though)

$("span.reference a[id]").click(function() {
    $("#" + this.id.substr(1)).slideToggle(600).siblings('.toggleDiv').slideUp(600);
    $(this).css('color', '#F47A20');
    $("span.reference a[id]").not(this).css('color', '#FFF');
    $('.toggleA').hide(); // hide grand children
    $("#nav li a[id]").css('color', '#FFF'); // color children to original

});

$("#nav li a[id]").click(function() {
    $("#" + this.id.substr(1)).slideToggle(600).siblings('.toggleA').slideUp(600);
    $(this).css('color', '#000');
    $("span.reference a[id]").css('color', '#F47A20');
    $("#nav li a[id]").not(this).css('color', '#FFF');
});