CODEWITHSUNDEEP
jquerycsscss-selectors
Catalin
Catalin

Reputation: 302

SOLVED: How can I toggle between 2 colors

I am trying to toggle between 2 colors on h1 that is containing 2 words. I am setting default 1 color for each word and trying to switch them by adding a class to them but it seems something it's wrong.

function myFunction() {
  $("#id1").toggleClass("class1");
  $("#id2").toggleClass("class2");
};
#id1 {
  text-align: center;
  color: blue;
}

.class1 {
  color: grey;
}

#id2 {
  text-align: center;
  color: grey;
}

.class2 {
  color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 id="id1"> <span id="id2">bla</span> bla</h1>
<button onclick="myFunction()">click</button>

Any suggestions? LE: Thank you all for the answers!

Upvotes: 2

Views: 104

Answers (5)

Felix A J
Felix A J

Reputation: 6490

It is an issue with CSS Specificity. Color applied using id cannot be overwritten by using class name.

It is always better to avoid !important whenever possible.

Instead of using #id1, try attribute selector like [id="id1"].

function myFunction() {
  $("#id1").toggleClass("class1");
  $("#id2").toggleClass("class2");
};
[id="id1"] {
  text-align: center;
  color: blue;
}

.class1 {
  color: grey;
}

[id="id2"] {
  text-align: center;
  color: grey;
}

.class2 {
  color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 id="id1"> <span id="id2">bla</span> bla</h1>
<button onclick="myFunction()">click</button>

Upvotes: 1

CodeBug
CodeBug

Reputation: 25

Following MDN you should not use !important in your case

function myFunction() {
  $("#id1").toggleClass("class1");
  $("#id2").toggleClass("class2");
};
#id1 {
  text-align: center;
  color: blue;
}

#id1.class1,
#id2.class1 {
  color: grey;
}

#id2 {
  text-align: center;
  color: grey;
}

#id1.class2,
#id2.class2 {
  color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 id="id1"> <span id="id2">bla</span> bla</h1>
<button onclick="myFunction()">click</button>

Upvotes: 2

CoalAshed
CoalAshed

Reputation: 45

Remove the color: blue from the id selector, is redudant. You only need it in the 2 classes and toggle between them.

EDIT : For example 

function myFunction() {
  $("#id1").toggleClass("class1").toggleClass("class2");
  $("#id2").toggleClass("class1").toggleClass("class2");
}
#id1, #id2 {
  text-align: center;
}

.class1 {
  color: grey;
}

.class2 {
  color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 id="id1" class="class1">
  <span id="id2" class="class2">bla</span> 
  bla
</h1>
<button onclick="myFunction()">click</button>

Upvotes: 2

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123428

It's a matter of CSS specificity

A style applied to an id is more specific than a style applied to a class even if you defined the latter after the former. You have to increase the specificity of your selectors when you toggle the class or make both of your selectors with the same specificity and take benefit of the cascade. A third way is to use !important but I'd not use it in this circumstance.

In the example below I changed your id selectors into attribute selector which have the same specificity of the class selector

function myFunction() {
  $("#id1").toggleClass("class1");
  $("#id2").toggleClass("class2");
};
[id="id1"] {
  text-align: center;
  color: blue;
}

.class1 {
  color: grey;
}

[id="id2"] {
  text-align: center;
  color: grey;
}

.class2 {
  color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 id="id1"> <span id="id2">bla</span> bla</h1>
<button onclick="myFunction()">click</button>

Upvotes: 3

Sawant Sharma
Sawant Sharma

Reputation: 758

Try introducing !important in both of your classes 

function myFunction() {
  $("#id1").toggleClass("class1");
  $("#id2").toggleClass("class2");
};
#id1 {
  text-align: center;
  color: blue;
}

.class1 {
  color: grey !important;
}

#id2 {
  text-align: center;
  color: grey;
}

.class2 {
  color: blue !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 id="id1"> <span id="id2">bla</span> bla</h1>
<button onclick="myFunction()">click</button>

Upvotes: 4

Related Questions