We Keep Coding

How do i toggle between multiple classes for multiple elements in jQuery?

So I'm trying to implement a set of functions on my website with multiple div objects in it, so that when I click on Div A, it sets the text color of the page to red through Class A, and when i click on Div B, it sets the text to green through Class B, and so on and so forth.
My issue is that the other classes don't unset when clicking multiple objects and one class overrides the others, so the color of the text won't switch anymore.
I've been looking for solutions and trying to use addClass() and removeClass(), but it doesn't work for some reason. Here is a snippet of my code here
$(function() {
$('.one').click(function() {
$("h1").addClass('onetxt');
$("h1").removeClass('twotxt, threetxt');
});
});
$(function() {
$('.two').click(function() {
$("h1").addClass('twotxt');
$("h1").removeClass('onetxt, threetxt');
});
});
$(function() {
$('.three').click(function() {
$("h1").addClass('threetxt');
$("h1").removeClass('onetxt, twotxt');
});
});
h1 {
text-align: center;
}
div {
height: 65px;
width: 65px;
margin: 20px auto;
border-style: solid;
}
/*style info, ignore above here*/
.one {
background-color: red;
}
.onetxt {
color: red;
}
.two {
background-color: green;
}
.twotxt {
color: green;
}
.three {
background-color: blue;
}
.threetxt {
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Sample Text</h1>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
Any help on this would be greatly appreciated, and if you need more info, ask me in the replies, thank you!
EDIT: Here's a JSFiddle link demonstrating the code that i currently have, my intention is for all three of the DIV elements to change the top text's color when selected in any order, with using the classes if possible.

It seems like the main issue is that removeClass doesn't support multiple class selectors (like 'onetxt, twotxt'). Also you aren't removing all possible classes depending on the order of clicks.
Here's a solution that might work. I've written some helper functions which hopefully clarify what's going on.
const targets = 'h1, p'
const classmap = {
one: 'onetxt',
two: 'twotxt',
three: 'threetxt'
}
const allclasses = Object.values(classmap);
function clearSelection() {
allclasses.forEach(function(clz) { $(targets).removeClass(clz) });
}
function addSelection(sel) {
$(targets).addClass(classmap[sel]);
}
$(function() {
$('.one').click(function(){
clearSelection();
addSelection('one')
});
});
$(function() {
$('.two').click(function(){
clearSelection();
addSelection('two')
});
});
$(function() {
$('.three').click(function(){
clearSelection();
addSelection('three')
});
});

Here's a vanilla DOM API solution based on classList.toggle(className: string, force: boolean). The second parameter controls whether toggle works as remove or add.
const classes = ['one', 'two', 'three'];
classes.forEach(clazz => {
document.querySelector(`.${clazz}`).addEventListener('click', () => {
classes.forEach(cl => document.querySelector('h1').classList.toggle(`${cl}txt`, cl === clazz));
})
})
h1 {
text-align: center;
}
div {
height: 35px;
width: 35px;
margin: 5px auto;
border-style: solid;
}
/*style info, ignore above here*/
.one {
background-color: red;
}
.onetxt {
color: red;
}
.two {
background-color: green;
}
.twotxt {
color: green;
}
.three {
background-color: blue;
}
.threetxt {
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Sample Text</h1>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

There is no .removeClass() overload supports multiple argument, it only remove the first class. .removeClass() with no argument remove all the classes. This maybe the one you need.
I tweak your code a little bit, including:
Rename some class name. .color-palette is the container of all color selection. .color is individual color choice box.
Add data-color-name attribute to .color. The attribute will be used for sample-text css class assignment.
Simplify the click event with a single, event-delegate handler. I try to decouple the add/remove class logic with the actual color name. This way if you have more color boxes to add, you do not need to copy a new set of function.
Define custom css property. E.g. (--color-1, --color-2). The same property is used for color box background and sample text font color. You don’t have to maintain colors in two different place.
$('.color-palette').on('click', '.color', function(e) {
$("#sample-text").removeClass().addClass($(e.currentTarget).data('color-name'));
});
/* maintain the color choices here */
:root {
--color-1: red;
--color-2: green;
--color-3: blue;
}
h1 {
text-align: center;
}
.color {
height: 65px;
width: 65px;
margin: 20px auto;
border-style: solid;
}
/* style info, ignore above here */
/* color palette style */
.color.color-1 {
background-color: var(--color-1);
}
.color.color-2 {
background-color: var(--color-2);
}
.color.color-3 {
background-color: var(--color-3);
}
/* sample text style */
#sample-text.color-1 {
color: var(--color-1);
}
#sample-text.color-2 {
color: var(--color-2);
}
#sample-text.color-3 {
color: var(--color-3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="sample-text">Sample Text</h1>
<div class="color-palette">
<div class="color color-1" data-color-name="color-1"></div>
<div class="color color-2" data-color-name="color-2"></div>
<div class="color color-3" data-color-name="color-3"></div>
</div>

Toggle only one div element at same position (hide all other div)

I’m new to jQuery and struggling with the .toggle() function.
I want to display several <div>-elements in the same position…but only one at the time. If one <div> is opened and a different one is “toggled” it should automatically be closed.
HTML:
$(document).ready(function() {
$("#button1").click(function() {
$("#box1").toggle(1000);
});
});
$(document).ready(function() {
$("#button2").click(function() {
$("#box2").toggle(1000);
});
});
.container {
width: 90px;
}
.box1 {
background-color: green;
color: red;
display: none;
}
.box2 {
background-color: blue;
color: yellow;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class=box1 id=box1>
This is Box 1
</div>
<div class=box2 id=box2>
This is Box 2
</div>
</div>
Box1
Box2
Also, I am pretty sure that I only need one toggle() function and not 4 for the task I am trying to achieve…but trying to call on the same one does not seem to work with my different id/class.
What am I doing wrong/missing here?

Generally, you can use a single document ready function.
In this case, you could also use a single click function to handle your toggles. Since you're using trigger links, you'll need a way to reference the target box, but something like this would work with an additional attribute to get the box name. (You could do it with indexes as well, but for ease of use, I've added a target-box attribute that has the ID of the desired box.)
I've also added the same box class to both divs, you could remove the individual box1/box2 classes since you have IDs that handle differences already.
I've also added a toggle class to the links to give them a more semantic selector and removed the unnecessary 'open/close' duplicates (since toggle is designed to handle both)
jQuery(document).ready(function($){
$('.toggle').on('click', function(){
var targetBox = $(this).attr('target-box'); // Find the target box
$('.box').not(targetBox).hide(1000); // Hide all other boxes
$(targetBox).toggle(1000); // Toggle the current state of this one
});
});
.container {
width: 90px;
}
.box1 {
background-color: green;
color: red;
display: none;
}
.box2 {
background-color: blue;
color: yellow;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box box1" id="box1">
This is Box 1
</div>
<div class="box box2" id="box2">
This is Box 2
</div>
</div>
Toggle Box1
Toggle Box2

Something like this may do the trick for you. You can hide all elements marked in some way, e.g. all elements of a class. In this snippet I added the class "box" to all boxes, and on open, I first hide all boxes in this way, before showing the specified box.
Now clicking open will open the specified box and close any others, and clicking close will close the specified box.
$(document).ready(function() {
$("#button1").click(function() {
$(".box").hide(1000);
$("#box1").show(1000);
});
$("#buttonclose").click(function() {
$("#box1").hide(1000);
});
$("#button2").click(function() {
$(".box").hide(1000);
$("#box2").show(1000);
});
$("#buttonclose2").click(function() {
$("#box2").hide(1000);
});
});
.container {
width: 90px;
}
.box1 {
background-color: green;
color: red;
display: none;
}
.box2 {
background-color: blue;
color: yellow;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box box1" id=box1>
This is Box 1
</div>
<div class="box box2" id=box2>
This is Box 2
</div>
</div>
Close Box1
Close Box2
Open Box1
Open Box2

Show div when post has class

Update
I'd modded the CSS given by David Thomas a bit. Its now a banner.
.div.popular::before {
/* setting the default styles for
the generated content: */
display: block;
width: 10em;
height: 2em;
line-height: 2em;
text-align: center;
background: #F60;
color: #fff;
font-size: 1.4rem;
position: absolute;
top: 30px;
right: 0px;
z-index: 1;
}
I would like to make a folded corner sort of like in this post: Folded banner using css
--- Original post ---
Let me first explain what I'm trying to do. I'm trying to give some post some extra attention by making a little circle with some call-to-action text in it.
But I only want this to trigger when a div has a specific class.
So if the div the class populair or sale I would like to have a little circle show up on that post. This script what I am using right now.
$(document).ready(function($){
if($("#front-page-items").hasClass('populair')){
$(".populair-div").show();
}
if($("#front-page-items").hasClass('sale')){
$(".sale-div").show();
}
});
And this HTML:
<div class="populair-div" style="display:none;">
<strong>Populair</strong>
</div>
<div class="sale-div" style="display:none;">
<strong>Sale</strong>
</div>
But this only show's the populair-div and not the other one. I'm guessing my script is wrong. Should I use else for all the other call-to-action classes?
$(document).ready(function($){
if($("#front-page-items").hasClass('populair')){
$(".populair-div").show();
}
else($("#front-page-items").hasClass('sale')){
$(".sale-div").show();
}
else($("#front-page-items").hasClass('Free')){
$(".free-div").show();
} // and so on
});
Is there someone that could help me out? Also is it possible to echo the div so I don't have to write a whole div for every call-to-action div?

For something like this, where the displayed text is explicitly linked to the class-name of the element it's easiest to use CSS and the generated content available, effectively hiding the elements you don't wish to show by default and then explicitly allowing elements you want to show, along with the generated content of those elements (using the ::before and ::after pseudo-elements:
div {
/* preventing <div> elements
from showing by default: */
display: none;
}
div.populair-div,
div.sale-div {
/* ensuring that elements matching
the selectors above (<div>
elements with either the 'sale-div'
or 'populair-div' class-names
are shown: */
display: block;
}
div.populair-div::before,
div.sale-div::before {
/* setting the default styles for
the generated content: */
display: block;
width: 4em;
height: 4em;
line-height: 4em;
text-align: center;
border: 3px solid transparent;
border-radius: 50%;
}
div.populair-div::before {
/* setting the text with the
"content" property: */
content: "Popular";
/* providing a specific colour
for the generated contents'
border: */
border-color: #0c0;
}
div.sale-div::before {
content: "Sale";
border-color: #f90;
}
/* entirely irrelevant, just so you can
see a (slightly prettified) difference
should you remove the default display
property for the <div> elements: */
code {
background-color: #ddd;
}
em {
font-style: italic;
}
<div class="neither-popular-nor-sale">
<p>
This element should not be shown, it has neither a class of <code>"populair-div"</code> <em>or</em> <code>"sale-div"</code>.
</p>
</div>
<div class="populair-div">
</div>
<div>Also not to be shown.</div>
<div class="sale-div">
</div>

You can use toggle function for this. It will be shorter and clearer.
Display or hide the matched elements.
Note: The buttons is for tests.
$(document).ready(function($){
init();
});
function init() {
$(".populair-div").toggle($("#front-page-items").hasClass('populair'));
$(".sale-div").toggle($("#front-page-items").hasClass('sale'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="front-page-items" class="populair sale"></div>
<div class="populair-div">populair-div</div>
<div class="sale-div">sale-div</div>
<hr />
<button onclick="document.getElementById('front-page-items').classList.toggle('populair');init()">toggle populair</button>
<button onclick="document.getElementById('front-page-items').classList.toggle('sale');init()">toggle sale</button>

jQuery toggleClass doesn't switch class

i've been trying to understand toggleClass function by making this simple script, yet it didn't work the way I expected it to.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style type="text/css">
body {
font-family: "Kozuka Gothic Pro";
}
.red {
background: red;
}
.blue {
background: blue;
}
div {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="blue"></div>
<script>
$("div").click(function() {
$(this).toggleClass("red");
});
</script>
</body>
However, if i changed the div class to red and the toggleClass argument to "blue" it works, can anybody explain me this? I'm hoping to hear from you. Thanks in advance!

You need to add both blue and red class in toggleClass function to change both like,
$("div").click(function() {
$(this).toggleClass("red blue");
});
$("div").click(function() {
$(this).toggleClass("red blue");
});
body {
font-family: "Kozuka Gothic Pro";
}
.red {
background: red;
}
.blue {
background: blue;
}
div {
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue"></div>
What happens when you use only red in togleclass function then it will applied but the change would not overwrite because of the blue class and the blue background shown as it is. So, if you want your code to work then in that case you need to use !important in red-background like,
.red {
background: red !important;
}
$("div").click(function() {
$(this).toggleClass("red");
});
body {
font-family: "Kozuka Gothic Pro";
}
.red {
background: red !important;
}
.blue {
background: blue;
}
div {
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue"></div>
Note that I am just informing you (by second alternative) why your code was not working. You must go with my first option.

$("div").click(function() {
$(this).toggleClass("red");
$(this).toggleClass("blue");
});
body {
font-family: "Kozuka Gothic Pro";
}
.red {
background: red;
}
.blue {
background: blue;
}
div {
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue"></div>
$("div").click(function() {
$(this).toggleClass("red");
$(this).toggleClass("blue");
});

Try this : pass both red and blue class, it will remove if present and add if not. So for first time it will add red but will remove blue.
$("div").click(function() {
$(this).toggleClass("red blue");
});

The toggleClass() method toggles between adding and removing one or more class names from the selected elements.
This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect.
Explanation Below
it act as - if div have class "red" then REMOVE class "red" else ADD "red" class from div

The problem arises due to order of the css styles, as last css style will affect the output, so as css on class blue is declared last, so blue class is given precedence over red class.
So, to solve this, you should try to have only one class on the div, so that the order of the css should not matter.
$("div").click(function() {
$(this).toggleClass("red blue");
});

The toggleClass() will remove the class if it is assigned to the element, or it will add it if it is not assigned to the element. Try this snippet as a demo:
$(document).ready(function() {
$("div").click(function() {
if ($(this).hasClass("red")) {
alert("I am red! I'm turning red off.");
$(this).toggleClass("red");
} else if ($(this).hasClass("blue")) {
alert("I am blue! I'm turning blue off.");
$(this).toggleClass("blue");
} else {
alert("I am blank! Turning red on.");
$(this).toggleClass("red");
}
});
});
body {
font-family: "Kozuka Gothic Pro";
}
.red {
background: red;
}
.blue {
background: blue;
}
div {
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue"></div>

I change background color of button with jquery click function

I change background color of a button using the jQuery click function, but I want to do this without jQuery. How can I use it only with CSS? Here are my codes and jsfiddle demo below.
.colorButton{
background: blue;
color: white;
cursor: pointer;
}
<div class="buttons">
<button class="colorButton">Click me</button>
</div>
<script>
$(document).ready(function () {
$('.colorButton').click(function (){
$(this).css("background","yellow");
});
});
</script>
http://jsfiddle.net/myyhs84b/

.colorButton{
background:blue;
color:white;
cursor:pointer;
}
.colorButton:focus{
background:yellow;
}
<button class="colorButton">Click me</button>
[EDIT] okay, now pure CSS

You can do this with CSS:
.colorButton:active,
.colorButton:focus{
background:yellow;
}
But on outside click it remain the same. Because you have to add a new class or have to implement the existing code that apply the inline style to your DOM element.

The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse.
CSS
.colorButton{
background:blue;
color:white;
cursor:pointer;
}
.colorButton:focus{
background: yellow;
}
HTML
<div class="buttons">
<button class="colorButton">Click me</button>
</div>
Fiddle here
FYI
focus

Using checkbox/radio CSS hack, this could be a solution: {please don't, handling click should be done in javascript anyway}
HTML:
<div class="buttons">
<input id="rd_btn" type="radio" />
<button class="colorButton">
<label for="rd_btn">Click me</label>
</button>
</div>
CSS:
.colorButton {
background:blue;
color:white;
cursor:pointer;
}
.colorButton {
padding: 0;
}
.colorButton label {
display: block;
padding: 2px;
}
#rd_btn {
display: none;
}
#rd_btn:checked + button {
background: yellow;
}
-jsFiddle-

Since there is no click event in HTML and CSS, you can use functionality of pseudo class :checked to change something.
Just style the label as some button, than bind some click functionality in jquery.
Take a look at this exaples:
http://www.paulund.co.uk/create-flat-checkboxes
Or :active pseudo class. Example here:
http://www.paulund.co.uk/create-a-css-3d-push-button

I don't think you can do this only with CSS as there isn't anything like a "clicked" property.
Maybe :active or :hover will fit your needs.
.colorButton1:active
{
background: green;
}
.colorButton2:hover
{
background: blue;
}
http://jsfiddle.net/qbjsnp42/

The closest thing you could do is using :active or :focus but the first will only should work while you are pressing the button while the second will only work unless you don't press anywhere else
what you can do is defining a class in your CSS and then via JS add the class on click