对此javascript函数进行了细微调整？

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();
}

Answer 2

Edit: Is this what you're trying to do: http://jsfiddle.net/Rykus0/67cjt/2/ (without jQuery)

(ps - this can be done better)

---

Your question is not very clear, but I'm guessing that you want the page to start with the everything but the first div hidden.

In that case, what you have is fine, just set style="display:none;" on the elements you don't want to show at first (you can also use a class).

Also, I believe you should change the onclick call on hidden3 to be showfields('hidden4') and remove the onclick event from hidden4

Answer 3

I agree with Porco,

Another option would be using a class as a flag, for example

function showFields(fields){
     $(fields).each(function(){
         if($(this).hasClass('visible'){
              $(this).hide();
         }
         else {
              $(this).show();
         }
     }
}

Answer 4

Without using jquery .This piece of javascript may help you

  <script>
        function showfields(fields){
          for(var i=0;i<document.body.getElementsByTagName("*").length;i++)
          { if(document.body.getElementsByTagName("*")[i].id==field)
            {
            document.body.getElementsByTagName("*")[i].style.display='block';
            }
            else{
                 document.body.getElementsByTagName("*")[i].style.display='block';

            }
        }
    </script>