Как сделать кнопку развернуть/свернуть без jQuery?

Есть

<ul id="mytrips">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<div id="btn"></div>

Javascript:

----------

    window.onload=function (){
        var myTrips=document.getElementById("mytrips").getElementsByTagName("li");

          if(myTrips.length>4){
            for(var i=4; i<myTrips.length; i++){
              myTrips[i].setAttribute("id", "hide");
              document.getElementById("btn").textContent="Развернуть";
            }
          };
        };

        /* событие для кнопки */

        function hideList(){
        var myTrips=document.getElementById("mytrips").getElementsByTagName("li"),
            flag=0;
            if(flag==0){
            for(var i=4; i<myTrips.length; i++){
                myTrips[i].setAttribute("id", "dis");
                document.getElementById("btn").textContent="Свернуть";
              }
              flag=1;
            }else if(flag==1){
                for(var i=4; i<myTrips.length; i++){
                myTrips[i].setAttribute("id", "hide");
                document.getElementById("btn").textContent="Развернуть";
              }
            }
        };

        document.getElementById("btn").addEventListener("click", hideList, false);

-------

Задача такая, что при загрузке документа скрываются li, если их больше 4-х, потом при нажатии на кнопку раскрывается весь список, а при повторном нажатии на кнопку опять скрывается все что больше 4-х.

Из всего этого не работает условие со скрытием списка при повторном нажатии на кнопке... Помогите, плиз (только JS).