We Keep Coding

changing the input class of a radio button dynamically with javascript

I am trying to make a small question web app using javascript/html. what I am trying to do is, assign a class to each of the radio buttons for each question-i.e. all the radio buttons for question 1 will have an input class of "question1" and 2 will have a class of "question2" and so on.
Because I don't know how many questions I will have, I was wondering if there was a way to achieve this dynamically through javascript using element.classList.add and increment the value of the question by 1 each time. I have received a response using jquery, but I was wondering if there was also a way to achieve this using pure javascript.
After some research, I have tried accessing all the elements inside a form using "form.elements" however it does not seem to be working.
HTML:
<form name="quizForm">
<div class="content">
<div class="quiz">
<p>Question 1</p>
<input type="radio" name="answer" value="1">
<input type="radio" name="answer" value="2">
<input type="radio" name="answer" value="3">
</div>
<div class="quiz" style="display: none;">
<p>Question 2</p>
<input type="radio" name="answer" value="1">
<input type="radio" name="answer" value="2">
<input type="radio" name="answer" value="3">
</div>
<div class="quiz" style="display: none;">
<p>Question 3</p>
<input type="radio" name="answer" value="1">
<input type="radio" name="answer" value="2">
<input type="radio" name="answer" value="3">
</div>
</form>
Javascript:
//counting the index of the class
let ind =0;
//access the named elements within the form
let elements = form.elements;
for(i=0;i<elements.length;i++){
element.classList.add(`quiz${ind+1}`)
}
Any information towards the right direction is greatly appreciated. Thank you.

I apologise for my initial question as I am realising that I have been unclear explaining some aspects of the issue that I was having. I managed to solve the problem. When I ask questions in the future, I will make sure I double check my code so that it is working. Posting an solution here for those who are interested and in the hopes that it will help someone.
What I did:
make a variable that keeps a track of the class number (ind)
using "querySelectorAll" I can select all the elements with the class "quiz"
loop through the returned array with forEach, increment the "ind" variable
select all the inputs that are inside each "quiz"
the "quiz" loop through those inputs and add a class to the input elements
HTML:
<div class="quiz">
<p>Question 1</p>
<input type="radio" name="answer" value="1">
<input type="radio" name="answer" value="2">
<input type="radio" name="answer" value="3">
</div>
<div class="quiz" style="display: none;">
<p>Question 2</p>
<input type="radio" name="answer" value="1">
<input type="radio" name="answer" value="2">
<input type="radio" name="answer" value="3">
</div>
<div class="quiz" style="display: none;">
<p>Question 3</p>
<input type="radio" name="answer" value="1">
<input type="radio" name="answer" value="2">
<input type="radio" name="answer" value="3">
</div>
Javascript:
const quizes = document.querySelectorAll('.quiz');
//a variable to increment the classes
let ind = 0;
quizes.forEach(function(element){
ind++;
let inputs = element.querySelectorAll('input');
inputs.forEach((input)=>{
input.classList.add(`question${ind}`)
})
//to test on the console
console.log(inputs)
})
All the radio button inputs for question 1 have the same "question1" class.

Javascript Quiz - problems reaching the next sibling through next() method on jQuery

I'm creating a quiz with JavaScript where I'm trying to use the jQuery to make 1 question appear at a time. I was able to get the html to show only one question on the page, by hiding the other elements, but for some reason I can't get the next sibling to show.
The jQuery API Documentation says the next() method reaches for the sibling element, but I’m not sure where the problem is.
My jQuery code is.
function main()
{
$('.slide').hide();
$('.active-slide').show();
var currentSlide = $('.active-slide')
var nextSlide = currentSlide.next();
$('.btnNext').click(function() {
currentSlide.removeClass('active-slide');
nextSlide.addClass('active-slide');
})
}
$(document).ready(main);
My HTML is.
<div class="slide active-slide">
<h3>Question 1: Answer is A! </h3>
<input type="radio" name="q1" value="correct">A</input><br>
<input type="radio" name="q1" value="incorrect">B</input><br>
<input type="radio" name="q1" value="incorrect">C</input><br>
<input type="radio" name="q1" value="incorrect">D</input>
<input type="button" class="btnNext" value="Next">
</div>
<div class="slide">
<h3>Question 2: Answer is B! </h3>
<input type="radio" name="q2" value="incorrect">A</input><br>
<input type="radio" name="q2" value="correct">B</input><br>
<input type="radio" name="q2" value="incorrect">C</input><br>
<input type="radio" name="q2" value="incorrect">D</input>
<input type="button" class="btnNext" value="Next">
</div>
The console on Chrome shows no errors which makes it harder to find.
Thanks for any help.

The first issue is the result of a jQuery selector is not live meaning if the selector properties of an element changes the cached object will not get updated. So you need to find the active slide inside the event handler.
The second issue could be related to css, since you are using hide() to hide the element, it will be using an inline display rule, but to show the element back you are only setting the active-slide class which might be having a lower order rule.
function main() {
$('.btnNext').click(function() {
var currentSlide = $('.active-slide').removeClass('active-slide');
currentSlide.next().addClass('active-slide');
})
}
$(document).ready(main);
.slide {
display: none;
}
.slide.active-slide {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide active-slide">
<h3>Question 1: Answer is A! </h3>
<input type="radio" name="q1" value="correct">A
<br>
<input type="radio" name="q1" value="incorrect">B
<br>
<input type="radio" name="q1" value="incorrect">C
<br>
<input type="radio" name="q1" value="incorrect">D
<input type="button" class="btnNext" value="Next">
</div>
<div class="slide">
<h3>Question 2: Answer is B! </h3>
<input type="radio" name="q2" value="incorrect">A
<br>
<input type="radio" name="q2" value="correct">B
<br>
<input type="radio" name="q2" value="incorrect">C
<br>
<input type="radio" name="q2" value="incorrect">D
<input type="button" class="btnNext" value="Next">
</div>

Your problem is that you only run the jQuery hide and show functions once; changing the classes of your divs isn't going to run that code again. Your jQuery needs to do something like this JSFiddle.
This way, the shown div is updated each time the classes are changed.

Using Radio Buttons to show/hide nested divs

Essentially, I want one question to be displayed with several radio button options. When one button is clicked, a new question pops below the first (specific to the answer chosen) with a new set of radio buttons. When an answer from this set is clicked, another question pops below (specific to the answer chosen here) and so on and so forth. If the user decides to select any of the prior radio buttons I would like everything after that button (unrelated to the answer) to be hidden.
I end up with either all options selected at any time will stay on the page even when a different option is selected (the different option is simply added to the list...) Or, only the most recent question will stay on the page, making it impossible to choose differently on the prior questions...
Here is what I have right now:
$(document).ready(function(){
$("input[name$='group1']").click(function() {
var test = $(this).val();
$(".desc").hide();
$("#"+test).show();
});
});
.desc { display: none; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic jQuery Quiz Demo Page</title>
<link rel="Stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Troubleshooting</h1>
<h2>What needs to be fixed?</h2>
<form>
<div><label><input type="radio" name="group1" value="in1">Internet</label></div>
<div><label><input type="radio" name="group1" value="tv1">TV</label></div>
<div><label><input type="radio" name="group1" value="ph1">Phone</label></div>
</form>
<div id="in1" class="desc">
<h3>Internet Troubleshooting</h3>
<h3>Are there lights on the router?</h3>
<form>
<div><label><input type="radio" name="group1" value="in2">Yes</label></div>
<div><label><input type="radio" name="group1" value="in3">No</label></div>
</form>
</div>
<div id="in2" class="desc">
<h3>Is the power light red?</h3>
<form>
<div><label><input type="radio" name="group1" value="in4">Yes</label></div>
<div><label><input type="radio" name="group1" value="in5">No</label></div>
</form>
</div>
<div id="in3" class="desc">
<h3>Is the router plugged in?</h3>
<form>
<div><label><input type="radio" name="group1" value="in6">Yes</label></div>
<div><label><input type="radio" name="group1" value="in7">No</label></div>
</form>
</div>
<div id="in4" class="desc">
<h3>Failing Device</h3>
<p>A red power light most likely indicates the device is not functioning properly. Contact your ISP.</p>
</div>
<div id="in6" class="desc">
<h3>Plug the router into another outlet. Is the power light on?</h3>
<form>
<div><label><input type="radio" name="group1" value="in4">Yes</label></div>
<div><label><input type="radio" name="group1" value="in5">No</label></div>
</form>
</div>
<div id="in7" class="desc">
<h3>Please plug in your router and try again once the router has fully started up. (Note: This process may take up to 5 minutes)</h3>
</div>
<div id="tv1" class="desc">
<h1>TV Troubleshooting</h1>
<form>
<div><label><input type="radio" name="group1" value="tv2">opt1</label></div>
<div><label><input type="radio" name="group1" value="tv3">opt2</label></div>
<div><label><input type="radio" name="group1" value="tv4">opt3</label></div>
</form>
</div>
<div id="ph1" class="desc">
<h1>Phone Troubleshooting</h1>
<form>
<div><label><input type="radio" name="group1" value="ph2">opt1</label></div>
<div><label><input type="radio" name="group1" value="ph3">opt2</label></div>
<div><label><input type="radio" name="group1" value="ph4">opt3</label></div>
</form>
</div>
</body>
</html>

The best way to do this would be to define your questions and answers in a separate Javascript file and dynamically generate the quiz form.
But say you didn't want to do that -- here's one way you could accomplish that with just your HTML (slightly tweaked) and Javascript:
$(document).ready(function(){
$("input[name$='group1']").click(function() {
var test = $(this).val();
if (test[2] == '1') {
// Check whether this is a top-level question, and if so,
// hide all the subquestions (and uncheck responses)
$('.desc').hide();
$('input').not('[value='+test+']').removeAttr('checked');
} else {
// Find the ID of this question
var parent_q = $($(this).parents('.desc')[0]).attr('id');
var type = parent_q.substring(0,2); // Get the type, such as "in"
var level = parent_q.substring(2); // Get the level, such as 1
$(".desc").each(function(elt_index, elt) {
// Hide each question/answer with either a different type or a higher ID.
var e_id = $(elt).attr('id');
if(e_id.substring(0,2) != type || e_id.substring(2) > level) {
$(elt).hide();
$(elt).children('input').removeAttr('checked');
}
});
}
$("#"+test).show();
});
});
.desc { display: none; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic jQuery Quiz Demo Page</title>
<link rel="Stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Troubleshooting</h1>
<h2>What needs to be fixed?</h2>
<form>
<div><label><input type="radio" name="group1" value="in1">Internet</label></div>
<div><label><input type="radio" name="group1" value="tv1">TV</label></div>
<div><label><input type="radio" name="group1" value="ph1">Phone</label></div>
</form>
<div id="in1" class="desc">
<h3>Internet Troubleshooting</h3>
<h3>Are there lights on the router?</h3>
<form>
<div><label><input type="radio" name="group1" value="in2">Yes</label></div>
<div><label><input type="radio" name="group1" value="in3">No</label></div>
</form>
</div>
<div id="in2" class="desc">
<h3>Is the power light red?</h3>
<form>
<div><label><input type="radio" name="group1" value="in8">Yes</label></div>
<div><label><input type="radio" name="group1" value="in5">No</label></div>
</form>
</div>
<div id="in3" class="desc">
<h3>Is the router plugged in?</h3>
<form>
<div><label><input type="radio" name="group1" value="in6">Yes</label></div>
<div><label><input type="radio" name="group1" value="in7">No</label></div>
</form>
</div>
<div id="in6" class="desc">
<h3>Plug the router into another outlet. Is the power light on?</h3>
<form>
<div><label><input type="radio" name="group1" value="in4">Yes</label></div>
<div><label><input type="radio" name="group1" value="in5">No</label></div>
</form>
</div>
<div id="in7" class="desc">
<h3>Please plug in your router and try again once the router has fully started up. (Note: This process may take up to 5 minutes)</h3>
</div>
<div id="in8" class="desc">
<h3>Failing Device</h3>
<p>A red power light most likely indicates the device is not functioning properly. Contact your ISP.</p>
</div>
<div id="tv1" class="desc">
<h1>TV Troubleshooting</h1>
<form>
<div><label><input type="radio" name="group1" value="tv2">opt1</label></div>
<div><label><input type="radio" name="group1" value="tv3">opt2</label></div>
<div><label><input type="radio" name="group1" value="tv4">opt3</label></div>
</form>
</div>
<div id="ph1" class="desc">
<h1>Phone Troubleshooting</h1>
<form>
<div><label><input type="radio" name="group1" value="ph2">opt1</label></div>
<div><label><input type="radio" name="group1" value="ph3">opt2</label></div>
<div><label><input type="radio" name="group1" value="ph4">opt3</label></div>
</form>
</div>
</body>
</html>

This should do it:
https://jsfiddle.net/csbnw5ne/2/
I hope the comments in the jsFiddle are clear.
I didn't have much time left so I had to rush it. It's a fairly simple solution:
You have to remember what boxes you opened and which ones you have to close. You have to find this out somehow, so I numbered the boxes with box-number.
Then, in jQuery I check for the box number containing the options. I proceed to close all boxes beyond the box that was just clicked in, but only if the previously opened box was an "earlier" box than the box that was just clicked in!
Then I simply open the required box without hiding all boxes.
Now all you have to do is make sure you sort them correctly. Make sure any "end" of the quiz is the last box and number them correctly. Keep them grouped together like you are now and it should work. It's not perfect, but it's as simple as I could think it up in a few minutes and it should work if you keep your html sorted.
Let me know if you have any more issues with this!
New HTML for when the jsFiddle goes out:
<h1>Troubleshooting</h1>
<h2>What needs to be fixed?</h2>
<form>
<div><label><input type="radio" name="group1" value="in1">Internet</label></div>
<div><label><input type="radio" name="group1" value="tv1">TV</label></div>
<div><label><input type="radio" name="group1" value="ph1">Phone</label></div>
</form>
<div id="in1" class="desc" data-box="1">
<h3>Internet Troubleshooting</h3>
<h3>Are there lights on the router?</h3>
<form>
<div><label><input type="radio" name="group1" value="in2">Yes</label></div>
<div><label><input type="radio" name="group1" value="in3">No</label></div>
</form>
</div>
<div id="in2" class="desc" data-box="2">
<h3>Is the power light red?</h3>
<form>
<div><label><input type="radio" name="group1" value="in4">Yes</label></div>
<div><label><input type="radio" name="group1" value="in5">No</label></div>
</form>
</div>
<div id="in3" class="desc" data-box="3">
<h3>Is the router plugged in?</h3>
<form>
<div><label><input type="radio" name="group1" value="in6">Yes</label></div>
<div><label><input type="radio" name="group1" value="in7">No</label></div>
</form>
</div>
<div id="in6" class="desc" data-box="4">
<h3>Plug the router into another outlet. Is the power light on?</h3>
<form>
<div><label><input type="radio" name="group1" value="in4">Yes</label></div>
<div><label><input type="radio" name="group1" value="in5">No</label></div>
</form>
</div>
<div id="in4" class="desc" data-box="5">
<h3>Failing Device</h3>
<p>A red power light most likely indicates the device is not functioning properly. Contact your ISP.</p>
</div>
<div id="in7" class="desc" data-box="6">
<h3>Please plug in your router and try again once the router has fully started up. (Note: This process may take up to 5 minutes)</h3>
</div>
<div id="tv1" class="desc" data-box="7">
<h1>TV Troubleshooting</h1>
<form>
<div><label><input type="radio" name="group1" value="tv2">opt1</label></div>
<div><label><input type="radio" name="group1" value="tv3">opt2</label></div>
<div><label><input type="radio" name="group1" value="tv4">opt3</label></div>
</form>
</div>
<div id="ph1" class="desc" data-box="8">
<h1>Phone Troubleshooting</h1>
<form>
<div><label><input type="radio" name="group1" value="ph2">opt1</label></div>
<div><label><input type="radio" name="group1" value="ph3">opt2</label></div>
<div><label><input type="radio" name="group1" value="ph4">opt3</label></div>
</form>
</div>
New javascript for when the jsfiddle goes out:
$(document).ready(function(){
var lastBoxOpened = 0;
$("input[name$='group1']").click(function() {
var boxNumber = parseInt($(this).parents('.desc').attr("data-box"));
//check if the data-box was succesfully retrieved. If not, first option chosen, reset all of it
if(isNaN(boxNumber)){
boxNumber = 0;
}
var test = $(this).val();
var target = $("#"+test)
var newBoxOpened = target.attr("data-box");
//check if the last opened box was an earlier one than the newly clicked one
if(lastBoxOpened > boxNumber){
//hide boxes beyond the one we opened now
$('.desc').each(function(){
//if box number is bigger than the currently clicked box, close them.
if($(this).attr("data-box") > boxNumber){
$(this).hide();
//uncheck the previously selected radio buttons in now hidden things
$('input', this).prop("checked", false);
}
});
}
//render target box
target.show();
//update last opened box to the newly opened one
lastBoxOpened = newBoxOpened;
});
});
Sidenote: I put the html for the in6 wrapper above the in4 wrapper, so that this outcome (which will never be revealed until the end of the quiz) will always stay on the bottom. Otherwise it would pop up above in6 instead of as an answer.
update: I have now also added the functionality of actually clearing previously selected radio buttons in boxes that get hidden! Just seemed less sloppy to me (Strange if the user has to click a selected box to see a result)

You have to use dynamic elements within your javascript that should link to only one div in your html. Here's an example that i have with a survey that i did. Not sure if you know, but the dynamic elements are the elements with $(<...>):
HTML:
<div id = "surveyDiv">
<ul class = "options">
<ul><input type="radio" id="v1" name="q" value=1>1</ul>
<ul><input type="radio" id="v2" name="q" value=2>2</ul>
<ul><input type="radio" id="v3" name="q" value=3>3</ul>
<ul><input type="radio" id="v4" name="q" value=4>4</ul>
<ul><input type="radio" id="v5" name="q" value=5>5</ul>
</ul>
<button id="next" type="button">Next</button>
</div>
Javascript:
$('#surveyTime').on('click', function(){
friend.name = $('#nameInput').val().trim();
$('.personalInfo').hide();
$('.survey').show();
});
//survey questions
var questions =
[{question: "You would know at least 2 songs at a Pearl Jam concert"},
{question: "You would dress up and dance all day Electric Zoo"},
{question: "You can tell the difference between Country Songs"},
{question: "You enjoy guitar solos"},
{question: "You have been or would go to Bonnaroo"},
{question: "You love Justin Bieber"},
{question: "You know who Public Enemy is"},
{question: "You appreciate Miles Davis"},
{question: "You like and dance/or would like to learn to dance salsa"},
{question: "You're one of those people that says you like all music"}];
//starting with question as 0 since array starts at 0
var questionNumber = 0;
//creates each question one at a time
function createQuestion(index){
var newDiv = $('<div>', {
id: 'current'
});
var newP = $('<p>');
newP.append(questions[index].question);
newDiv.append(newP);
return newDiv;
};
//appends the next question and removes the previous question
//also removes the display of the questions once done
function displayNext(){
$('#current').remove();
if(questionNumber < questions.length){
var nextQuestion = createQuestion(questionNumber);
$('#question').append(nextQuestion);
} else {
$('.survey').hide();
$('#submitButton').show();
var newDiv2 = $('<div>');
var final = $('<h2>Thank You For Taking This Survey. Please Press Submit Button To Meet Your Match</h2>');
newDiv2.append(final);
$('.thankYou').append(newDiv2);
}
}

Java script radio buttons

I'm using Javascript and radio buttons for the first time.
I need to know how to assign the script to each radio button that is selected? there seem to be a few ways of doing this and its just getting confusing!
Each question has 4 radio buttons to select from and I need to gather the answers at the end!
Any help appreciated

Just add an event listener to the radio buttons and maintain a mapping where you could store all your answers to.
let answers = {}
$('input[type=radio]').on('click', function (event) {
let question = event.currentTarget.name
let answer = event.currentTarget.value
answers[question] = answer
document.getElementById('result').innerHTML = JSON.stringify(answers, null, 2)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question-block">
<div class="question">
1. Which one is the biggest?
</div>
<div class="answers">
<form>
<input type="radio" name="1" value="1" checked> Elephant<br>
<input type="radio" name="1" value="2"> Whale<br>
<input type="radio" name="1" value="3"> Giraffe
</form>
</div>
</div>
<div class="question-block">
<div class="question">
2. Which one is the smallest animal?
</div>
<div class="answers">
<form>
<input type="radio" name="2" value="1" checked> Bacteria<br>
<input type="radio" name="2" value="2"> Virus<br>
<input type="radio" name="2" value="3"> Ant
</form>
</div>
</div>
<div id="result">
</div>

IE issue with :visible? [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
Can anyone tell me how to make this work in IE? It works perfectly in every other browser!
I'm assuming the :visible is the problem?
TIA
$('.yes').click(function () {
$('.question:visible')
.fadeOut()
.closest('.question')
.nextAll('.question')
.eq(0)
.delay(400)
.fadeIn();
});
All questions are in this format:
<div class="question">
<p>Question 1</p>
<h1>is this a question?</h1>
<label class="btn"><input type="radio" name="question1" value="yes"><span class="yes">YES</span></label>
<label class="btn"><input type="radio" name="question1" value="no"><span class="no">NO</span></label>
<label class="btn"><input type="radio" name="question1" value="maybe"><span class="maybe">MAYBE</span></label>
</div>
Question >1 looks like this:
<div class="hiddenquestion">
<p>Question 2</p>
<h1>is this a question?</h1>
<label class="btn"><input type="radio" name="question2" value="yes"><span class="yes">YES</span></lable>
<label class="btn"><input type="radio" name="question2" value="no"><span class="no">NO</span></lable>
<label class="btn"><input type="radio" name="question2" value="maybe"><span class="maybe">MAYBE</span></lable>
</div>
where .hiddenquestion is of-course display: none;

Ok so there's a couple of problems here
First, your label tags are not closing correctly as someone has already commented </lable> should be </label>.
Second, from your example your hidden questions have the class attribute set like this <div class="hiddenquestion"> but i suspect there should be a space in there meaning this is what you wanted <div class="hidden question">. You should have a css .hidden { display: none; } and not .hiddenquestion
Third, you need to add a click handler to the radio button as well as the tag (or at this this is the only way it seems to work in IE) in which case your js should look something like this.
var fn = function () {
$('.question:visible')
.fadeOut()
.closest('.question')
.nextAll('.question')
.eq(0)
.delay(400)
.fadeIn();
};
// click handler on the yes label
$('.yes').click(fn);
// click handler on the actual yes radio
$(':radio[value="yes"]').change(fn);

I think your problem is this
<label class="btn"><input type="radio" name="question2" value="yes"><span class="yes">YES</span></lable>
Notice the invalid closing tag for <label>, </lable>. This renders the markup invalid in IE.
Update:
Tested in IE9/8 with following, works fine
Markup
<button class="yes">YESS!</button>
<div class="question" style="display: block">
<p>Question 1</p>
<h1>is this a question?</h1>
<label class="btn">
<input type="radio" name="question1" value="yes" />
<span class="yes">YES</span>
</label> <label class="btn">
<input type="radio" name="question1" value="no">
<span class="no">NO</span></label> <label class="btn">
<input type="radio" name="question1" value="maybe">
<span class="maybe">MAYBE</span></label>
</div>
<div class="question">
<p>Question 2</p>
<h1>is this a question?</h1>
<label class="btn">
<input type="radio" name="question1" value="yes" />
<span class="yes">YES</span>
</label> <label class="btn">
<input type="radio" name="question1" value="no">
<span class="no">NO</span></label> <label class="btn">
<input type="radio" name="question1" value="maybe">
<span class="maybe">MAYBE</span></label>
</div>
<div class="question">
<p>Question 3</p>
<h1>is this a question?</h1>
<label class="btn">
<input type="radio" name="question1" value="yes" />
<span class="yes">YES</span>
</label> <label class="btn">
<input type="radio" name="question1" value="no">
<span class="no">NO</span></label> <label class="btn">
<input type="radio" name="question1" value="maybe">
<span class="maybe">MAYBE</span></label>
</div>
CSS
.question{display: none;}
Update
In order to make it work on click of the radio button or the label text in all browsers, you'll have to change your javascript to
//change the selector of .yes to
$('label.yes').click(function () {...
And change the markup of "yes" section of the question to
<label class="btn yes">
<input type="radio" name="question1" value="yes" />
<span>YES</span>
</label>