CODEWITHSUNDEEP
jquery
santa
santa

Reputation: 12512

Toggle with check with jQuery

I have a main element and 2 secondary. When main element is clicked it toggles both secondary ones.

$(".main").click(function() {
    $(this).toggleClass("classA").toggleClass("classB");
    $(".secondary").toggleClass("classC").toggleClass("classD");
));

However, each secondary can be clicked individually, and the class toggle will only affect that element.

$(".secondary").click(function() {
   $(".secondary").toggleClass("classC").toggleClass("classD");
));

I need to add a check/functionality to make sure that if all secondary elements are toggled, the main is toggled too.

Upvotes: 0

Views: 98

Answers (1)

Naftali
Naftali

Reputation: 146310

try this:

$(".secondary").click(function() {
   $(".secondary").toggleClass("classC").toggleClass("classD");
   $('.main').click();
));

check out fiddle here: http://jsfiddle.net/maniator/bx9QQ/

code:

$("#main").click(function() {
    $(this).toggleClass("classA").toggleClass("classB");
    $(".secondary").toggleClass("classC").toggleClass("classD");
});

$(".secondary").click(function() {
   $(this).toggleClass("classC").toggleClass("classD");
   $("#main").click;
});

html:

<div id='main'>
    <div class='secondary'></div>
    <div class='secondary'></div>
</div>

css:

#main {
    background: grey;
    height: 100px;
    width: 150px;
}

.secondary {
    background: blue;
    height: 50px;
    width: 90px;
    margin: 0 auto;
}

.classA {background: green !important;}
.classB {background: orange !important;}
.classC {background: yellow;}
.classD {background: purple;}

Upvotes: 1

Related Questions