Question

    <script>
    function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
    item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
    }
    </script>

    <style>
    .hidden { display: none; }
    .unhidden { display: block; }
    </style>

    <div class="answers">
        <ol>
            <li>
                <input type="radio" name="q1" id="q1-a" onclick="unhide('answerq1a')"/>John
            </li>
            <li>
                <input type="radio" name="q1" id="q1-b" onclick="unhide('answerq1b')"/>Paula
            </li>
            <li>
                <input type="radio" name="q1" id="q1-c" onclick="unhide('answerq1c')"/>Henal
            </li>
            <li>
                <input type="radio" name="q1" id="q1-d" onclick="unhide('answerq1d')"/>Malc
            </li>
        </ol>
    </div>

    <div id="answerq1a" class="hidden">
    <textarea class="widthninetyfivepercent" rows="4" name="optionA" id="1-A" maxlength="300" value=""/>Your answer is correct, John is 20.</textarea>
    </div>

This works fine, but the only problem is, I am using radio buttons and I want on a click to show my div (which it does) but when another radio button is clicked, I want it to hide all other unhidden divs, and only show one at a time.

How can I go about this in the simplest way?

You may find some stuff is written in a weird way, but that is because I need this to be edited using a CMS and it will only pick it up in a specific way. That is also why I am using this specific show/hide. It is short and it works with the way I’ve written everything.

Regards,

John Vas.

Answer 1

Without changing your html or code much DEMO

<input type="radio" name="q1" id="q1-a" onclick="unhide(this)" />
<input type="radio" name="q1" id="q1-b" onclick="unhide(this)" />
<input type="radio" name="q1" id="q1-c" onclick="unhide(this)" />
<input type="radio" name="q1" id="q1-d" onclick="unhide(this)" />

using

var currentShown = "";
function unhide(rad) {
  var id = "answer"+rad.id.replace("-",""); 
  var answer = document.getElementById(id);
  if (answer) {
    var current = document.getElementById(currentShown);
    if (current) current.className="hidden";
    currentShown=id;
    answer.className="unhidden";
  }
}