Reputation: 997
<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.
Upvotes: 0
Views: 132
Reputation: 178421
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";
}
}
Upvotes: 1