Develop Reference

Why does my jQuery toggle workaround not work?

Since I couldn't make it work with the jQuery toggle function I try to build a workaround which doesn't work as well. If I just go for removeClass onClick, it removes the class. But both the toggle and if..else logic won't work.
Where's my bug?
$('.category-wrapper').click(function() {
if ($(this).hasClass("category-deselected")) {
$(this).removeClass("category-deselected")
} else {
$(this).addClass("category-deselected")
}
});
.category-deselected {
color: red;
}
.category-wrapper input {
position: fixed;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category-wrapper category-deselected"><label for="id_poller_category_17"><input type="radio" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17" required="">
click me to change color</label></div>

Your code looks Excellent !! you just need to prevent the bubble effect which causes trigger the handler 2 times , you can see more here bubble events
e.preventDefault()
$('.category-wrapper').click(function(e) {
if ($(this).hasClass("category-deselected")) {
$(this).removeClass("category-deselected")
} else {
$(this).addClass("category-deselected")
}
e.preventDefault(); // <-- this line your solution
});
.category-deselected {
color: red;
}
.category-wrapper input {
position: fixed;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category-wrapper category-deselected"><label for="id_poller_category_17"><input type="radio" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17" required="">
click me to change color</label></div>

you can easily toggle a checkbox but you can't toggle a radio cause it checked just once. if you are planning to use multiple radios instead then you can use the following link: JSFiddle click to test the example.
// Multiple Radio Color Change Example:
JSFiddle
// Radio Example:
$(document).ready(function() {
$('#radio-example input:radio').change(function() {
$("label").toggleClass("category-deselected");
});
});
.category-deselected {
color: red;
}
.category-wrapper input {
position: fixed;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radio-example" class="category-wrapper">
<div class="row">
<label for="id_poller_category_17">click me to change color</label>
<input type="radio" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17"> </div>
</div>
//Checkbox Example:
$(document).ready(function() {
$('#radio-example input:checkbox').change(function() {
$("label").toggleClass("category-deselected");
});
});
.category-deselected {
color: red;
}
.category-wrapper input {
position: fixed;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radio-example" class="category-wrapper">
<div class="row">
<label for="id_poller_category_17">click me to change color</label>
<input type="checkbox" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17"> </div>
</div>

The issue is that you have both a <label> and an <input> in your div, and the they both send a click event, which results in your function executing twice, nearly simultaneously. You can get around this by ignoring the click on the label:
$('.category-wrapper').click(function() {
if (event.target.nodeName !== "LABEL") {
if ($(this).hasClass("category-deselected")) {
$(this).removeClass("category-deselected")
} else {
$(this).addClass("category-deselected")
}
}
});
.category-deselected {
color: red;
}
.category-wrapper input {
position: fixed;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category-wrapper category-deselected"><label for="id_poller_category_17"><input type="radio" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17" required="">
click me to change color</label></div>

$('.category-wrapper').click(function() {
if ($(this).hasClass("category-deselected")) {
$(this).removeClass("category-deselected")
} else {
$(this).addClass("category-deselected")
}
});
Think about your logic ... if hasClass ( remove class) ... else ( addClass )
Your script first check if $(this) hasClass and then remove it ... and then make "else" and addClass

How to change button color when radio input is selected, but input is wrapped in div before label?

I am trying to make our dinky radio buttons into lovely toggle buttons on our donation page. The HTML cannot be modified, and as it stands the inputs are wrapped in divs, then followed by the labels. I have zero knowledge of JS/jQuery and I imagine this task requires some.
Here is my fiddle: https://jsfiddle.net/cgz63qhd/
body {
padding: 10px;
font-family: sans-serif;
}
div.donation-levels {
margin: 3px 0;
}
.donation-level-container {
display: inline-block;
}
.donation-level-container input {
visibility: hidden;
}
.donation-level-amount-container {
text-align: center;
margin: 5px 2px;
padding: 0.7em 2em;
color: #ffffff;
background-color: #1a92b4;
border-radius: 5px;
display: inline-block;
cursor: pointer;
font-size: 22px;
}
.donation-level-amount-container:hover {
background: #e8525f;
color: #ffffff;
}
.donation-level-label-input-container input:checked~label {
background: #e8525f;
}
<div class="donation-level-container">
<div class="form-content">
<div class="donation-level-input-container form-input">
<div class="donation-level-label-input-container">
<input name="level_flexibleexpanded" id="level_flexibleexpanded5942" value="5942" onclick="evalMatchingGift('$35.00');" type="radio">
</div>
<label for="level_flexibleexpanded5942" onclick="">
<div class="donation-level-amount-container">
$35.00
</div>
</label>
</div>
<input name="level_flexibleexpandedsubmit" id="level_flexible_5942expandedsubmit" value="true" type="hidden">
</div>
</div>
<div class="donation-level-container">
<div class="form-content">
<div class="donation-level-input-container form-input">
<div class="donation-level-label-input-container">
<input name="level_flexibleexpanded" id="level_flexibleexpanded5943" value="5943" onclick="evalMatchingGift('$60.00');" type="radio">
</div>
<label for="level_flexibleexpanded5943" onclick="">
<div class="donation-level-amount-container">
$60.00
</div>
</label>
</div>
<input name="level_flexibleexpandedsubmit" id="level_flexible_5943expandedsubmit" value="true" type="hidden">
</div>
</div>
<div class="donation-level-container">
<div class="form-content">
<div class="donation-level-input-container form-input">
<div class="donation-level-label-input-container">
<input name="level_flexibleexpanded" id="level_flexibleexpanded5944" value="5944" onclick="evalMatchingGift('$120.00');" type="radio">
</div>
<label for="level_flexibleexpanded5944" onclick="">
<div class="donation-level-amount-container">
$120.00
</div>
</label>
</div>
<input name="level_flexibleexpandedsubmit" id="level_flexible_5944expandedsubmit" value="true" type="hidden">
</div>
</div>
Here is my inspiration donate page: https://action.audubon.org/donate/now
Alas, their labels are set up better so I think they were able to make the buttons with pure CSS (?).
My buttons currently are looking decent, are sized fine and colored nicely, but they just won't stay that coral color when clicked! Can someone help me out?
I've seen a lot of questions here on this topic but I can't seem to get anything to work.
I'm sure there are other issues in the code, please point them out if you see them!

$(".donation-level-amount-container").on("click", function() {
$('.donation-level-amount-container').each(function() {
$(this).removeClass('active');
});
$(this).toggleClass('active');
})
And css
.active {
background:#e8525f;
color:#ffffff;
}
Working fiddle:
https://jsfiddle.net/29exoa4k/2/

You need this piece of jQuery:
$(function() {
$(document).on('click','.donation-level-amount-container',function(){
$('.donation-level-amount-container').removeClass('active');
$(this).addClass('active');
});
});
Update also to this CSS:
.donation-level-amount-container:hover, .donation-level-amount-container.active {
background:#e8525f;
color:#ffffff;
}
Here is the updated jsfiddle.

You want something like this
$(".donation-level-amount-container").on("click", function() {
$(this).css("background", "red");
})
or to toggle an active class
$(".donation-level-amount-container").on("click", function() {
$(this).toggleClass("active");
})

You need this
$(".donation-level-amount-container").on("click", function() {
$(".donation-level-amount-container").css("background", "#1a92b4");
$(this).css("background", "#e8525f");
})
and css !important for background property
.donation-level-amount-container:hover {
background:#e8525f!important;
color:#ffffff;
}
here's your updated fiddle https://jsfiddle.net/cgz63qhd/3/

Indeed, this can not be done with pure CSS, since you can't traverse upward in the DOM using CSS selectors. As previous answers mentioned, it can easily be done with jQuery, but it can also be done in vanilla javascript.
var donationButtons = document.querySelectorAll('.donation-level-amount-container');
var defaultBg = '#1a92b4';
var activeBg = '#f00';
donationButtons.forEach(function(btn){
btn.onclick = function(){
donationButtons.forEach(function(btn){
// deselect previously selected buttons
btn.style.background = defaultBg;
});
this.style.background = activeBg;
}
});
I'm certain this can be done smoother, but this is the first solution that popped up in my head.

Hover on a link and change the background-image of a div - JQuery

I'm having trouble making a div's background-image change when hovering over a link the code looks fine to me so I'm at a loss here is the code:
Javascript:
$('#hover-01').on('mouseover', function(){
$('#hover-change').css('background-image', 'url("images/1.jpg")');
});
$('#hover-01').on('mouseout', function(){, function(){
$('#hover-change').css('background-image', 'url("images/5.jpg")');
});
HTML:
<div class="open-project-link">
<a id="hover-01" class="open-project"
href="project3.html">Bowman Clay</a>
</div>
<div class="responsive-section-image" id="hover-change"
style="background-image: url(images/5.jpg);">
<div class="overlay"></div>
</div>
jQuery version: v2.1.1
Any idea's or advice?
Edit: the code does work however it was a problem with a 3rd party plugin (I assume) so I fixed it with normal javascript and not jQuery

'mousein' isn't an event handler that you can use. You should use mouseover and mouseout, or mouseenter and mouseleave. See jQuery mouse events here.
You also need to give a width/height to your container that will hold the image, since it has no contents. Also, you have two function() declarations in your mouseout function, I fixed it in the following code sample:
$('#hover-01').on('mouseenter', function(){
$('#hover-change').css('background-image', 'url(http://www.w3schools.com/css/trolltunga.jpg)');
});
$('#hover-01').on('mouseleave', function(){
$('#hover-change').css('background-image', 'url(https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4)');
});
#hover-change {
width:1000px;
height:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open-project-link">
<a id="hover-01" class="open-project"
href="project3.html">Bowman Clay</a>
</div>
<div class="responsive-section-image" id="hover-change">
<div class="overlay"></div>
</div>

Use this fiddle:
JS:
$('#hover-01').on('mouseenter', function(){
$('#hover-change').css('background-image', 'url("images/1.jpg")');
});
$('#hover-01').on('mouseout', function(){
$('#hover-change').css('background-image', 'url("images/5.jpg")');
});

You can use jQuery's toggleClass() method to solve your problem like this:
$(document).on('ready', function() {
$('#link').on('mouseover', function() {
//alert('sadasd');
$('body').toggleClass('colored');
});
$('#link').on('mouseleave', function() {
//alert('sadasd');
$('body').toggleClass('colored');
});
});
body.colored {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a id="link" href="#">This is a Link</a>
</div>
Hope this helps!

You can use the CSS :hover ~ to change the hover-change div when hover-01 is hovered over as follows:
#divToHover:hover ~ #divToChange {
/*your code here*/
}
#change {
height: 300px;
width: 300px;
background-image: url("//www.google.com/favicon.ico");
}
#hover {
height: 40px;
width: 40px;
background-color: green;
}
#hover:hover ~ #change {
background-image: url(/favicon.ico);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="hover">hover</div>
<div id="change"></div>

Try the following code. Make sure to set height and width for the div for which you want the background change.
Issue was with your event name used. Refer here for list of mouse events
$('#hover-01').on('mouseover', function() {
$('#hover-change').css('background-image', 'url("https://placehold.it/350x150/ffff00")');
}).on('mouseout', function() {
$('#hover-change').css('background-image', 'url("https://placehold.it/350x150/ff0000")');
});
.responsive-section-image {
height: 150px;
width: 350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="open-project-link">
<a id="hover-01" class="open-project" href="project3.html">Bowman Clay</a>
</div>
<div class="responsive-section-image" id="hover-change" style="background-image: url('https://placehold.it/350x150/ff0000')">
<div class="overlay"></div>
</div>

how to add a class to an element when i click a different element with jquery

I have an input that is supposed to add a class of clicked to another element with an id of #zip when clicked. Here is the code:
$('#billing_zip').click(function () {
$('#zip').addClass('clicked');
});
#zip {
color: #444;
font-style: italic;
position: absolute;
top: 8px;
left: 35px
}
.clicked {
display: none;
}
<div class="chkField">
<label for="billing_zip">Zip</label>
<input type="text" onchange="clearContent(this);check_address('billing');" class="txtBoxStyle hasPlaceholder" tabindex="10" size="10" value="" id="billing_zip" maxlength="15" name="billing_zip">
<!--START: req_billing_zip-->
<img width="12" height="12" alt="" src="assets/templates/common/images/error2.gif">
<!--END: req_billing_zip-->
<div class="clear"></div>
<div id="zip">zip</div>
</div>
I don't know why the above jQuery is not working.

You forgot to declare id for billing_zip.
$(document).ready(function(){
$('#billing_zip').click(function () {
alert('hi');
$('#zip').addClass('clicked');
});
});
#zip {
color: #444;
font-style: italic;
position: absolute;
top: 8px;
left: 35px
}
.clicked {
display: none;
}
<div class="chkField">
<label id="billing_zip" for="billing_zip">Zip</label>
<input type="text" onchange="clearContent(this);check_address('billing');" class="txtBoxStyle hasPlaceholder" tabindex="10" size="10" value="" id="billing_zip" maxlength="15" name="billing_zip">
<!--START: req_billing_zip-->
<img width="12" height="12" alt="" src="assets/templates/common/images/error2.gif">
<!--END: req_billing_zip-->
<div class="clear"></div>
<div id="zip">zip</div>
</div>

Check out the jsfiddle here. Use document.ready if required. One important point i found out is that, if the placeholder text on input box is lengthy, then it covers up entire input box area and doesn't allow to trigger click event. refer the jsfiddle.
$('#billing_zip').click(function () {
$('#zip').addClass('clicked');
});
$('#zip').click(function () {
$('#zip').addClass('clicked');
});

Your code is working OK
It could be 2 possible issues:
You are missing to add the jQuery reference:
You should wrap your code inside the document.ready event:
$(function(){
$('#billing_zip').click(function () {
$('#zip').addClass('clicked');
});
});

If this only what you want. Then you can do directly like:
$('#billing_zip').click(function () {
$('#zip').css("display","none"); // or you can use hide or fadeout property.
});

When I wrapped your jQuery code in a "$(document).ready" it worked:
$(document).ready(function(){
$('#billing_zip').click(function () {
$('#zip').addClass('clicked');
});
});

Image Radio Button Checked Display Issues

I am using image radio buttons which are working fine. However one of the radio buttons needs to be checked by default. However when this is set, it will not display the border around the checked image as it will when you click to select.
I have tried quite a few different things such has checked via html as well as javascript onload to no avail.
(Note there is only one radio button to select, this is because currently there is no 2nd option however there will be in the near future hence why we are pre checking it)
Any ideas?
<script type="text/javascript">
$(document).ready(function() {
$("a.radio-color-picture").click(function(){
var $id = $(this).attr('id');
$("a.radio-color-picture").removeClass('radio-color-border');
$("a#" + $id).addClass('radio-color-border');
});
});
function set_radio($inputid) {
$("input#" + $inputid).click();
}
</script>
<style type="text/css">
a.radio-color-picture {
border: 2px solid transparent;
display: inline-block;
height: 160px;
margin-right: 10px;
text-decoration: none;
width: 160px;
}
a.radio-color-picture:hover {
border:2px solid #d13a7a;
}
a.radio-color-border {
border:5px solid #d13a7a;
}
a#color {
background: url("<?php echo get_bloginfo('wpurl');?>/wp-content/themes/Impreza/_customimages/thumbnail.jpg") no-repeat scroll 0 0 white;
}
.hidden {
left: -10000px;
position: absolute;
top: -1000px;
}
</style>
<input type="radio" value="CHAR" name="color" id="color" class="hidden" checked="checked" />
<a id="color" href="javascript:set_radio('color');" class="radio-color-picture"> </a>
Cheers :)

This could actually be done much simpler :
Demo
Javascript :
$(document).ready(function(){
$('a.radio-color-picture').click(function(){
$(this).prev('input.hidden').click();
return false;
});
});
HTML (make sure you use unique ids !)
<input type="radio" value="CHAR" name="color" id="color" class="hidden" />
<a data-idinput="color" id="link" class="radio-color-picture"> </a>
<input type="radio" value="CHAR2" name="color" id="color2" class="hidden" checked="checked" />
<a data-idinput="color2" id="link2" class="radio-color-picture"> </a>
<input type="radio" value="CHAR3" name="color" id="color3" class="hidden" />
<a data-idinput="color3" id="link3" class="radio-color-picture"> </a>
And this is the main trick in CSS (only for IE >= 9) :
input.hidden:checked + a {
border:5px solid #d13a7a;
}
Edit : Demo for older versions of IE compatibility

to show the css to default checked you have to add the css 'class' or 'id' by default to the pre checked radio button and its respective href tag.