Question

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

Answer 1

Since you’ve tagged this with jQuery I assume that is an option:

function showfields(fields){
  $('.steps').hide()
  $('#' + fields).show();
}