Develop Reference

css - Input radio button to target outter label when checked

I have the following code which I found on codepen and works and looks great!
.switch-field {
display: flex;
margin-bottom: 36px;
overflow: hidden;
}
.switch-field input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-field label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
line-height: 1;
text-align: center;
padding: 8px 16px;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked + label {
background-color: #a5dc86;
box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
}
<form class="form">
<div class="switch-field">
<input type="radio" id="radio-three" name="switch-two" value="yes" checked/>
<label for="radio-three">One</label>
<input type="radio" id="radio-four" name="switch-two" value="maybe" />
<label for="radio-four">Two</label>
<input type="radio" id="radio-five" name="switch-two" value="no" />
<label for="radio-five">Three</label>
</div>
</form>
But unfortunately my generated HTML is laid out as follows (with the input inside the label):
<form class="form">
<div class="switch-field">
<label for="radio-three">
<input type="radio" id="radio-three" name="switch-two" value="yes" checked/>
One</label>
<label for="radio-four">
<input type="radio" id="radio-four" name="switch-two" value="maybe" />
Two</label>
<label for="radio-five">
<input type="radio" id="radio-five" name="switch-two" value="no" />
Three</label>
</div>
</form>
I am wondering if its possible just with CSS to adapt this class to make it work or if JS is necessary.
.switch-field input:checked + label {
background-color: #a5dc86;
box-shadow: none;
}
Many thanks in advance!

The Only CSS Solution Possible
The pseudo-selector :focus-within. Should an element have any children element that has focus, that parent will have styles applied to it. So a radio button that the user checks will trigger a focus event and in doing so activate the CSS ruleset that has :focus-within which is the label in the following example.
.switch-field label:focus-within {
background-color: #a5dc86;
box-shadow: none;
}
<form class="form">
<div class="switch-field">
<label for="radio-three">
<input type="radio" id="radio-three" name="switch-two" value="yes" checked/>
One</label>
<label for="radio-four">
<input type="radio" id="radio-four" name="switch-two" value="maybe" />
Two</label>
<label for="radio-five">
<input type="radio" id="radio-five" name="switch-two" value="no" />
Three</label>
</div>
</form>

You should use JS.
When input element is inside the label then we do not need id on the element and 'for' attribute on the label, but when it is outside we need it.
<label>
Foo
<input name="foo" type="checkbox" />
</label>
Based on your HTML Code, To alter the styling of the label, would require a selector that affected the parent, which currently isn't possible.
Why? https://css-tricks.com/parent-selectors-in-css/
<input id="foo" name="foo" type="checkbox" />
<label for="foo">Foo</label>
So, to select the label of the :checked input, we need the label to be adjacent, not the parent.
But in your code, HTML's label and input is implicit connecting. So I think the solution is to use JS.
let form = document.querySelector("form");
form.addEventListener("change", (event) => {
let target = event.target;
let targetParent = target.parentElement;
if (
target.type === "radio" &&
targetParent &&
targetParent.tagName.toLowerCase() === "label"
) {
let prior = form.querySelector('label.checked input[name="' + target.name + '"]');
if (prior) {
prior.parentElement.classList.remove("checked");
}
targetParent.classList.add("checked");
}
}, false);
.switch-field {
display: flex;
margin-bottom: 36px;
overflow: hidden;
}
.switch-field input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-field label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
line-height: 1;
text-align: center;
padding: 8px 16px;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field label.checked {
background-color: #a5dc86;
box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
}
<form class="form">
<div class="switch-field">
<label class="checked">
<input type="radio" name="switch-two" value="yes" checked />
One
</label>
<label>
<input type="radio" name="switch-two" value="maybe" />
Two
</label>
<label>
<input type="radio" name="switch-two" value="no" />
Three
</label>
</div>
</form>

Here is example of how you can achieve desired functionality through javascript
var checkboxes = document.querySelectorAll("input[type=radio]");
var labels = document.querySelectorAll("label");
labels[0].classList.add("checkedLabel");
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('change', function(e) {
Array.from(labels).forEach(function(el) {
el.classList.remove('checkedLabel');
});
this.parentElement.classList.add("checkedLabel");
})
})
.checkedLabel {
background-color: #a5dc86;
box-shadow: none;
}
<form class="form">
<div class="switch-field">
<label for="radio-three">
<input type="radio" id="radio-three" name="switch-two" value="yes" checked/>
One</label>
<label for="radio-four">
<input type="radio" id="radio-four" name="switch-two" value="maybe" />
Two</label>
<label for="radio-five">
<input type="radio" id="radio-five" name="switch-two" value="no" />
Three</label>
</div>
</form>

Yes, replace .switch-field input with .switch-field label input.
A selector of the form x1 x2 x3 ... xn—1 xn (space separated) means xn which is a descendent of xn−1 and so on.

square radios highlight on checked

I am trying to build a radio survey question with 5 square radio buttons, but I am having trouble getting it to change color while the radio is checked or focused
I am also using Vue so it is recommended to put the input inside the label
https://codepen.io/phongoli0/pen/qBbXmoe?editors=1100
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios input[type="radio"]:focus+label {
border: 2px dashed green;
}
.squareRadios input[type="radio"]:checked+label {
background-color: blue;
border-color: #4c4;
}
<div class="squareRadios">
<label>
0
<input type="radio" value="0" /></label>
<label>
1
<input type="radio" value="1" /></label>
<label>
2
<input type="radio" value="2" /></label>
<label>
3
<input type="radio" value="3" /></label>
<label>
4
<input type="radio" value="4" /></label>
<label>
5
<input type="radio" value="5" /></label>
</div>

This is because you have the <input type="radio"> inside your <label>, not next to it and the :focus property has to be on the <label> not on the <input type="radio"> radio which is hidden.
The dashed green border on :focus disappears after clicking on the label because the input will hold the :focus after clicking on it.
Here a working live Codepen (case: input and label are siblings)
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios input[type="radio"]:checked + label {
background-color: blue;
border-color: #4c4;
}
.squareRadios label:focus {
border: 2px dashed green;
outline: none;
}
<div class="squareRadios">
<input id="radio0" type="radio" value="0" name="squareradios" />
<label tabindex="1" for="radio0">
0
</label>
<input id="radio1" type="radio" value="1" name="squareradios" />
<label tabindex="1" for="radio1">
1
</label>
<input id="radio2" type="radio" value="2" name="squareradios" />
<label tabindex="1" for="radio2">
2
</label>
<input id="radio3" type="radio" value="3" name="squareradios" />
<label tabindex="1" for="radio3">
3
</label>
<input id="radio4" type="radio" value="4" name="squareradios" />
<label tabindex="1" for="radio4">
4
</label>
<input id="radio5" type="radio" value="5" name="squareradios" />
<label tabindex="1" for="radio5">
5
</label>
</div>
EDIT
New Request:
I am also using Vue so it is recommended to put the input inside the label.
I would use JavaScript to handle this situation: toggle a class (I used a class called "checked") on the label to add the style.
var labels = document.querySelectorAll("label");
for (var i = 0; i < labels.length; i++) {
labels[i].addEventListener(
"click",
function (e) {
e.preventDefault();
e.stopPropagation();
if (this.classList.contains("checked")) {
this.classList.remove("checked");
this.firstElementChild.checked = false;
} else {
var checked = document.querySelector("label.checked");
if (checked) {
checked.classList.remove("checked");
checked.firstElementChild.checked = false;
}
this.classList.add("checked");
this.firstElementChild.checked = true;
}
},
false
);
}
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios label.checked {
background-color: blue;
border-color: #4c4;
}
.squareRadios label:focus {
border: 2px dashed green;
outline: none;
}
<div class="squareRadios">
<label tabindex="1">
0
<input name="squareradios" type="radio" value="0" />
</label>
<label tabindex="1">
1
<input name="squareradios" type="radio" value="1" />
</label>
<label tabindex="1">
2
<input name="squareradios" type="radio" value="2" />
</label>
<label tabindex="1">
3
<input name="squareradios" type="radio" value="3" />
</label>
<label tabindex="1">
4
<input name="squareradios" type="radio" value="4" />
</label>
<label tabindex="1">
5
<input name="squareradios" type="radio" value="5" />
</label>
</div>
Here a working live Codepen (case: input is inside label)

I know there are several answers already but this is exactly what you're looking for:
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
}
.squareRadios input[type="radio"]:checked + label {
background: red;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios input[type="radio"]:focus + label {
border: 2px dashed green;
}
.squareRadios input[type="radio"]:checked + label {
background-color: blue;
border-color: #4c4;
}
<div class="squareRadios">
<input type="radio" value="0" name="my_radios"/>
<label>0</label>
<input type="radio" value="1" name="my_radios"/>
<label>1</label>
<input type="radio" value="2" name="my_radios"/>
<label>2</label>
<input type="radio" value="3" name="my_radios"/>
<label>3</label>
<input type="radio" value="4" name="my_radios">
<label>4</label>
<input type="radio" value="5" name="my_radios"/>
<label>5</label>
</div>
Now here's what I've changed to make things work:
Like everybody else says, you'll need to put the input and label next to each other.
I changed the styling of the radio buttons. I made them absolute instead of fixed and gave them a 100% width and height so they are clickable and fill out the whole label.
I gave each radio button a name so they would be grouped to gether and actually work like radio buttons (only 1 button can be selected, not multiple)

First thing is that you are hiding the main circle of radio button, by setting opacity and width to 0, with this the radio button is not be able to checked.
Second thing *+ symbol: It is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first.
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
position: fixed;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios input[type="radio"]:focus + label {
border: 2px dashed green;
}
.squareRadios input[type="radio"]:checked + label {
background-color: blue;
border-color: #4c4;
}
<div class="squareRadios">
<input type="radio" value="5" />
<label>5</label>
</div>
So, remove the opacity and width properties with that your radio button can be checked and set label adjacent to input field.
*Source: CSS selector for a checked radio button's label

Labels should be next to its thing, not wrap around it.
Second thing is that you made your radios like this:
opacity: 0;
position: fixed;
width: 0;
If you set your opacity: 1; you see you where not really clicking on anything.
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
opacity: 1;
position: fixed;
width: 0;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios input[type="radio"]:focus+label {
border: 2px dashed green;
}
.squareRadios input[type="radio"]:checked+label {
background-color: blue;
border-color: #4c4;
}
<div class="squareRadios">
<input type="radio" value="0" />
<label>0</label>
<input type="radio" value="1" checked />
<label> 1</label>
<label>
2
<input type="radio" value="2" /></label>
<label>
3
<input type="radio" value="3" /></label>
<label>
4
<input type="radio" value="4" /></label>
<label>
5
<input type="radio" value="5" /></label>
</div>

CSS - li background color on checked radio

I am stuck with this code. I want to change the background color of the li when the respective radio button is selected. Please see attached fiddle for a demo.
Is it possible to do without editing the original html as this is produced by a core file that I don't really want to edit?
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>
Thanks in advance.

Since #kevin-lewis already mentioned, that there are no parent selectors in css, in order to have a pure css solution, we need to cheat a bit with styling the <label> tag, so that it fills the whole parent <li> element (using absolute positioning) and has the same margins and borders. The only fiddly bit that may not work reliably is the left padding of the styled <label> - it has to take into account the width of the radio button - hence the "magic" 2.6em.
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
position: relative;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
input:checked + label{
display: inline-block;
background-color: DodgerBlue;
height: 100%;
width: 100%;
z-index: -1;
padding: .5em 1em;
padding-left: 2.6em;
border: 1px transparent;
border-radius: 4px;
box-sizing: border-box;
margin: 0;
position: absolute;
top: 0;
left: 0;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1</label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2</label>
</li>
</ul>
</div>

I suppose you need to change the color of the parent li. In this case this is how I am doing it.
let imps = Array.from(
document.querySelectorAll(".wc-deposits-option [type='radio']")
);
imps.map((r) => {
r.addEventListener("change", () => action(r));
window.onload = (() => action(r));
});
function action(r){
// this function is called when the window loads & when a radio button is clicked
imps.map( R => {R.parentElement.style.background = "white";})
if (r.checked) {
r.parentElement.style.background = "gold";
}
}
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>
I hope this is what you need.
UPDATE
Yet an other JavaScript solution is to check the radio when you click the <li>parent. I think this is more UI friendly.
let lis = Array.from(
document.querySelectorAll(".wc-deposits-option li")
);
lis.map((li) => {
li.addEventListener("click", () => action(li));
window.onload = (() => action(li));
});
function action(li){
lis.map((_li) => {_li.style.background = "white"});
let thisRadio = li.querySelector("[type='radio']");
thisRadio.checked = true;
li.style.background = "gold"
}
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>

Use onclicks for each radio element
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" onclick = "toggleBackground(true)" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" onclick = "toggleBackground(false)" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>
Then use the following js code:
function toggleBackground(type) {
if(type) {
document.getElementById('wc-option-pay-deposit').style.background = 'color-1';
document.getElementById('wc-option-pay-full').style.background = 'color-2';
} else {
document.getElementById('wc-option-pay-deposit').style.background = 'color-2';
document.getElementById('wc-option-pay-full').style.background = 'color-1';
}
}

Add :checked for radio in css and background-color: #ff0000;
Test
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
input[type=radio]:checked + label {
background-color: #ff0000;
font-style: normal;
}
input[type=radio] + label {
color: #ccc;
font-style: italic;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1</label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2</label>
</li>
</ul>
</div>

Please review solution link below. I used javascript to fixed this problem.
I hope this answer will be helpful for you
https://codepen.io/dev_aman/pen/YOxjpR

Using vanilla JavaScript :
function toggleItem ( input )
{
input.closest( 'li' ).classList.toggle( 'wc-deposits-option-checked' );
}
function toggleOptions ()
{
let
list = document.querySelector( '.wc-deposits-option' ),
checked = list.querySelector( 'input:checked' );
toggleItem( checked );
list.addEventListener( 'input', () => {
let target = event.target;
toggleItem( target );
toggleItem( checked );
checked = target;
});
}
toggleOptions();
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
.wc-deposits-option-checked
{
background-color: #00F;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>

How to stylize radio buttons in Bootstrap?

I am not allowed to use jquery. Only JavaScript, CSS and Bootstrap.
How do I change the default look of the radio buttons?
Here is my code so far.
"test.html"
<div class="radio">
<label><input type="radio" name="optradio" id="radA" onclick="storeA()">
<p id="optionA"></p><br>
</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio" id="radB" onclick="storeB()">
<p id="optionB"></p><br>
</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio" id="radC" onclick="storeC()">
<p id="optionC"></p><br></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio" id="radD" onclick="storeD()">
<p id="optionD"></p><br></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio" id="radE" onclick="storeE()">
<p id="optionE"></p><br></label>
</div>

The main point to keep in mind:
Hide radios
Generate new radio buttons, which we can style via css via pseudo elements :after or before
Apply styles when checking the button with pseudo selector :checked
/* Using css var aka custom properies, don't use them if you don't use tools such as postCss */
:root {
--color-blue: #5897fc;
--color-blue-grayed: #e0ecff;
}
/* First hide radios */
.questions input[type="radio"] {
display: none;
}
/* Generate new radio buttons, which we can style via css */
.questions label:before {
content: attr(data-question-number);
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid;
text-align: center;
line-height: 30px;
margin-right: 20px;
}
/* Applying styles when checking the buttons */
.questions input[type="radio"]:checked ~ label {
background-color: var(--color-blue-grayed);
border-color: var(--color-blue);
}
.questions input[type="radio"]:checked ~ label:before {
background-color: var(--color-blue);
border-color: var(--color-blue);
color: white;
}
.questions label {
display: block;
cursor: pointer;
padding: 10px;
margin-bottom: 10px;
background-color: white;
border: 2px solid white;
border-radius: 15px;
}
.questions {
background-color: gray;
padding: 20px;
}
<div class="questions">
<div class="questions__question">
<input type="radio" name="answer" id="answer-1">
<label for="answer-1" data-question-number="1">Car</label>
</div>
<div class="questions__question">
<input type="radio" name="answer" id="answer-2">
<label for="answer-2" data-question-number="2">Kralj</label>
</div>
<div class="questions__question">
<input type="radio" name="answer" id="answer-3">
<label for="answer-3" data-question-number="3">Faca</label>
</div>
</div>

How to use jquery to move a div to the top of a element and the other two to the bottom

Hey I'm making this accordion and when you select an option in the top, one of the three other panels have to show. To accomplish this I would like to move the panel in the DOM to the top of the tree. The other two have to be moved to the bottom however. Right now it just switchs to one of the three but if I select a new one it doesn't update so I'm sure the dom is all mixed up.
HTML
<button class="accordion" id="special_accord">
<h2 class="float-left">2.</h2>
<h2 class="text-center">Model</h2></button>
<div class="panel" id="default_panel">
<label>
<h3 class="text-center">Please select a Device Type above</h3></label>
</div>
<div class="panel" id="laptop_panel">
<div id="col1">
<label class="control control--radio">LAPTOP
<input type="radio" name="radio-model" value="laptop1" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">LAPTOP2
<input type="radio" name="radio-model" value="laptop2" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">LAPTOP3
<input type="radio" name="radio-model" value="laptop3" />
<div class="control__indicator"></div>
</label>
</div>
</div>
<div class="panel" id="tablet_panel">
<div id="col1">
<label class="control control--radio">iPad 2
<input type="radio" name="radio-model" value="tablet-ipad2" onclick="calculateTotal()" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPad 3
<input type="radio" name="radio-model" value="tablet-ipad3" onclick="calculateTotal()" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPad 4
<input type="radio" name="radio-model" value="tablet-ipad4" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPad Air
<input type="radio" name="radio-model" value="tablet-ipadAir" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPad Mini
<input type="radio" name="radio-model" value="tablet-ipadMini" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPad Mini 2
<input type="radio" name="radio-model" value="tablet-ipadMini2" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">Nexus 7
<input type="radio" name="radio-model" value="tablet-nexus7" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">Amazon Fire
<input type="radio" name="radio-model" value="tablet-amazonFire" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">Amazon Kindle
<input type="radio" name="radio-model" value="tablet-amazonFire" />
<div class="control__indicator"></div>
</label>
</div>
</div>
<div class="panel" id="phone_panel">
<div id="col1">
<label class="control control--radio">iPhone 3 & 4
<input type="radio" name="radio-model" value="phone-iphone3" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPhone 5, 5c, 5s
<input type="radio" name="radio-model" value="phone-iphone5cs" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPhone 6
<input type="radio" name="radio-model" value="phone-iphone6" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPhone 6 Plus
<input type="radio" name="radio-model" value="phone-iphone6+" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">Microsoft Lumia 430
<input type="radio" name="radio-model" value="phone-lumia430" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">Galaxy S3
<input type="radio" name="radio-model" value="phone-galaxys3" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">Galaxy S4
<input type="radio" name="radio-model" value="phone-galaxys4" />
<div class="control__indicator"></div>
</label>
</div>
</div>
CSS
.icon-select {
margin-right: 20px;
margin-left: 20px;
}
#col1 {
float: left;
width: 33%;
height: 100%;
}
#col2 {
float: center;
height: 100%;
width: 33%;
overflow: hidden;
display: table-cell;
}
#col3 {
float: right;
height: 100%;
width: 34%;
margin-left: 20px;
overflow: hidden;
display: table-cell;
}
#price_tally {
float: right;
display: inline-block;
border: 1px solid #6fdd7a;
padding-top: 10px;
border-radius: 2px;
background-color: #6fdd7a;
}
#price_tally hr {
border: 1px solid #ffffff;
margin: 0px;
}
#money_tally {
text-align: center;
font-size: 3em;
padding: 0px;
margin: 0px;
color: #ffffff;
}
#price_tally button {
width: 100%;
height: 100%;
margin: 0px;
padding: 16px;
font-size: 26px;
background-color: #6fdd7a;
color: #ffffff;
border: none;
outline: none;
cursor: pointer;
}
#price_tally button:hover {
background-color: #65c76f;
}
button.accordion {
background-color: #ffffff;
color: #444;
cursor: pointer;
padding: 2px;
width: 50%;
text-align: left;
outline: none;
transition: 0.4s;
border-left: 1px solid #6fdd7a;
border-right: 1px solid #6fdd7a;
border-top: 1px solid #6fdd7a;
border-radius: 4px;
border-bottom: none;
}
button.accordion.active,
button.accordion:hover {
background-color: #6fdd7a;
color: #ffffff;
}
div.panel {
padding: 0px 18px;
background-color: #ffffff;
max-height: 0;
overflow: hidden;
width: 46%;
border-right: 1px dotted #6fdd7a;
border-left: 1px dotted #6fdd7a;
transition: max-height 0.2s ease-out;
}
#optional_panel {
border-bottom: 1px solid #6fdd7a;
}
label > input {
visibility: hidden;
position: absolute;
}
label > input + img {
cursor: pointer;
border: 2px solid transparent;
border-radius: 2px;
-webkit-transition: all 0.25s linear;
}
label > input:checked + img {
background-color: #6fdd7a;
}
.invisible {
display: none;
}
div.showing {
padding: 0px 18px;
background-color: #ffffff;
max-height: 600px;
overflow: hidden;
width: 46%;
max-height: 100%;
border-right: 1px dotted #6fdd7a;
border-left: 1px dotted #6fdd7a;
transition: max-height 0.2s ease-out;
}
.control {
font-size: 18px;
position: relative;
display: block;
margin-bottom: 15px;
padding-left: 30px;
cursor: pointer;
}
.control input {
position: absolute;
z-index: -1;
opacity: 0;
}
.control__indicator {
position: absolute;
top: 2px;
left: 0;
width: 20px;
height: 20px;
background: #e6e6e6;
}
.control--radio .control__indicator {
border-radius: 50%;
}
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
background: #444;
}
.control input:checked ~ .control__indicator {
background: #6fdd7a;
}
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
background: #6fdd7a;
}
.control__indicator:after {
position: absolute;
display: none;
content: '';
}
.control input:checked ~ .control__indicator:after {
display: block;
}
.control--checkbox .control__indicator:after {
top: 4px;
left: 8px;
width: 3px;
height: 8px;
transform: rotate(45deg);
border: solid #fff;
border-width: 0 2px 2px 0;
}
.control--checkbox input:disabled ~ .control__indicator:after {
border-color: #7b7b7b;
}
.control--radio .control__indicator:after {
top: 7px;
left: 7px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
.control--radio input:disabled ~ .control__indicator:after {
background: #7b7b7b;
}
JS
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
}
else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
};
}
var def = $("#special_accord");
var lap = $("#laptop_panel");
var tab = $("#tablet_panel");
var pho = $("#phone_panel");
$("#laptop_button").click(function () {
lap.before().insertAfter(def);
});
$("#tablet_button").click(function () {
tab.before().insertAfter(def);
});
$("#phone_button").click(function () {
pho.before().insertAfter(def);
});

This may not really answer your question. But is this close to your objective?
I am not too sure about your objective here.
$(".accordion").on("click", function(e){
$(".panel").hide();
console.log("selected: ", $(this).attr("data-model"));
var model = $(this).attr("data-model");
if (model) {
$( "#" + model + "_panel").show("slow");
}
else {
$("#default_panel").show("slow");
}
});
// hide all panels
$(".panel").hide();
https://jsfiddle.net/sudarpochong/ncynro4j/