We Keep Coding

How to style the parent DIV of a radio button to look like a card?

When I select a radio button I want the wrapper parent div to style to border: 1px solid #color to look like a card. They way I did it with JavaScript works, but the code doesn't seem clean, ig?
There has to be a better way to do this, since I have seen this type of card-design in many websites before. How would you guys do select the parent div of the particular button the user clicks? Would you use JavaScript?
const form = document.querySelector("form")
const parentDivs = document.querySelectorAll(".parentDiv")
form.addEventListener("change", e => {
parentDivs.forEach(parent => {
if(parent.getAttribute("aria-parent") == e.target.id) {
parent.classList.add("selected")
}else {
parent.classList.remove("selected")
}
})
})
.parentDiv {
display: flex;
align-items: center;
cursor: pointer;
border: 1px solid #eee;
margin-bottom: 2rem;
}
.selected {
border: 1px solid green;
}
<h1>Select any of the button</h1>
<form>
<label for="radio1">
<div class="parentDiv" aria-parent="radio1">
<input type="radio" name="radios" id="radio1">
<div>
<h2>Desk Stand 1</h2>
<p>Some Dummy Text</p>
</div>
</div>
</label>
<label for="radio2">
<div class="parentDiv" aria-parent="radio2">
<input type="radio" name="radios" id="radio2">
<div>
<h2>Desk Stand 2</h2>
<p>Some Dummy Text</p>
</div>
</div>
</label>
<label for="radio3">
<div class="parentDiv" aria-parent="radio3">
<input type="radio" name="radios" id="radio3">
<div>
<h2>Desk Stand 3</h2>
<p>Some Dummy Text</p>
</div>
</div>
</label>
</form>

I think that this would help you:
Codepen preview
HTML
<form class='form'>
<label for="radio1">
<div class="parentDiv" aria-parent="radio1">
<input type="radio" name="radios" id="radio1">
<div class ='flex'>
<h2>Desk Stand 1</h2>
<p>Some Dummy Text</p>
</div>
</div>
</label>
<label for="radio2">
<div class="parentDiv" aria-parent="radio2">
<input type="radio" name="radios" id="radio2">
<div>
<h2>Desk Stand 2</h2>
<p>Some Dummy Text</p>
</div>
</div>
</label>
<label for="radio3">
<div class="parentDiv" aria-parent="radio3">
<input type="radio" name="radios" id="radio3">
<div>
<h2>Desk Stand 3</h2>
<p>Some Dummy Text</p>
</div>
</div>
</label>
</form>
CSS
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap');
body{
font-family: 'Poppins', sans-serif;
}
.form {
display: flex;
flex-wrap: wrap;
gap: 3rem;
}
#selected {
border: 2px solid green;
background: rgba(66, 245, 117, 0.2);
transition: all .3s ease-in-out;
}
.parentDiv {
display: flex;
align-items: center;
padding: 1rem 2rem;
border: 2px solid #ccc;
border-radius: 3px;
cursor: pointer;
}
input[type="radio"] {
display: none;
}
JavaScript
const form = document.querySelector("form")
const parentDivs = document.querySelectorAll(".parentDiv")
form.addEventListener("change", e => {
parentDivs.forEach(parent => {
if(parent.getAttribute("aria-parent") == e.target.id) {
parent.setAttribute('id','selected')
}else { parent.removeAttribute('id','selected')
}
})
})
Note:- Please change the styles to give it a more fresh look.

Is it possible to display a tooltip only when hovered over a checked radio button using jQuery

I want to display the tooltip only when I hover over a checked radio button.
When hovered on the radio button I'm trying to check
$(this).is(':checked') == true
But the tooltip is displayed only when hovered on "Yes". What am I doing wrong here?.
Any suggestions are highly appreciated. Thanks in advance. :)
$("input[name^='radioBtn']").hover(function () {
if(($(this).is(':checked')) == true){
var text= "Hello";
$(".displayContents").append(text);
}
});
.radioHover:hover ~ .displayContents{
visibility: visible;
}
.displayContents{
visibility: hidden;
background-color: white;
border: 2px solid black;
position: absolute;
z-index: 1;
border-radius: 6px;
padding: 5px 0;
width: 350px;
/* border-spacing: 35px; */
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div>
<div>
<input type="radio" name="radioBtn radioHover" value="true" id="radioYes" class="radioBtn radioHover"/><br />
<div class="displayContents"></div>
<span>Yes</span>
</div>
<div>
<input type="radio" name="radioBtn radioHover" value="true" id="radioNo" class="radioBtn"/><br />
<div class="displayContents"></div>
<span>No</span>
</div>
</div>

It is not necessary to use jQuery to achieve your desired goal. It is enough to aim the :hover pseudo-class at the :checked pseudo-class, in the css. Like this:
.radioHover:checked:hover ~ .displayContents {
visibility: visible;
}
For unique content of each radio button, use id #radioYes and #radioNo with operator ~.
$("#radioYes ~ .displayContents").text("Hello Yes");
$("#radioNo ~ .displayContents").text("Hello No");
.radioHover:checked:hover ~ .displayContents {
visibility: visible;
}
.displayContents {
visibility: hidden;
background-color: white;
border: 2px solid black;
position: absolute;
z-index: 1;
border-radius: 6px;
padding: 5px 0;
width: 350px;
/* border-spacing: 35px; */
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div>
<div>
<input type="radio" name="radioBtn" value="true" id="radioYes" class="radioBtn radioHover" /><br />
<div class="displayContents"></div>
<span>Yes</span>
</div>
<div>
<input type="radio" name="radioBtn" value="true" id="radioNo" class="radioBtn radioHover" /><br />
<div class="displayContents"></div>
<span>No</span>
</div>
</div>

First of all, you put radioHover into name attribute.
Anyway, you should set radioHover class on the checked button only, like so:
$("input[name='radioBtn']").hover(function () {
this.classList.toggle("radioHover", this.checked);
if($(this).is(':checked') == true){
var text= "Hello";
$(".displayContents").append(text);
}
});
.radioHover:hover ~ .displayContents{
visibility: visible;
}
.displayContents{
visibility: hidden;
background-color: white;
border: 2px solid black;
position: absolute;
z-index: 1;
border-radius: 6px;
padding: 5px 0;
width: 350px;
/* border-spacing: 35px; */
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div>
<div>
<input type="radio" name="radioBtn" value="true" id="radioYes" class="radioBtn"/><br />
<div class="displayContents"></div>
<span>Yes</span>
</div>
<div>
<input type="radio" name="radioBtn" value="false" id="radioNo" class="radioBtn"/><br />
<div class="displayContents"></div>
<span>No</span>
</div>
</div>

You had some typos and some misunderstandings. The radioHover class was in the name field, was missing in the class for the 'no' radio. Additionally, you have 2 different . displayContents elements. The way to target the one associated with the radio is via the .closest(selector).find(selector) combo. I didn't think you wanted to actually append the same HTML continuously, so I changed that to .html().
Finally, I added the 'change' event in the mix - that way you'll get your value on hover and on click (if checked). Reason being, you are hovering over the element when you click it. Yet the hover didn't update when the state went from not-checked to checked. Now it does
$("input[name='radioBtn']").on('hover, change', function() {
if ($(this).is(':checked')) {
$(this).closest('div').find(".displayContents").html('Hello from ' + $(this).val());
}
});
.radioHover:checked:hover~.displayContents {
visibility: visible;
}
.displayContents {
visibility: hidden;
background-color: white;
border: 2px solid black;
position: absolute;
z-index: 1;
border-radius: 6px;
padding: 5px 0;
width: 350px;
/* border-spacing: 35px; */
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div>
<div>
<input type="radio" name="radioBtn" value="yes" id="radioYes" class="radioBtn radioHover" /><br />
<div class="displayContents"></div>
<span>Yes</span>
</div>
<div>
<input type="radio" name="radioBtn" value="no" id="radioNo" class="radioBtn radioHover" /><br />
<div class="displayContents"></div>
<span>No</span>
</div>
</div>

Dropdown with Radio button and jQuery

I coded a dropdown menu with radio button to change currency in my website. I use jQuery to open/close this dropdown but the currency change doesn't work.
The expanded class is used to open/close the dropdown menu.
I think that the error comes from the line $('#' + $(e.target).attr('for')).prop('checked', true); but I don't know how to modify this. I want it to check the right input.
$('.maincar__currency').click(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).toggleClass('expanded');
$('#' + $(e.target).attr('for')).prop('checked', true);
});
$(document).click(function() {
$('.maincar__currency').removeClass('expanded');
});
.maincar__currency {
display: flex;
flex-direction: column;
min-height: 32px;
max-height: 32px;
margin-left: auto;
margin-bottom: 10px;
overflow: hidden;
border-radius: 6px;
box-sizing: border-box;
box-shadow: $shadowBox;
font-size: 14px;
font-weight: 500;
}
.maincar__currency label {
display: flex;
width: 80px;
height: 32px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 8px;
margin-right: 0 auto;
background-color: #fff;
text-align: center;
color: $mediumMainGrey;
cursor: pointer;
//box-sizing: border-box;
}
.maincar__currency label:hover {
background-color: $extraLightGrey;
}
.currency {
display: flex;
width: 100%;
}
.currency input {
display: none;
}
.currency img {
//object-fit: contain;
height: 20px;
width: auto;
margin-right: 6px;
}
.currency span {
display: flex;
//align-items: center;
color: $mediumMainGrey;
text-decoration: none;
}
.expanded {
max-height: 128px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="maincar__currency">
<label for="euro-radio-is">
<div class="currency currency__euro">
<img src="/assets/images/icons/euro.png" alt="Euro sign">
<input type="radio" name="currency-is" value="euro" id="euro-radio-is" class="euro_radio_is" checked="true">
<span class="default">EUR</span>
</div>
</label>
<label for="dollar-radio-is">
<div class="currency currency__dollar">
<img src="/assets/images/icons/dollar.png" alt="Dollar sign">
<input type="radio" name="currency-is" id="dollar-radio-is" class="dollar_radio_is" value="dollar">
<span>USD</span>
</div>
</label>
<label for="gbp-radio-is">
<div class="currency currency__pound">
<img src="/assets/images/icons/pound-sterling.png" alt="Pound sign">
<input type="radio" name="currency-is" id="gbp-radio-is" class="gbp_radio_is" value="gbp">
<span>GBP</span>
</div>
</label>
<label for="chf-radio-is">
<div class="currency currency__chf">
<img src="/assets/images/icons/swiss-franc.png" alt="Swiss franc sign">
<input type="radio" name="currency-is" id="chf-radio-is" class="chf_radio_is" value="chf">
<span>CHF</span>
</div>
</label>
</div>

Try to use below code:-
$(document).ready(function(){
$("input[type='radio']").click(function(){
var radioValue = $("input[name='currency-is']:checked").val();
if(radioValue){
alert("Your are a - " + radioValue);
}
});
});
You'll get the radio button value. Let me know if this helps you...

CSS (add these extra classes):
.maincar__currency label{
display: none;
}
.expanded label{
display: block;
}
JS & Html:
$('.maincar__currency').click(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).toggleClass('expanded');
});
$(".maincar__currency label").click(function(){
$('#' + $(this).attr('for')).prop('checked', true);
var selected = $('input[name=currency-is]:checked').val(); // <-- add this line
$('.active_currency').text(selected.toUpperCase()); // <-- and this line
alert(selected);
});
$(document).click(function() {
$('.maincar__currency').removeClass('expanded');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="maincar__currency">
<div class="active_currency">EUR</div>
<label for="euro-radio-is">
<div class="currency currency__euro">
<img src="/assets/images/icons/euro.png" alt="Euro sign">
<input type="radio" name="currency-is" value="euro" id="euro-radio-is" class="euro_radio_is" checked="true" />
<span class="default">EUR</span>
</div>
</label>
<label for="dollar-radio-is">
<div class="currency currency__dollar">
<img src="/assets/images/icons/dollar.png" alt="Dollar sign">
<input type="radio" name="currency-is" id="dollar-radio-is" class="dollar_radio_is" value="dollar" />
<span>USD</span>
</div>
</label>
<label for="gbp-radio-is">
<div class="currency currency__pound">
<img src="/assets/images/icons/pound-sterling.png" alt="Pound sign">
<input type="radio" name="currency-is" id="gbp-radio-is" class="gbp_radio_is" value="gbp" />
<span>GBP</span>
</div>
</label>
<label for="chf-radio-is">
<div class="currency currency__chf">
<img src="/assets/images/icons/swiss-franc.png" alt="Swiss franc sign">
<input type="radio" name="currency-is" id="chf-radio-is" class="chf_radio_is" value="chf" />
<span>CHF</span>
</div>
</label>
</div>

CSS styling my page, sorry guys im a noob

I have my website code below, however my problem is not with its functionality rather its with its appearance
var name;
var nameFormat = true;
var totalRight=0;
var welcomeName
$("#welcome2").hide();
$("#welcome2-0").hide();
$('form').hide();
$("#MYsubmit").hide();
var score;
function submission() {
var name = document.getElementById("textbox").value;
if (name.length > 0) {
alert("Welcome " + name);
$("#name").fadeOut(1000);
$("#welcome").fadeOut(1000);
$("#welcome2").show();
$("#welcome2-0").show();
$('MYsubmit').show();
$('form').show();
welcomeName=document.getElementById("welcome3-1").innerHTML +="Welcome "+name+"!"+"Good Luck!";
} else {
nameFormat == false;
alert("Please enter the name again");
}
}
var welcomeName=document.getElementById("Question1").innerHTML +="1. How long does it take the average person to fall asleep?";
var welcomeName=document.getElementById("Question2").innerHTML +="2.How many eggs does the average american eat per year?";
var welcomeName=document.getElementById("Question3").innerHTML +="3.How many taste buds does the average american have?";
var welcomeName=document.getElementById("Question4").innerHTML +="4.What is the average lifespan of a squirrel?";
var welcomeName=document.getElementById("Question5").innerHTML +="5.on average __% of all restaurant meals include potato chips";
function finalsubmit() {
if(document.getElementById('correctAnswer-1').checked) {
totalRight=totalRight+1;
}
if(document.getElementById('correctAnswer-2').checked) {
totalRight=totalRight+1;
}
if(document.getElementById('correctAnswer-3').checked) {
totalRight=totalRight+1;
}
if(document.getElementById('correctAnswer-4').checked) {
totalRight=totalRight+1;
}
if(document.getElementById('correctAnswer-5').checked) {
totalRight=totalRight+1;
}
document.getElementById("score").innerHTML +="RESULT for "+name+"You Scored "+totalRight+" out of 5!"+"<br>";
score=document.getElementById("ans").innerHTML +="You scored "+totalRight+" out of 5";
if(totalRight==5){
document.getElementById("score").innerHTML +="You score 5/5 PERFECT!";
}
}
/*
$(document).ready(function(){
$("#hint1").mouseover(function(){
$("#hint1").
});
$("#hint1").mouseout(function(){
$("#hint1").
});
});
*/
$(document).ready(function(){
$('#hint1').hover(function() {
$(this).text("7Minutes");
},
function() {
$(this).text("[HINT]");
});
});
$(document).ready(function(){
$('#hint2').hover(function() {
$(this).text("263Eggs");
},
function() {
$(this).text("[HINT]");
});
});
$(document).ready(function(){
$('#hint3').hover(function() {
$(this).text("10,000");
},
function() {
$(this).text("[HINT]");
});
});
$(document).ready(function(){
$('#hint4').hover(function() {
$(this).text("7Years");
},
function() {
$(this).text("[HINT]");
});
});
$(document).ready(function(){
$('#hint5').hover(function() {
$(this).text("7%");
},
function() {
$(this).text("[HINT]");
});
});
#welcome{
top:30px;
left: 30px;
color: antiquewhite;
border: 2px solid darkblue;
background: darkblue;
padding: 25px;
}
#name{
top:30px;
left: 500px;
color: antiquewhite;
background: darkblue;
border: 25px solid darkblue;
}
body {
background-color: lightblue;
color: white;
}
#welcome2{
text-align: center;
color: antiquewhite;
background: darkblue;
border: 25px solid darkblue;
}
#welcome3-1{
top:30px;
left: 500px;
color: Aqua;
background:darkblue;
border: 25px solid darkblue;
}
#welcome2-0{
text-align: center;
color: antiquewhite;
background: darkblue;
border: 25px solid darkblue;
}
.Question{
text-align: left;
color: antiquewhite;
background: darkblue;
border: 25px solid darkblue;
}
.hints{
color: aquamarine;
background: darkblue;
border: 25px solid darkblue;
}
.quiz{
background: darkblue;
}
#ans{
text-align: left;
border: 25px solid darkblue;
background: darkblue;
color:red;
}
#score{
background-color: yellow;
color:red;
background-size: 100px 100px;
}
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Welcome!</title>
<link rel="stylesheet" href="includes/styles.css" type="text/css" media="screen" />
</head>
<p>
<body>
<div id="welcome"><b>Welcome to the Myanmar Trivia Quiz</b><br> please enter your name and click on "Begin Quiz" to start</div>
<div id="name"><b>Name:</b>
<input type="text" id="textbox">
<button id=”myButton” type="button" onclick="submission()">submit</button>
</div>
<h1 id="welcome2">Myanmar Trivia Quiz </h1>
<div id="welcome2-0">Test your Demographic Knowledge<br>---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
<div id="welcome3-1"><b></b></div>
<div id="ans"><h3></h3></div>
<form class="quiz">
<div id="Question1" class="Question"><b></b></div>
<input type="radio" name="radiobutton" value="7Minutes" id="correctAnswer-1" class="Answer"> 7 Minutes<br>
<input type="radio" name="radiobutton" value="5Minutes" >5 Minutes<br>
<input type="radio" name="radiobutton" value="20Minutes" >20 Minutes <br>
<input type="radio"name="radiobutton" value="14Minutes" >14 Minutes <br>
<div id="hint1" class="hints">[HINT]</div>
</form>
<form class="quiz">
<div id="Question2" class="Question"><b></b></div>
<input type="radio" name="radiobutton" value="263Eggs" id="correctAnswer-2">263 eggs a year<br>
<input type="radio" name="radiobutton" value="23Eggs">23 eggs a year<br>
<input type="radio" name="radiobutton" value="100Eggs">100 eggs a year<br>
<input type="radio" name="radiobutton" value="45Eggs">45 eggs a year<br>
<div id="hint2" class="hints">[HINT]</div>
</form>
<form class="quiz">
<div id="Question3" class="Question"><b></b></div>
<input type="radio" name="radiobutton" value="10,000" id="correctAnswer-3">10,000<br>
<input type="radio" name="radiobutton" value="4000">4000<br>
<input type="radio" name="radiobutton" value="20,000">20,000<br>
<input type="radio" name="radiobutton" value="537">537<br>
<div id="hint3" class="hints">[HINT]</div>
</form>
<form class="quiz">
<div id="Question4" class="Question"><b></b></div>
<input type="radio" name="radiobutton" value="7Years" id="correctAnswer-4"> 7 Years<br>
<input type="radio" name="radiobutton" value="5Years">5 Years<br>
<input type="radio" name="radiobutton" value="20Years">20 Years <br>
<input type="radio" name="radiobutton" value="14Years">14 Years <br>
<div id="hint4" class="hints">[HINT]</div>
<form class="quiz">
<div id="Question5" class="Question"><b></b></div>
<input type="radio" name="radiobutton" value="7%" id="correctAnswer-5"> 7%<br>
<input type="radio" name="radiobutton" value="5%">5%<br>
<input type="radio" name="radiobutton" value="20%">20%<br>
<input type="radio" name="radiobutton" value="14%">14%<br>
<div id="hint5" class="hints">[HINT]</div>
<br>
<br>
<button id=”MYsubmit” type="button" onclick="finalsubmit()">submit</button>
<div id="score"></div>
<div id="COPYRIGHT">Copyright © 2019. All rights reserved</div>
</form>
</body>
<script src="includes/scripts.js"></script>
</html>
. I would like the dark blue backgrounds touching each other, and I would like my radio buttons moved so they are below the answers,also I would like to do the same with the hint, and welcome comment. Im new with css so i apologize if its done poorly, im having a hard time figuring this one out and would appreciate any help. thank you guys alot!

Maybe you can use tooltip? Example from w3schools
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<div class="tooltip">HINT
<span class="tooltiptext">Put your hint here</span>
</div>

I'm pretty sure you should just use Tooltip instead of mouseover ^^
JQuery Tooltip
$("#hint1").tooltip();
with title as attribute for the texts.
Here's the Codepen Demo

I found the answer, skipped the animations but got it working using this code below:
$(document).ready(function(){
$('#hint2').hover(function() {
$(this).text("hover text");
},
function() {
$(this).text("back to origonal");
});
});

Radio button doesnt work inside css accordion

I have a radio button inside a css accordion and for some reason it doesnt work. Maybe the css I'm using for the accordion is overriding the radio button? maybe because the accordion is made from a check box that is causing problems? I've also put dojo controls inside the accordion and some work, some don't Below is the code: The first radio button outside the accordion works fine
HTML:
<input type="radio" name="colors" value="green" />Green <!--this works fine-->
<input type="radio" name="colors" value="red" />Red
<section id="accordionMTF">
<div>
<div style="width: 450px;
height: 80px"></div>
<input type="checkbox" id="checkMTF-1" checked="checked" />
<label for="checkMTF-1">Input System Info</label>
<article>
<input type="radio" name="colors" value="green" />Green <!--this doesnt work-->
<input type="radio" name="colors" value="red" />Red</article>
</div>
<div>
<input type="checkbox" id="checkMTF-2" />
<label for="checkMTF-3">Input Marking Information</label>
<article>
<p style="width: 450px;
height: 400px">Fill out form</p>
</article>
</div>
<div>
<input type="checkbox" id="checkMTF-3" />
<label for="checkMTF-4">Complete and Submit</label>
<article>
<p style="width: 450px;
height: 400px">Fill out form</p>
</article>
</div>
</section>
css:
/Mark Ticket Form Accordion/
#accordionMTF input {
display: none;
}
#accordionMTF label {
background: #eee;
border-radius: .25em;
cursor: pointer;
display: block;
margin-bottom: .125em;
padding: .25em 1em;
z-index: 20;
}
#accordionMTF label:hover {
background: #ccc;
}
#accordionMTF input:checked + label {
background: #ccc;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
color: white;
margin-bottom: 0;
}
#accordionMTF article {
background: #f7f7f7;
height:0px;
overflow:hidden;
z-index:10;
}
#accordionMTF article p {
padding: 1em;
}
#accordionMTF input:checked article {
}
#accordionMTF input:checked ~ article {
border-bottom-left-radius: .25em;
border-bottom-right-radius: .25em;
height: auto;
margin-bottom: .125em;
}
I have a fiddle:
here
Thanks

So long as you continue to use the same HTML structure, all you need to do is rework your css a little bit. The follow css
#accordionMTF input {
display: none;
}
Needs to look like this
#accordionMTF > div > input[type='checkbox'] {
display : none;
}
This is an excellent attempt to create an accordion without javascript. You might also consider incorporating CSS3 animations.
There is also a bug where your labels have the wrong for attribute value.
Here is a working fiddle http://jsfiddle.net/czo2m22s/21/

The developer of you accordion has decided to hide ALL inputs (!?)
#accordionMTF input {
display: none;
}
A more sane approach would be to give the inputs that are required for the accordion functionality a class (.hidden) and use that as a selector instead of blanket hidding all inputs:
<input type="checkbox" class="hidden" id="checkMTF-1" class="hidden" />
.hidden {
display: none;
}
WORKING EXAMPLE

here is the reason:
accordionMTF input {
display: none;
}