html - Javascript: Toggle div visibility in two steps -

this question maybe stupid many here. have bunch of divs , want make them appear/disappear on click special behaviour:

on-load state: divs visible

1. click: divs disappear, except 1 selected when clicking

2. to n-th click: toggle visibility div selected when clicking

what i've got far:

		function toggle_visibility(id) {              var e = document.getelementbyid(id);              if(e.style.display == 'block')                e.style.display = 'none';              else                e.style.display = 'block';          }    		function toggle_class(id) {              var thiselem = document.getelementbyid(id);              var invisible = "invisible";              var visible = "visible";              var classes = thiselem.classlist;              if (classes == invisible) {                  thiselem.classname = thiselem.classname.replace(invisible, visible);              }              else {                  thiselem.classname = thiselem.classname.replace(visible, invisible);              }          }

<ul id='list'>  	<li id='1-i' class='visible'><a href='javascript:return false;' onclick="toggle_visibility('1'); toggle_class('1-i');">toggle div #1</a></li>  	<li id='2-i' class='visible'><a href='javascript:return false;' onclick="toggle_visibility('2'); toggle_class('2-i');">toggle div #2</a></li>  	<li id='3-i' class='visible'><a href='javascript:return false;' onclick="toggle_visibility('3'); toggle_class('3-i');">toggle div #3</a></li>  	<li id='4-i' class='visible'><a href='javascript:return false;' onclick="toggle_visibility('4'); toggle_class('4-i');">toggle div #4</a></li>  </ul>      <div id='1' style='display: block;'><h3>div #1</h3></div>  <div id='2' style='display: block;'><h3>div #2</h3></div>  <div id='3' style='display: block;'><h3>div #3</h3></div>  <div id='4' style='display: block;'><h3>div #4</h3></div>

this code shows divs on page-load, toggles visibility selected div on click. on first click selected div disappear others staying still visible - opposite of want. though second click on, behaviour desired one.

i have found similar other threads (like this one), issues seem add complexity i'd avoid.

thanks lot help!

---

edit: tried update function toggle_class(id) { following arun p johny's example:

        var firstrun = true;            function toggle_class(id) {              var thiselem = document.getelementbyid(id);              var invisible = "invisible";              var visible = "visible";              if (thiselem.classname == 'invisible' && !firstrun) {                  thiselem.classname = thiselem.classname.replace(invisible, visible);              } else {                  thiselem.classname = thiselem.classname.replace(visible, invisible);              }              if (firstrun) {                  var children = document.getelementsbyclassname('visible');                  (var = 0; < children.length; i++) {                      if (children[i].id != id) {                          children[i].classname = thiselem.classname.replace(visible, invisible);                      }                  }              }              firstrun = false;          }

the result confusing: on first click, selected element changes class invisible (which understand, since script tries replace class visible invisible elements). not behaviour want, clicked element supposed keep class visible (until clicked again, since when div disappears).

and more confusing part me: not other elements change class invisible, every second element.

what did wrong?

overly simplified version: http://jsfiddle.net/9ref3cf2/

html

<ul id='list'>     <li data-id="1">toggle div #1</li>     <li data-id="2">toggle div #2</li>     <li data-id="3">toggle div #3</li>     <li data-id='4'>toggle div #4</li> </ul>  <div data-id='1' class="listblock"><h3>div #1</h3></div> <div data-id='2' class="listblock"><h3>div #2</h3></div> <div data-id='3' class="listblock"><h3>div #3</h3></div> <div data-id='4' class="listblock"><h3>div #4</h3></div> 

javascript

function togglelistblocks() {     $('.listblock').hide();     $('.listblock[data-id='+ $(this).data('id') +']').show(); }  $(document).ready(function(){     $('#list>li').click(togglelistblocks); });