CODEWITHSUNDEEP
javascriptjqueryhtml
Karan Kcoresys
Karan Kcoresys

Reputation: 29

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

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>

Upvotes: 0

Views: 91

Answers (5)

cgdannie
cgdannie

Reputation: 158

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

Upvotes: 0

Saurabh Mistry
Saurabh Mistry

Reputation: 13689

$(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>

Upvotes: 0

Keith
Keith

Reputation: 24221

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>

Upvotes: 0

gavgrif
gavgrif

Reputation: 15509

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>

Upvotes: 0

raina77ow
raina77ow

Reputation: 106443

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.

Upvotes: 1

Related Questions