javascript - How to collapse a menu on loading the page -

been using javascript code make lists clickable collapse when load page attached seems expand lists on loading. question javascript code possible make collapse apon page load users have click text expand it. heres full code javascript

<ul id="example_tree">  			<li><span><strong>a</strong></span>  		<ul>  			<li><span><p><a href="aimees travel.html">aimees travel</a></p></span></li>  			<li><span><p><a href="../../airport parking.html">airport parking</a></p></span></li>  			<li><span><p><a href="arriva bolton.html">arriva  bolton</a></p></span></li>                          <li><span><p><a href="arriva winsford.html">arriva  winsford</a></p></span></li>                          <li><span><p><a href="arriva wythenshawe.html">arriva  wythenshawe</a></p></span></li>  		</ul>  	</li>  <li><span><strong>b</strong></span>  		<ul>  			<li><span><p><a href="../../bakers.html">bakers coaches</a></p></span></li>  			<li><span><p><a href="../../belle vue.html">belle vue</a></p></span></li>  			<li><span><p><a href="bullocks.html">bullocks coaches</a></p></span></li>                          		</ul>  	</li>  	<li><span><strong>c</strong></span>  		<ul>  			<li><span><p><a href="cheshire council.html">cheshire council</a></p></span></li>  			<li><span><p><a href="chesters executive travel.html">chesters executive travel</a></p></span></li>  			<li><span><p><a href="copelands.html">copelands</a></p></span></li>                          		</ul>  	</li>  <li><span><strong>d</strong></span>  		<ul>  			<li><span><p><a href="../../d&g.html">d&amp;g</a></p></span></li>  			                        		</ul>  	</li>  <li><span><strong>e</strong></span>  		<ul>  			<li><span><p><a href="eavesway.html">eavesway</a></p></span></li>  			<li><span><p><a href="edwards coaches.html">edwards coaches</a></p></span></li>  			<li><span><p><a href="ellisons travel.html">ellisons travel</a></p</span></li>                          		</ul>  	</li>  <li><span><strong>f</strong></span>  		<ul>  			<li><span><p><a href="first potteries.html">first potteries</a></p></span></li>  			<li><span><p><p><a href="flight shuttle services.html">flight shuttle services</a></p></span></li>  			                        		</ul>  	</li>  <li><span><strong>g</strong></span>  		<ul>  			<li><span><p><a href="../../gha.html">gha group</a></p></span></li>  			<li><span><<p><a href="go goodwins.html">go goodwins</a></p></span></li>  			<li><span><p><a href="../../golden green.html">golden green travel</a></p></span></li>                          <li><span><p><a href="grayway.html">grayway</a></p></li>                          		</ul>  	</li>  <li><span><strong>h</strong></span>  		<ul>  			<li><span><p><a href="happy days coaches.html">happy days coaches</a></p></span></li>  			<li><span><p><a href="../../bowers coaches.html">high peak</a></p></span></li>  			<li><span><p><a href="../../hollinshead coaches.html">hollinshead coaches</a></p></span></li>                          <li><span><a href="../../holmeswood.html">holmeswood group</a></p></span></li>                          		</ul>  	</li>  <li><span><strong>i</strong></span>  		<ul>  			                        		</ul>  	</li>  <li><span><strong>j</strong></span>  		<ul>  			<li><span><p><a href="../../jones coaches.html">jones coaches</a></p></span></li>  			                        		</ul>  	</li>  <li><span><strong>k</strong></span>  		<ul>  			<li><span><p><a href="../../kt's coaches.html">kt's coaches</a></p></span></li>  			                        		</ul>  	</li>  <li><span><strong>l</strong></span>  		<ul>  			<li><span><p><a href="../../lambs.html">lambs</a></p></span></li>  			<li><span><p><a href="leons coaches.html">leons coaches</a></p></span></li>  			                        		</ul>  	</li>  <li><span><strong>m</strong></span>  		<ul>  			<li><span><p><a href="../../manchester airport.html">manchester airport group</a></p></span></li>  			<li><span><p><a href="../../mct.html">manchester community transport</a></p></span></li>  			<li><span><p><a href="maynes coaches.html">maynes coaches</a></p></span></li>                          <li><span><p><a href="megabus.html">megabus</a></p></span></li>                          		</ul>  	</li>  <li><span><strong>n</strong></span>  		<ul>  			                          		</ul>  	</li>  <li><span><strong>o</strong></span>  		<ul>  			                          		</ul>  	</li>  <li><span><strong>p</strong></span>  		<ul>  			<li><span><p><a href="parks of hamilton.html">parks of hamilton</a></p></span></li>  			<li><span><p><a href="pauls coaches.html">pauls of stoke</a></p></span></li>  			                          		</ul>  	</li>  <li><span><strong>q</strong></span>  		<ul>  			                          		</ul>  	</li>  <li><span><strong>r</span>  		<ul>  			<li><span><p><a href="robin hood travel.html">robin hood travel</a></p></span></li>  			<li><span><p><a href="../../roy mccarthy coaches.html">roy mccarthy coaches</a></p></span></li>  			                          		</ul>  	</li>  <li><span><strong>s</strong></span>  		<ul>  			<li><span><p><a href="scraggs.html">scraggs</a></p></span></li>  			<li><span><p><a href="../../selwyns travel.html">selwyns travel</a></p></span></li>  			<li><span> <p><a href="../../shearings.html">shearings</a></p></span></li>                          <li><span><p><a href="smiths of marple.html">smiths of marple</a></p></li>                          <li><span><p><a href="south lancs.html">south lancs travel</a></p></span></li>                          <li><span><p><a href="stagecoach manchester.html">stagecoach manchester</a></p></span></li>                          <li><span><p><a href="../../stanways.html">stanways coaches</a></p></span></li>                          <li><span><p><p><a href="stotts tours.html">stotts</a></p></p></span></li>                          <li><span><p><a href="swans travel.html">swans travel</a></p></span></li>                          		</ul>  	</li>  <li><span><strong>t</strong></span>  		<ul>  			<li><span><p><a href="terravision.html">terravision</a></p></span></li>  			<li><span><p><a href="transdev burnley & pendle.html">transdev burnley &amp; pendle</a></p></span></li>  			<li><span><p><a href="transdev lancashire united.html">transdev lancashire united</a></p></span></li>                          <li><span><p><a href="travellers choice.html">travellers choice</a></p></span></li>                          		</ul>  	</li>  <li><span><strong>u</strong></span>  		<ul>  			<li><span><p><a href="uk coachways.html">uk coachways</a></p></p></span></li>  			                          		</ul>  	</li>  <li><span><strong>v</strong></span>  		<ul>  			                          		</ul>  	</li>  <li><span><strong>w</strong></span>  		<ul>  			                          		</ul>  	</li>  <li><span><strong>x</strong></span>  		<ul>  			                          		</ul>  	</li>  <li><span><strong>y</strong></span>  		<ul>  			<li><span><p><a href="yelloway.html">yelloway</a></p></span></li>  			                          		</ul>  	</li>  <li><span><strong>z</strong></span>  		<ul>                          		</ul>  	</li>  			</li>  		</ul>  	</li>  </ul>  <script type="text/javascript">  var allspan = document.getelementsbytagname('span');  for(var = 0; < allspan.length; i++){  	allspan[i].onclick=function(){  		if(this.parentnode){  			var childlist = this.parentnode.getelementsbytagname('ul');  			for(var j = 0; j< childlist.length;j++){  				var currentstate = childlist[j].style.display;  				if(currentstate=="none"){  					childlist[j].style.display="block";  				}else{  					childlist[j].style.display="none";  				}  			}  		}  	}  }  </script>

basically can see javascript running page loads lists expanded want them closed apon loading if possible users click letters expand , see lists under it. have suggested need css code go along wit fix issue want try javascript code first before adding code in other places

you rather hide list items css default. need use getcomputedstyle since there no style.display property set explicitly initially.

#example_tree > li > ul {    display: none;  }

<ul id="example_tree">  			<li><span><strong>a</strong></span>  		<ul>  			<li><span><p><a href="aimees travel.html">aimees travel</a></p></span></li>  			<li><span><p><a href="../../airport parking.html">airport parking</a></p></span></li>  			<li><span><p><a href="arriva bolton.html">arriva  bolton</a></p></span></li>                          <li><span><p><a href="arriva winsford.html">arriva  winsford</a></p></span></li>                          <li><span><p><a href="arriva wythenshawe.html">arriva  wythenshawe</a></p></span></li>  		</ul>  	</li>  <li><span><strong>b</strong></span>  		<ul>  			<li><span><p><a href="../../bakers.html">bakers coaches</a></p></span></li>  			<li><span><p><a href="../../belle vue.html">belle vue</a></p></span></li>  			<li><span><p><a href="bullocks.html">bullocks coaches</a></p></span></li>                          		</ul>  	</li>  	<li><span><strong>c</strong></span>  		<ul>  			<li><span><p><a href="cheshire council.html">cheshire council</a></p></span></li>  			<li><span><p><a href="chesters executive travel.html">chesters executive travel</a></p></span></li>  			<li><span><p><a href="copelands.html">copelands</a></p></span></li>                          		</ul>  	</li>  <li><span><strong>d</strong></span>  		<ul>  			<li><span><p><a href="../../d&g.html">d&amp;g</a></p></span></li>  			                        		</ul>  	</li>  <li><span><strong>e</strong></span>  		<ul>  			<li><span><p><a href="eavesway.html">eavesway</a></p></span></li>  			<li><span><p><a href="edwards coaches.html">edwards coaches</a></p></span></li>  			<li><span><p><a href="ellisons travel.html">ellisons travel</a></p</span></li>                          		</ul>  	</li>  <li><span><strong>f</strong></span>  		<ul>  			<li><span><p><a href="first potteries.html">first potteries</a></p></span></li>  			<li><span><p><p><a href="flight shuttle services.html">flight shuttle services</a></p></span></li>  			                        		</ul>  	</li>  <li><span><strong>g</strong></span>  		<ul>  			<li><span><p><a href="../../gha.html">gha group</a></p></span></li>  			<li><span><<p><a href="go goodwins.html">go goodwins</a></p></span></li>  			<li><span><p><a href="../../golden green.html">golden green travel</a></p></span></li>                          <li><span><p><a href="grayway.html">grayway</a></p></li>                          		</ul>  	</li>  <li><span><strong>h</strong></span>  		<ul>  			<li><span><p><a href="happy days coaches.html">happy days coaches</a></p></span></li>  			<li><span><p><a href="../../bowers coaches.html">high peak</a></p></span></li>  			<li><span><p><a href="../../hollinshead coaches.html">hollinshead coaches</a></p></span></li>                          <li><span><a href="../../holmeswood.html">holmeswood group</a></p></span></li>                          		</ul>  	</li>  <li><span><strong>i</strong></span>  		<ul>  			                        		</ul>  	</li>  <li><span><strong>j</strong></span>  		<ul>  			<li><span><p><a href="../../jones coaches.html">jones coaches</a></p></span></li>  			                        		</ul>  	</li>  <li><span><strong>k</strong></span>  		<ul>  			<li><span><p><a href="../../kt's coaches.html">kt's coaches</a></p></span></li>  			                        		</ul>  	</li>  <li><span><strong>l</strong></span>  		<ul>  			<li><span><p><a href="../../lambs.html">lambs</a></p></span></li>  			<li><span><p><a href="leons coaches.html">leons coaches</a></p></span></li>  			                        		</ul>  	</li>  <li><span><strong>m</strong></span>  		<ul>  			<li><span><p><a href="../../manchester airport.html">manchester airport group</a></p></span></li>  			<li><span><p><a href="../../mct.html">manchester community transport</a></p></span></li>  			<li><span><p><a href="maynes coaches.html">maynes coaches</a></p></span></li>                          <li><span><p><a href="megabus.html">megabus</a></p></span></li>                          		</ul>  	</li>  <li><span><strong>n</strong></span>  		<ul>  			                          		</ul>  	</li>  <li><span><strong>o</strong></span>  		<ul>  			                          		</ul>  	</li>  <li><span><strong>p</strong></span>  		<ul>  			<li><span><p><a href="parks of hamilton.html">parks of hamilton</a></p></span></li>  			<li><span><p><a href="pauls coaches.html">pauls of stoke</a></p></span></li>  			                          		</ul>  	</li>  <li><span><strong>q</strong></span>  		<ul>  			                          		</ul>  	</li>  <li><span><strong>r</span>  		<ul>  			<li><span><p><a href="robin hood travel.html">robin hood travel</a></p></span></li>  			<li><span><p><a href="../../roy mccarthy coaches.html">roy mccarthy coaches</a></p></span></li>  			                          		</ul>  	</li>  <li><span><strong>s</strong></span>  		<ul>  			<li><span><p><a href="scraggs.html">scraggs</a></p></span></li>  			<li><span><p><a href="../../selwyns travel.html">selwyns travel</a></p></span></li>  			<li><span> <p><a href="../../shearings.html">shearings</a></p></span></li>                          <li><span><p><a href="smiths of marple.html">smiths of marple</a></p></li>                          <li><span><p><a href="south lancs.html">south lancs travel</a></p></span></li>                          <li><span><p><a href="stagecoach manchester.html">stagecoach manchester</a></p></span></li>                          <li><span><p><a href="../../stanways.html">stanways coaches</a></p></span></li>                          <li><span><p><p><a href="stotts tours.html">stotts</a></p></p></span></li>                          <li><span><p><a href="swans travel.html">swans travel</a></p></span></li>                          		</ul>  	</li>  <li><span><strong>t</strong></span>  		<ul>  			<li><span><p><a href="terravision.html">terravision</a></p></span></li>  			<li><span><p><a href="transdev burnley & pendle.html">transdev burnley &amp; pendle</a></p></span></li>  			<li><span><p><a href="transdev lancashire united.html">transdev lancashire united</a></p></span></li>                          <li><span><p><a href="travellers choice.html">travellers choice</a></p></span></li>                          		</ul>  	</li>  <li><span><strong>u</strong></span>  		<ul>  			<li><span><p><a href="uk coachways.html">uk coachways</a></p></p></span></li>  			                          		</ul>  	</li>  <li><span><strong>v</strong></span>  		<ul>  			                          		</ul>  	</li>  <li><span><strong>w</strong></span>  		<ul>  			                          		</ul>  	</li>  <li><span><strong>x</strong></span>  		<ul>  			                          		</ul>  	</li>  <li><span><strong>y</strong></span>  		<ul>  			<li><span><p><a href="yelloway.html">yelloway</a></p></span></li>  			                          		</ul>  	</li>  <li><span><strong>z</strong></span>  		<ul>                          		</ul>  	</li>  			</li>  		</ul>  	</li>  </ul>  <script type="text/javascript">  var allspan = document.getelementsbytagname('span');  for(var = 0; < allspan.length; i++){  	allspan[i].onclick=function(){  		if(this.parentnode){  			            var childlist = this.parentnode.getelementsbytagname('ul');  			            for(var j = 0; j< childlist.length;j++){  				var currentstate = window.getcomputedstyle(childlist[j], null).display;  				if (currentstate == "none"){  					childlist[j].style.display = "block";  				} else {  					childlist[j].style.display = "none";  				}  			}  		}  	}  }  </script>