Minor tweak to this javascript function?
- by RKS
I have a script that shows/hides used via onClick. I can get it to show/hide just fine, but I can't get it to show/'hide everything else'. So what I get is a bunch of open containers when I really want just the one.
Javascript:
<script>
function showfields(fields){
if(document.getElementById(fields).style.display=='none'){
document.getElementById(fields).style.display='block';
}
else{
document.getElementById(fields).style.display = 'none';
}
}
</script>
HTML:
<div id="hidden" class="steps" style="display: block;">
<div class="section" style="margin-right: 10px;">
<h2>Something</h2>
</div>
<button class="continue dropdown" id="showLink" onClick="showfields('hidden2');return false;" href="#">Continue</button>
</div>
<div id="hidden2" class="steps" style="display: block;">
<div class="section" style="margin-right: 10px;">
<h2>Something2</h2>
</div>
<button class="continue dropdown" id="showLink" onClick="showfields('hidden3');return false;" href="#">Continue</button>
</div>
<div id="hidden3" class="steps" style="display: block;">
<div class="section" style="margin-right: 10px;">
<h2>Something3</h2>
</div>
<button class="continue dropdown" id="showLink" onClick="showfields('hidden3');return false;" href="#">Continue</button>
</div>
<div id="hidden4" class="steps" style="display: block;">
<div class="section" style="margin-right: 10px;">
<h2>Something4</h2>
</div>
<button class="continue dropdown" id="showLink" onClick="showfields('hidden4');return false;" href="#">Continue</button>
</div>
Thanks
