How to add class to another div, When a div has toggle class?

Question

Please read here clearly:-

I want to add a class at <div id="targetdiv">

When i click on button <button id="btn">Btn</button> , It will toggle class to <div id="dynamicdiv">

So i want when, The class toggle at <div id="dynamicdiv"> , a another class will toggle at <div id="targetdiv"> .

Working code:-

 $(document).ready(function(){ $("#btn").click(function(){ $("#dynamicdiv").toggleClass("test") }) function hasClass(){ if($('#dynamicdiv').hasClass('test') ){ $('#targetdiv').addClass('newclass'); }else { $('#targetdiv').removeClass('newclass'); } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="dynamicdiv">sfasdfasf</div> <div id="targetdiv"><h1>qwer</h1></div> <button id="btn">Btn</button> 

Answer 1

One possible approach:

$("#btn").click(function() {
  var $dynamicDiv = $('#dynamicdiv');
  $dynamicDiv.toggleClass('test');
  $('#targetdiv').toggleClass('newclass', $dynamicDiv.hasClass('test'));
});

.toggleClass() can be given a second param, controlling the state of toggle:

state

Type: Boolean

A Boolean (not just truthy/falsy) value to determine whether the class should be added or removed.

Answer 2

You can do it all in the one function. I have done the update class with a ternary equartion. I added a red color to the newclass to demonstrate the class is being added / removed on subsequent button clicks.

 $(document).ready(function(){ $("#btn").click(function(){ $("#dynamicdiv").toggleClass("test"); $('#dynamicdiv').hasClass('test') ? $('#targetdiv').addClass('newclass') : $('#targetdiv').removeClass('newclass'); }); }) 

 .newclass { color: red} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="dynamicdiv">sfasdfasf</div> <div id="targetdiv"><h1>qwer</h1></div> <button id="btn">Btn</button> 

Answer 3

Not sure what -> function hasClass(){ you thought this was meant to do,. It was a function that was never called.

But I think below is what you was after.

 $(document).ready(function(){ $("#btn").click(function(){ var d = $("#dynamicdiv"); d.toggleClass("test") $("#targetdiv"). toggleClass("newclass", d.hasClass("test")); }) }); 

 .test { background-color: red; } .newclass { background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="dynamicdiv">sfasdfasf</div> <div id="targetdiv"><h1>qwer</h1></div> <button id="btn">Btn</button> 

Answer 4

 $(document).ready(function(){ $("#btn").click(function(){ $("#dynamicdiv").toggleClass("test"); $('#dynamicdiv').hasClass('test')?$('#targetdiv').addClass('newclass'):$('#targetdiv').removeClass('newclass'); }); }); 

 .test{ color:red; font-size:36px; font-weight:bold; } .newclass{ border:1px solid green; background:blue; color:white; } #targetdiv{ padding:8px; height:90px; width:180px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="dynamicdiv">Dynamic Div</div> <div id="targetdiv"><h1>Target Div</h1></div> <button id="btn">Btn</button> 

Answer 5

As far as I know, there is no event listener for a class change. But you can create something similiar with an interval:

$(document).ready(function(){
    $("#btn").click(function(){
        $("#dynamicdiv").toggleClass("test")
    });

    function hasClass(){
        $('#targetdiv').toggleClass('newclass', $('#dynamicdiv').hasClass('test'));
    }

    setInterval(hasClass, 100);
}

This will call the hasClass function every 100 ms