Question

I’m using this to show/hide some divs, at the end I have a button to show the divs one by one.

How can I have a second button to show/hide all of them at once without messing too much with the HTML?

Basically each div contains an input field, so the user clicks the “Add one more” button to get an extra field. By default, all fields are hidden so I need a button to show them all at once (I have 14 divs to show/hide).

Any help will be appreciated.

Javascript

var counter = 0;
var numBoxes = 3;
function toggle4(showHideDiv) {
       var ele = document.getElementById(showHideDiv + counter);
       if(ele.style.display == "block") {
              ele.style.display = "none";
       }
       else {
              ele.style.display = "block";
       }
       if(counter == numBoxes) {
                document.getElementById("toggleButton").style.display = "none";
       }
}

HTML

<table>
   <tr>
      <td style="width: 150px;">
         <div id="box1" style="display: none;">First</div>
      </td>
      <td style="width: 150px;">
         <div id="box2" style="display: none;">Second</div
      </td>
      <td style="width: 150px;">
         <div id="box3" style="display: none;">Third</div
      </td>
   </tr>
</table>
<input id="toggleButton" type="button" value="Add one more!" onclick="counter++; toggle4('box');">

Answer 1

Here’s the basic functionality, though it needs some refinement:

var d = document,
    table = d.getElementsByTagName('table')[0],
    divs = table.getElementsByTagName('div'),
    toggle = d.getElementById('toggleButton'),
    allToggle = d.getElementById('allToggle'),
    count = 0;

function toggles(){    
    var elem = divs[count];
    elem.style.display = 'block';

    count++;
}

toggle.onclick = function(){
    toggles();
};

allToggle.onclick = function(){
    if (allToggle.getAttribute('data-show') == 1){
        for(var i=0,len=divs.length;i<len;i++){
            divs[i].style.display = 'none';
            allToggle.setAttribute('data-show',0);
            allToggle.value = 'Show all';
        }
    }
    else {
        for(var i=0,len=divs.length;i<len;i++){
            divs[i].style.display = 'block';
            allToggle.setAttribute('data-show',1);
            allToggle.value = 'Hide all';
        }
    }
}
​

JS Fiddle demo.

The above based on the following HTML:

<table>
   <tr>
      <td style="width: 150px;">
         <div id="box1" style="display: none;">First</div>
      </td>
      <td style="width: 150px;">
         <div id="box2" style="display: none;">Second</div>
      </td>
      <td style="width: 150px;">
         <div id="box3" style="display: none;">Third</div>
      </td>
   </tr>
</table>
<input id="toggleButton" type="button" value="Add one more!" />
<input id="allToggle" type="button" value="Show all" />​