We Keep Coding

In React Is there a way to change the background color of a parent Label tag on a Radio Input checked?

I am using React Semantic UI. In css I am trying to change the Background color of a Parent label of an input, so when the radio button is clicked it changes colors. I am hiding the radio button with display none. Since the label gives it a nice button look. Here is my code. In html I just used a input tag and changed the span but it has to be done differently with the react semantic ui library. I was able to get it to work with input and span like in my html version but in this case the click functionality wouldn't work.
Here is a CodeSandbox with the React Semantic Ui Library loaded in its implements the first answer but does not work. https://codesandbox.io/s/kind-tereshkova-u9toz?fontsize=14
I Added the "Compiled" html
<Segment>
<Menu attached="top" borderless={true}>
<Menu.Item>
<Header>
Scale:
</Header>
<Label className="filter_check" size="large">
<Form.Field
label="Year"
control='input'
type='radio'
name='year'
/>
</Label>
</Menu.Item>
</Menu>
</Segment>
.filter_check input {
display: none;
}
input:checked + .filter_check>.label {
background: #00b5ad !important;
width: 100% !important;
}
.field input[type=radio]:checked + label {
background: red;
color: #fff;
margin-left: 1em;
padding: .3em .78571429em;
}
"complied" html
<div class="ui segment">
<div class="ui borderless top attached menu">
<div class="item">
<div class="ui header">Scale:</div>
<div class="ui large label filter_check">
<div class="field"><label><input name="year" type="radio"> Year</label></div>
</div>
</div>
</div>
</div>

After viewing the SandBox, I was able to see that the React code compiles to the following HTML:
<div class="ui large label filter_check">
<div class="field">
<label>
<input name="year" type="radio"> Year
</label>
</div>
</div>
Then I figured you want to modify the parent element upon clicking the input field. This is not trivial and required modifying the parent element, which I did using the onChange prop of the <Form.Field>:
<Label className="filter_check" size="large">
<Form.Field
label="Year"
control="input"
type="radio"
name="year"
onChange={checkInput}
/>
</Label>
With the following function, that adds the checked class to the modified element:
function checkInput(e) {
let labelElement = e.target.parentNode;
let bgElement = labelElement.parentNode.parentNode;
bgElement.classList.add('checked');
}
Then we update the CSS with the following:
div.ui.large.label.filter_check.checked {
background-color: red;
}
And - Voilà!

How do I change HTML Label Text Once File Has Been Selected using Javascript

Thanks for viewing my question. I have a form below that has a file input field. Safe to say I have hidden this input field, and am now using the label as the primary "button" to select the files. Once a user clicks on the "Upload Picture..." label, I want the text inside the label to change from "Upload Picture..." to the file name. I'm following this tutorial below however the javascript written (in the tutorial) is for multiple files being able to be selected by the user. I only am allowing my users to select ONE file. This is a change your profile picture page to give a little insight as to what this form does.
Here is the code:
<!-- Change Picture Form -->
<div class="changepic-wrap">
<form action="changepicauth.php" method="post">
<input type="file" name="profilepic" id="profilepic" class="inputfile">
<br>
<label for="profilepic">
<img src="/images/profile/upload.png" />
Upload Picture...
</label>
<br>
<div class="button-wrap">
<button>Change Picture</button>
</div>
</form>
</div>
Here is the tutorial:
http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
Can someone help explain to me what i have to do? I'm thinking something along the lines of an eventlistener but i'm not sure about javascript. I'm a backend dev and know very little about javascript. I do NOT WISH TO USE JQUERY. Straight javascript only.
Thanks again for your help StackOverflow members! :D
Edit:
Some people have said that the text is changing already. It's not... I want the LABEL text to change. The "File Input" tag has two parts to it. The button, and the text next to the button. I've hidden the input tag using the following SASS code. This way only the "Upload Picture..." label text is displayed. Please make sure to add this SASS code to your file so you can see that the LABEL text does not change.
.inputfile
width: 0.1px
height: 0.1px
opacity: 0
overflow: hidden
position: absolute
z-index: -1

You can use the javascript onchange event to detect when the value of the #profilepic input changes.
When it does, you can capture the new value of the #profilepic input and replace the text of the label with that value.
Example:
var profilePic = document.getElementById('profilepic'); /* finds the input */
function changeLabelText() {
var profilePicValue = profilePic.value; /* gets the filepath and filename from the input */
var fileNameStart = profilePicValue.lastIndexOf('\\'); /* finds the end of the filepath */
profilePicValue = profilePicValue.substr(fileNameStart + 1); /* isolates the filename */
var profilePicLabelText = document.querySelector('label[for="profilepic"]').childNodes[2]; /* finds the label text */
if (profilePicValue !== '') {
profilePicLabelText.textContent = profilePicValue; /* changes the label text */
}
}
profilePic.addEventListener('change',changeLabelText,false); /* runs the function whenever the filename in the input is changed */
<div class="changepic-wrap">
<form action="changepicauth.php" method="post">
<input type="file" name="profilepic" id="profilepic" class="inputfile">
<br>
<label for="profilepic">
<img src="/images/profile/upload.png" />
Upload Picture...
</label>
<br>
<div class="button-wrap">
<button>Change Picture</button>
</div>
</form>
</div>

You can use change event, select element having for attribute value equal to event.target: #profilepic element id, set the .innerHTML of selected element to event.target.files[0] .name
document.getElementById("profilepic")
.addEventListener("change", function(e) {
document.querySelector("[for=" + e.target.id + "]")
.innerHTML = e.target.files[0].name;
})
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
<!-- Change Picture Form -->
<div class="changepic-wrap">
<form action="changepicauth.php" method="post">
<input type="file" name="profilepic" id="profilepic" class="inputfile">
<br>
<label for="profilepic">
<img src="/images/profile/upload.png" />Upload Picture...
</label>
<br>
<div class="button-wrap">
<button>Change Picture</button>
</div>
</form>
</div>

image pop up on a steady position

What is the right syntax to make my pop up image show on the left side of the screen?
jQuery
$("#qm3").mouseover(function(){
$("#osf").show();
});
$("#qm3").mouseout(function(){
$("#osf").hide();
});
HTML
<span><input type="text" id="tb1"><img id="qm3" src="images/WebResource.png"></img></span><span><img id="osf" src="images/osf.jpg" style="position: right; display:none;"></img></span>
As of now, whenever I'm pointing my mouse to qm3, the pop up shows, but it affects the positioning of my page.
http://codepen.io/anon/pen/vENZeK

This could be simplified, if you get rid of the spans and wrap a div around it:
http://codepen.io/anon/pen/OPygOg
js
$(".show").hover(function(){
$(this).next('img.hide').fadeToggle();
});
html
<div>
<input type="text" id="tb1">
<img class='show' src="http://placekitten.com/42/41"/>
<img class="hide" src="http://placekitten.com/40/41"/>
</div>
css
div { postition:relative; padding-left:45px;}
.hide { display:none; position:absolute; left:5px; }

Change image selected when radio button is selected

What is the simplest way to change the image selected (class=selected) when a form element is selected? I've tried several different methods (unsuccessfully) but my Javascript is a bit rusty so I could use some help.
I am displaying an image next to each set of radio buttons which depicts the value when hovered or selected. In addition, I've pre-selected a default value to be displayed initially (usually the most popular answer). The css ensures that the relevant images are displayed in a fixed position, and the z-index and opacity change in order to display the correct image. The only problem is that when the user clicks on a radio button it on, the value is correctly set to selected but the corresponding image is not being selected.
I have included the relevant snippets below and posted a fiddle with the full css here.
<style type="text/css">
.new li img {
opacity: 0;}
.new li.selected img {
z-index: 2;
opacity: 1;}
.new:hover li.selected img {
z-index: 0;}
.new li:hover img {
z-index: 2;
opacity: 1;}
</style>
<div class="new alternate_image">
<ul>
<li>
<img src="sports.png" />
<label><input type="radio" name="item1" value="Sports"/>Sports</label>
</li>
<li>
<img src="fashion.png" />
<label><input type="radio" name="item1" value="Fashion"/>Fashion</label>
</li>
<li class="selected">
<img src="city.png" />
<label><input type="radio" name="item1" value="City"/>City</label>
</li>
</ul>
</div>

The following will do the job. Though since it will affect all radio buttons, you may want to tweak the first selector (e.g. '.alternate_image input[type=radio]').
$('input[type=radio]').change(function() {
var name = this.name;
var self = this;
$('input[name=' + name + ']').each(function() {
$(this).closest('li').toggleClass('selected', this === self);
});
});
http://jsfiddle.net/nonplus/qF3P9/1/

Creating Smooth Hide/Reveal animations without Javascript

I'm relatively new to web programming (i.e. less than a month).
What I am trying to do is create a nice smooth hide/reveal effect for an FAQ list, as can be seen on this webisite:
http://www.hl.co.uk/pensions/sipp/frequently-asked-questions
I realise that this website is using javascript to create the effect, but I was wondering if there was anyway to do this with just CSS.
The HTML5 < details > < summary > tags seem to work fine in terms of structure (despite only working in chrome and safari):
<details>
<summary>About Us</summary>
<p>Some information about us</p>
</details>
The only problem is that the transitions are very harsh, and yet I can't seem to use CSS transitions as I want the animation on a click, rather than hover etc (plus the properties don't change so there is nothing to transition between).
Is there anyway of doing this, or does it just require getting to grips with Javascript? Obviously that is the next step anyway, I was just hoping there was a way to do this in CSS so that I could get this working asap.
Thanks in advance.

If you get creative, this can actually be done with pure CSS.
(PS - I only put a <form> wrapper to allow the radio buttons to be reset without affecting the multiple-choice checkbox buttons)
Here is a nice example for you
CSS
span, p {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
input[type="reset"] {
display: block;
border: 1px solid pink;
background: maroon;
color: white;
padding: 5px;
margin: 5px;
font-family: sans;
}
p {
float: left;
clear: left;
overflow: hidden;
display: table-row;
}
label {
width: 100%;
font-size: 200%;
font-weight: bold;
}
input[type="checkbox"], input[type="radio"] {
border: none;
background: transparent;
display: none;
}
input[type="checkbox"] ~ span, input[type="radio"] ~ span {
display: block;
float: left;
clear: left;
}
input[type="checkbox"]:not(:checked) ~ span, input[type="radio"]:not(:checked) ~ span {
opacity: 0;
height: 0;
}
input[type="checkbox"]:checked ~ span, input[type="radio"]:checked ~ span {
opacity: 1;
height: auto;
}
HTML
<h1>Singles</h1>
<form id="singles" onsubmit="return false;">
<p class="option">
<input type="radio" id="one" name="hard" />
<label for="one">OneOneOneOne</label>
<span><input type="reset" form="singles" value="Hide" />
If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
</p>
<p class="option">
<input type="radio" id="two" name="hard" />
<label for="two">TwoTwoTwoTwo</label>
<span><input type="reset" form="singles" value="Hide" />
Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
</p>
<p class="option">
<input type="radio" id="three" name="hard" />
<label for="three">ThreeThreeThreeThree</label>
<span><input type="reset" form="singles" value="Hide" />If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
</p>
<p class="option">
<input type="radio" id="four" name="hard" />
<label for="four">FourFourFourFour</label>
<span><input type="reset" form="singles" value="Hide" />
Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
</p>
</form>
<h1>Multiples</h1>
<form id="multiples" onsubmit="return false;">
<p class="option">
<input type="checkbox" id="one2" name="easy" />
<label for="one2">OneOneOneOne</label>
<span>If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
</p>
<p class="option">
<input type="checkbox" id="two2" name="easy" />
<label for="two2">TwoTwoTwoTwo</label>
<span>Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
</p>
<p class="option">
<input type="checkbox" id="three2" name="easy" />
<label for="three2">ThreeThreeThreeThree</label>
<span>If you want them to only see one item at a time, use a radio button. If you want them to see multiple, use a checkbox. Your transition property will be checked</span>
</p>
<p class="option">
<input type="checkbox" id="four2" name="easy" />
<label for="four2">FourFourFourFour</label>
<span>Who knows how many licks it takes to get to the center if a woodchuck could chuck wood by the sea shore with Sally?</span>
</p>
</form>

Make two classes. Each with different transitions.
Use toggleClass to change your html element to the class with the transition you want.
jQuery toggleClass
It still uses javascript, but it's just a simple class switch so your animations will be smoother.

If you only have a small number of items, Deryck's answer suits you best.
However, if it's a large amount, Javascript/jQuery is your best bet.
How it's done:
jQuery:
$('.detail').slideUp(); //hides all the details
$('.item').on('click', function({
$('.detail').slideUp(); //hides any shown details
$(this).next().toggleSlide(); //shows the details of the item selected
});
HTML:
<div class="item">Item 1</div>
<div class="detail">Details about Item 1</div>
<div class="item">Item 2</div>
<div class="detail">Details about Item 2</div>
<div class="item">Item 3</div>
<div class="detail">Details about Item 3</div>
...
.item indicates an item, e.g. FAQ question, and .details indicates the expansion of that item, e.g. the answer to a FAQ question.
Alternatively, you can nest the .details inside of their respective .items.

To add to the jQuery answers...
Wrap what you have in a div with an id of say "FAQ". Wrap the answer in another div so you have something like
<div id="FAQ">
<section>
<summary>Question 1</summary>
<div>
<p>Some Stuff 1</p><p>Some Stuff 2</p>
</div>
</section>
<!-- Repeat as required -->
</div>
Add the following css to hide the answers and make section a block element
#FAQ section>div
{
display:none;
}
#FAQ section
{
display:block;
}
Include the jquery library and then include the following in a script tag
$(document).ready(){
$("#FAQ summary").click(function(){
$(this).next("div").slideToggle('slow');
});
};
See it in action here: http://jsfiddle.net/qu6ef/
This will is a little different from some of the other solutions in that the answer will only be hidden if the question is clicked again. Why stop users from seeing more than one answer at a time? The nice thing about this solution is it is achieved with 5 lines of javascript once you include jQuery
Take some time to look up what I've used with jQuery:
Document Ready
Click Event Listener/Handler
Next - Selects a sibling
Sliding Animation