Jennifer Jennifer - 6 months ago 11
HTML Question

Showing a div when radio button selected

I am creating a list of radio button selections for an order form. Each of the questions has an answer that contains a div with additional information. I have them all set up to show the div when the radio button is clicked, but when you go to the next question and click an option, it hides the above answer and unselects the radio button for the previous question.

I would like the previous radio buttons to stay selected. I started with this code and modified it to have multiple questions:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css" media="screen">
.hide{
display:none;
}
</style>
</head>
<body>

<div id="tabs">
<div id="nav">
<p>Show Div 1:<input type="radio" name="tab" value="pkfrom" class="div1" /></p>
<p>Show Div 2:<input type="radio" name="tab" value="pkfrom" class="div2" /></p>
</div>

<div id="div1" class="tab">
<p>this is div 1</p>
</div>

<div id="div2" class="tab">
<p>this is div 2</p>
</div>
</div>

<script type="text/javascript" charset="utf-8">
(function(){
var tabs =document.getElementById('tabs');
var nav = tabs.getElementsByTagName('input');

/*
* Hide all tabs
*/
function hideTabs(){
var tab = tabs.getElementsByTagName('div');
for(var i=0;i<=nav.length;i++){
if(tab[i].className == 'tab'){
tab[i].className = tab[i].className + ' hide';
}
}
}

/*
* Show the clicked tab
*/
function showTab(tab){
document.getElementById(tab).className = 'tab'
}

hideTabs(); /* hide tabs on load */

/*
* Add click events
*/
for(var i=0;i<nav.length;i++){
nav[i].onclick = function(){
hideTabs();
showTab(this.className);
}
}
})();
</script>
</body>
</html>


Here is the jsfiddle: https://jsfiddle.net/lenniejane/d58phaua/

Answer

First you need to put different names of radio buttons, I also made some changes in html :

<div id="tabs">
  <div class="nav">
    <p><strong>QUESTION 1</strong></p>

    <div class="answers">
      <p><input name="tab" type="radio" value="residential-yes">Yes</p>
      <p><input name="tab" type="radio" value="residential-no">No</p>
    </div>

    <div class="tab" id="div1">
      <p class="fee-notice">ADDITIONAL INFO 1</p>
      <p>ZZZZZZZZZZZZZZZZZ</p>
    </div>
  </div>
  <br>


  <div class="nav">
    <p><strong>QUESTION 2</strong></p>


    <div class="answers">
      <p><input name="tab2" type="radio" value="lift-yes">Yes</p>
      <p><input name="tab2" type="radio" value="lift-no">No</p>
    </div>

    <div class="tab" id="div2">
      <p class="fee-notice">ADDITIONAL INFO 2</p>
      <p>ZZZZZZZZZZZZZZZZZ</p>
    </div>
  </div>
  <br>


  <div class="nav">
    <p><strong>QUESTION 3</strong></p>

    <div class="answers">
      <p><input name="tab3" type="radio" value="inside-yes">Yes</p>
      <p><input name="tab3" type="radio" value="inside-no">No</p>
    </div>

    <div class="tab" id="div3">
      <p class="fee-notice">ADDITIONAL INFO 3</p>
      <p>ZZZZZZZZZZZZZZZZZ</p>
    </div>
  </div>
  <br>


  <div class="nav">
    <p><strong>QUESTION 4</strong></p>

    <div class="answers">
      <p><input name="tab4" type="radio" value="inside-yes">Yes</p>
      <p><input name="tab4" type="radio" value="inside-no">No</p>
    </div>

    <div class="tab" id="div4">
      <p class="fee-notice">ADDITIONAL INFO 4</p>
      <p>ZZZZZZZZZZZZZZZZZ</p>
    </div>
  </div>


</div>

css :

.tab {
  display: none;
}

.nav.showtab .tab{
  display:block;
}

and js will be like this :

var inputsEle = document.getElementsByTagName('input');
var navEle = document.getElementsByClassName('nav');

for(i=0; i<inputsEle.length; i++){
    inputsEle[i].addEventListener("change", function(e){
        var thiisNav = e.target.parentElement.parentElement.parentElement;
        diplayNewTab(thiisNav)
    });
}

function diplayNewTab(thiisNav){
    for(i=0; i<navEle.length; i++){
            navEle[i].classList.remove("showtab");
    }
    thiisNav.className += ' showtab';
}

https://jsfiddle.net/d58phaua/2/

UPDATE:

if you need to keep the "additional info" for previous questions visible when answering another question use this js :

var inputsEle = document.getElementsByTagName('input');
var navEle = document.getElementsByClassName('nav');

for(i=0; i<inputsEle.length; i++){
    inputsEle[i].addEventListener("change", function(e){
        var thiisNav = e.target.parentElement.parentElement.parentElement;
        thiisNav.className += ' showtab';
    });
}

Demo : https://jsfiddle.net/d58phaua/3/