Develop Reference

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.

How to display different elements by clicking in different buttons

I need to display texts by clicking in elements, every green "button" displays his text. by clicking in a button the button get a black border and his text is shown. when i click in the second button the first one have to loose the black border, and the second button get the border.
here is the simple html
<div id="container">
<div class="btn" id ="btn-1"></div>
<p class="text" id="text-1">
HI i'm numbr 1
</p>
<div class="btn" id ="btn-2"></div>
<p class="text" id="text-2">
HI i'm numbr 2
</p>
</div>
CSS
#container
{
height:400px;
width:400px;
position:relative;
}
.btn{
width : 50px;
height : 50px;
border-radius : 50px;
background-color : green;
margin:10px auto;
}
.text
{
position:absolute;
color:red;
font-size:24px;
font-weight:bold;
left:150px;
top:150px;
display:none;
}
.clicked{
border : 3px solid #000;
}
Jquery :
$('#btn-1').click(function(){
$('.text').hide();
$('#text-1').show();
$('#btn-1').toggleClass("clicked"); //<== toggleClass isn't the thing i guess
});
$('#btn-2').click(function(){
$('.text').hide();
$('#text-2').show();
$('#btn-2').toggleClass("clicked");
});
Here is a JSFFIDLE demo

I would simplify the javascript as you're repeating code (and that's not good)
// you can also use $('[data-showbutton]').click( ...
$('#btn-1,#btn-2').click(function(){
var btn = $(this).data("showbutton");
showButtonText(btn);
});
function showButtonText(btn) {
// reset
$('.text').hide();
$('[data-button]').hide();
$('[data-showbutton]').removeClass('clicked');
// only show the selected
$('[data-showbutton=' + btn + ']').addClass('clicked');
$('[data-button=' + btn + ']').show();
}
and simply add data- to your html, like:
<div id="container">
<div class="btn" id ="btn-1" data-showbutton="1"></div>
<p class="text" data-button="1">
HI i'm numbr 1
</p>
<div class="btn" id ="btn-2" data-showbutton="2"></div>
<p class="text" data-button="2">
HI i'm numbr 2
</p>
</div>
live example: http://jsfiddle.net/EgLKV/6484/
in other words, a data-showbutton will show all elements that have data-button and you can have much more elements for example, making it simpler and extendable.

You need to remove the class clicked from all buttons and add it to the specific one :
$('.btn').click(function(){
$('.btn').removeClass("clicked");
});
$('#btn-1').click(function(){
$('.text').hide();
$('#text-1').show();
$('#btn-1').toggleClass("clicked"); //<== toggleClass
});
$('#btn-2').click(function(){
$('.text').hide();
$('#text-2').show();
$('#btn-2').toggleClass("clicked");
});
#container
{
height:400px;
width:400px;
position:relative;
}
.btn{
width : 50px;
height : 50px;
border-radius : 50px;
background-color : green;
margin:10px auto;
}
.text
{
position:absolute;
color:red;
font-size:24px;
font-weight:bold;
left:150px;
top:150px;
display:none;
}
.clicked{
border : 3px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="btn" id ="btn-1"></div>
<p class="text" id="text-1">
HI i'm numbr 1
</p>
<div class="btn" id ="btn-2"></div>
<p class="text" id="text-2">
HI i'm numbr 2
</p>
</div>

$('.btn').click(function(){
//$('#text-2').show();
if('btn-1' ==$(this).attr('id')){
$('#btn-1').addClass('clicked');
$('#btn-2').removeClass('clicked');
$('#text-1').show();
$('#text-2').hide();
}else{
$('#btn-2').addClass('clicked');
$('#btn-1').removeClass('clicked');
$('#text-2').show();
$('#text-1').hide();
}
});
demo

$('#btn-1').click(function(){
$('.text').hide();
$('#text-1').show();
$('#btn-1').toggleClass("clicked"); //<== toggleClass
$('#btn-2').removeClass("clicked"); //<-- add this
});
$('#btn-2').click(function(){
$('.text').hide();
$('#text-2').show();
$('#btn-2').toggleClass("clicked");
$('#btn-1').removeClass("clicked"); //<-- add this
});
updated fiddle

$('#btn-1').click(function(){
$('.text').hide();
$('#text-1').show();
$('#btn-1').toggleClass("clicked", true); //<== toggleClass
$('#btn-2').toggleClass("clicked", false);
});
$('#btn-2').click(function(){
$('.text').hide();
$('#text-2').show();
$('#btn-1').toggleClass("clicked", false);
$('#btn-2').toggleClass("clicked", true);
});
Mabye it is a solution?

<button> change color when clicked in HTML?

How do I make a button change to another color when clicked and when clicked again it goes back to its original color? Can I do by using CSS or do I have to use Javascript?
Thanks in advance
This is the HTML code of my buttons.
<div class="H1toH5">
<button class="seatButton">H1</button>
<button class="seatButton">H2</button>
<button class="seatButton">H3</button>
<button class="seatButton">H4</button>
<button class="seatButton">H5</button>
</div>

Pure CSS
Change your button to another element (like span)
Use a label and checkbox to control the toggle status
Use :checked CSS selector and + sibling selector
.H1toH5 input { display: none; }
.H1toH5 .seatButton { padding: 5px; border: 1px solid #ccc; background: yellow; }
.H1toH5 input:checked + .seatButton { background: red; }
<div class="H1toH5">
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
</div>

How do I make a button change to another color when clicked and when clicked again it goes back to its original color? Can I do by using CSS
Try utilizing css :focus pseudo class , background-color
button {
background-color:yellow;
}
button:focus {
background-color:orange;
}
<div class="H1toH5">
<button class="seatButton">H1</button>
<button class="seatButton">H2</button>
<button class="seatButton">H3</button>
<button class="seatButton">H4</button>
<button class="seatButton">H5</button>
</div>
no just the one that is clicked, but i want to be able to click on
many buttons not just one
var elems = document.getElementsByClassName("seatButton");
for (var i = 0; i < elems.length; i++) {
elems[i].onclick = function() {
var color = window.getComputedStyle(this, null)
.getPropertyValue("background-color");
this.style.backgroundColor = color === "rgb(255, 255, 0)"
? "rgb(255, 165, 0)" : "rgb(255, 255, 0)";
};
};
button {
background-color:yellow;
}
<div class="H1toH5">
<button class="seatButton">H1</button>
<button class="seatButton">H2</button>
<button class="seatButton">H3</button>
<button class="seatButton">H4</button>
<button class="seatButton">H5</button>
</div>

You can do this with css a ::before pseudo element and the html checkbox input tag
input.toggle-btn {
visibility: hidden;
}
input.toggle-btn::before {
content: attr(value);
display: inline-block;
padding: 5px;
background: #fff;
font-size: 14pt;
color: #aaa;
border-radius: 5px;
border: 1px solid #aaa;
visibility: visible;
}
input.toggle-btn:checked::before {
background: rgb(50,150,250);
color: #eee;
border-color: #eee;
}
<input class="toggle-btn" type="checkbox" value="Hello">

This code will toggle a specific class when you click on it. If you click on the button again it will then return to it's original state.
$('.seatButton').click(function () {
$(this).toggleClass('activeClass');
});
Or just use the CSS Pseudo selected as people have specified above. There are many ways to achieve what you want!

No. You need to add/remove a class with javascript. To make #tpie feel better about himself, here is the code for that. Using jQuery:
$('.seatButton').on('click', function(){
$(this).toggleClass('is-active');
});

Priority field in html form

I need to create a priority field in my HTML form. Currently i am using radio buttons but it does not suffice my needs. The radio button should change background color onclick depending on the level of priority. Also i am not able to read the values to the controller.
The priority field should change colors according to the matrix above. In the form only the first row is present for the priority field.
This is the HTML i am using for priority
` <input type="radio" id="1" class="priority">
<input type="radio" id="2" class="priority">
<input type="radio" id="3" class="priority">
<input type="radio" id="4" class="priority">
<input type="radio" id="5" class="priority">`
I am using spring MVC framework.
Any help would be appreciated

UPDATE: updated FIDDLE
add value attribute to the radio buttons like
<input type="radio" name="1" id="r1" value="a rating">
then some script to read the radio button values like:
var htmlStr = $(this).attr("value");
$(".indicator").html(htmlStr);
I've tried some workaround for the sake of "changing color" in this Fiddle
Added this html, to act as the radio buttons that changes color:
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
with this css, to take it under the radio buttons:
.circ{
height: 12px;
width: 12px;
border-radius: 50%;
background: gray;
display: inline-block;
position: relative;
bottom: 20px;
margin-left: 5px;
margin-right: 4px;
}
Then add z-index: 9 to the radio button css rule to make it stay on top of the .circ divs and be clickable. Finally, add opacity: 0 to make it invisible, so the .circ divs under will appear on screen. Now you can change the color of the .circ divs accordingly using some script.
PS: You can't just edit radio button's background color, instead use background images

I am not sure if i understud your question correct, but if so this demo code (jsfiddle) might help.
(its just a demo, and would still have to be adapted for your needs)
It simply sets the color class on the Click event of every RadioButton.
CSS
.color1 {
background:red;
}
.color2 {
background:green;
}
.color3 {
background:yellow;
}
HTML
<div class="priority">
<input type="radio" name="1" id="1">
<input type="radio" name="1" id="2">
<input type="radio" name="1" id="3">
<input type="radio" name="1" id="4">
<input type="radio" name="1" id="5">
</div>
Script
$(function () {
$(".priority input").on("click", function () {
$(".priority").attr("class", "priority color" + this.id);
});
})
tested with Chrome 34+

As per your requirement you can use jQuery plugin Colourful rating system. It comes with good options so that you can set the color as required.
DEMO
example as follows:
the HTML
<ul id="rating">
<li>This is just a piece of crap</li>
<li>Nothing too new or interesting</li>
<li>Not bad, I like it</li>
<li>I would like to see more of this</li>
<li>This is the best thing I've seen</li>
</ul>
CSS
#rating { list-style:none; }
#rating li { display:inline; float:left; }
#rating li a { display:block; width:80px; height:80px; border:1px solid #888; background-color:#333;
text-indent:-9999px; box-shadow:0 0 5px #888; border-radius:40px; }
#ratinginfo { clear:left; width:350px; }
#ratinginfo p { text-align:center; padding:10px;
box-shadow:0 0 5px #888; border-radius:40px; }
After we're done loading jQuery and the Color plugin, we're ready to use jQuery to now animate the circles to the right colour and display the text.
// Variable to set the duration of the animation
var animationTime = 500;
// Variable to store the colours
var colours = ["bd2c33", "e49420", "ecdb00", "3bad54", "1b7db9"];
// Add rating information box after rating
var ratingInfobox = $("<div />")
.attr("id", "ratinginfo")
.insertAfter($("#rating"));
// Function to colorize the right ratings
var colourizeRatings = function(nrOfRatings) {
$("#rating li a").each(function() {
if($(this).parent().index() <= nrOfRatings) {
$(this).stop().animate({ backgroundColor : "#" + colours[nrOfRatings] } , animationTime);
}
});
};
// Handle the hover events
$("#rating li a").hover(function() {
// Empty the rating info box and fade in
ratingInfobox
.empty()
.stop()
.animate({ opacity : 1 }, animationTime);
// Add the text to the rating info box
$("<p />")
.html($(this).html())
.appendTo(ratingInfobox);
// Call the colourize function with the given index
colourizeRatings($(this).parent().index());
}, function() {
// Fade out the rating information box
ratingInfobox
.stop()
.animate({ opacity : 0 }, animationTime);
// Restore all the rating to their original colours
$("#rating li a").stop().animate({ backgroundColor : "#333" } , animationTime);
});
// Prevent the click event and show the rating
$("#rating li a").click(function(e) {
e.preventDefault();
alert("You voted on item number " + ($(this).parent().index() + 1));
});
for complete documentation and source code click HERE

Inputbox focus set style to containing div : Background

I have this page div#container which contains inputboxes, textareas and selectboxes. When I click them i want to change the background color of the containing div "djform_field"
#dj-classifieds .dj-additem .djform_row .djform_field:focus {
background: none repeat scroll 0 0 #F5F5F5;
border-radius: 5px;
float: left;
padding: 15px;
}
<div class="djform_field">
<textarea id="contact" name="contact" rows="1" cols="55" class="inputbox required"><?php echo $this->item->contact; ?></textarea>
<div id="input-tips"><span class="hint"><?php echo JTEXT::_('COM_DJCLASSIFIEDS_CONTACT_TOOLTIP')?><span class="hint-pointer"> </span></span></div>
</div>
<div style="clear:both"></div>
</div>

$('#contact').focus(function(){
$('.djform_field').addClass('red');
}).blur(function(){
$('.djform_field').removeClass('red');
})
See demo here (using jQuery)

Set one big click handler:
$("#container :text, #container select").click(function() {
$("div.djform_field)".css("background-color", "red"); //or whatever
});

$('.djform_field').children('*').click(function () { //use required selector in .children(), * means all children
$('.djform_field').css('background', 'color');
})