show and hide divs with radio buttons inside the hidden div

Question

Basically I have three images (call them img1, img2, img3) with three menus associated with each. (menu1, menu2, menu3)

When a user clicks img1, menu1 should pop up with three radio button selections (rad1, rad2, rad3). Say the user clicks rad2, menu1 should then hide and img2 should appear (but rad2 should still be selected). When img2 is clicked, menu2 then should show up with rad2 selected. Then if rad3 is clicked, menu2 hides and img3 shows up (but rad3 is still selected). And so on and so forth.

How to code this in javascript?

Answer 1

This becomes pretty easy if you use jQuery's built-in methods, such as show() or hide(). Don't re-invent the wheel and all that :)

Answer 2

Here is an example of how to show a hidden div by clicking on an image.

<script language="javascript">
function showDiv() {
  mydiv = document.getElementById('div1');
  mydiv.style.display = 'block';
}
</script>


<div id='div1' style="display:none;"> 
  <!-- content -->
</div>

<img src='img.gif' onclick='showDiv();'/>

Answer 3

It should be as easy as:

function img1clk() {
    menu1div.style.display = "block";
}
function menu1radclk() {
    menu1div.style.display = "none";
    img1div.style.display = "block";
    menu2div.style.display = "block";
}

and so on. You will have to initialize the elements so their onClick property is pointing to the correct function, but thats simply

img1div.onclick = ing1clk();

or in html

<div onclick="img1clk()"><img src="..."></div>

Hope this helps ya!

Answer 4

If all 3 menus are essentially the same but just look different why not bring up the same menu every time but change its css class?

Also, I couldn't agree more that jQuery is the way to go. The jQuery site's own documentation I find a bit lame, but once you've got around the basics it's really intuitive.