I am trying to implement a code to hide and show divs with a radio button. If yes is selected i want to show the divs. If no is selected i want to hide them. It sounds simple enouth but i can't figure this out. Can someone please advise.

Here is my code.

<script language="JavaScript"  type="text/javascript">
function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = 'block';
      document.getElementById(divid).style.display = 'none';

<script type="text/javascript">
//***Need the following DIVs hidden until used****
var divs = ["div0", "div1", "div2", "div3", "div4", "div5", "div6"];

function visiblox(arrDiv, hs) {
	var disp = (hs) ? "none" : "block";
	for(var x = 0; x < arrDiv.length; x++) {
		document.getElementById(arrDiv[x]).style.display = disp;

function prechk(v){
	v = v.split(',');
	for(var i = 0; i < v.length; ++i){
		chk([divs[v[i]]], true);

function chk(what, item) {
	if(item) {
		visiblox(what, false);
	} else {
		visiblox(what, true);
<style type="text/css">
	display: block;
	display: none;

<div class="rowElem"><label>Vignet:</label> 
			<input type="radio" id="" name="list" option value="1,2,5,6" onchange="chk(divs); prechk(this.value);"><label>Yes</label>
			<input type="radio" id="" name="list" option value="0" onchange="chk(divs); prechk(this.value);" checked><label>No</label></div>	
<div id="div0" class="hide"></div>	

<div id="div1" class="hide"><div id="buttonvignet"></div><input type="submit" value="Vignet!" /></div>
<div id="div5" class="hide"><img src="http://xxxx/xxxx/images/Vignetjes_10/1.png" id="image-to-change"></div>
<div id="div6" class="hide"><div class="rowElem"><label>Vinet Model:</label><input type="text" value="Vinet Model" readonly="readonly" name="vignet"></div></div>
<div id="div2" class="hide"><div class="rowElem"><label>Label:</label> 
			<input type="radio" id="" name="search" value="standard" ><label>Yes</label>
			<input type="radio" id="" name="search" value="advanced" checked><label>No</label></div></div>
6 Years
Discussion Span
Last Post by PeterWaij

Use below instead of line 17

var divs = ["div0", "div1", "div2", "div5", "div6"];

You have no div having tag id "div3" and "div4", so javascript is not executing properly.

Edited by mahavir123: n/a


Your function 'chk()' takes 2 argument, but when you first call it you passed in only 1 argument -- chk(divs). As a result, the second argument is always null and cause the 'else' statement to be true all the time.

Maybe you can try...

function chk(radioElement) {
  if (radioElement) {
    var vals = radioElement.value.split(",")
    if (radioElement.checked==true) {
      for (var i=0; i<vals.length.i++) {
        visiblox("div"+vals[i], true);
    else {
      for (var i=0; i<vals.length.i++) {
        visiblox("div"+vals[i], false);

// and in your HTML for each radio button
<input type="radio" name="list" option value="1,2,5,6" onchange="chk(this)"><label>Yes</label>
<input type="radio" name="list" option value="0" onchange="chk(this)" checked><label>No</label></div>

Hey thanks guys,

With your input i was able to solve my problem

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.