.toggle() on childNodes / toggle undisplayed elements 2 by 2

Question

Here is the code I'm stuck with for too long..

<ul class="list">
   <li> </li>
   <li><p>qwerty</p> </li>
   <li style="display:none;"> </li>
   <li style="display:none;"> </li>
</ul>

In a separated file:

function plusArg() {
var ul = document.getElementsByClassName('list')[0];
for(var i = ul.childNodes.length; i--;){
if(ul.childNodes[i].nodeName === 'LI' )
ul.childNodes[i].toggle('fade',1000);
//ul.childNodes[i].innerHTML = 'test' ;
}
}

No sign when I call the plusArg() function :/ (the test line runs when uncommented). I searched on google why toggle would not run with childNodes but no answers. I guess there's a good reason but do you know it ? And if there is no way to do what I want this way, how could I do it differently ? The final goal is to display a bunch of ten more lis undisplayed by clicking an unique button.

Thanks in advance !

Answer 1

Thank you Albert Kuzmin ! I managed to achieve what I wanted to thanks to your code ! Here is the code:

<a href="#a" id="button">Toggle</a>
<ul class="list">
   <li>First</li>
  <li>Second</li>
  <li style="display:none;">Third</li>
  <li style="display:none;">Fourth</li>
  <li style="display:none;">Fifth</li>
  <li style="display:none;">Sixth</li>
</ul>

$("#button").on("click",function(){
   var index = 0;
   $(".list li").each(function(){
   if (!$(this).is(":visible") & index != 2){
       index++;
       $(this).fadeToggle( "slow", "linear" );
   }});
});

The Jsfiddle : http://jsfiddle.net/qho65ov4/2/

Answer 2

This is how it can be achieved with jQuery:

<a href="#a" id="button">Toggle</a>
<ul class="list">
   <li>first</li>
   <li><p>qwerty</p></li>
   <li style="display:none;">Third</li>
   <li style="display:none;">Fourth</li>
</ul>

$("#button").on("click",function(){
    $(".list li").each(function(){
        $(this).fadeToggle( "slow", "linear" );
    });
});

Fiddle: http://jsfiddle.net/qho65ov4/