JavaScript change display style in both sides

Question

I need to change display style infinity times between two div. The first change is normal, but backwards change isn't working. Additionally, I can't use link to definite div, because I have several identical divs.

<script type="text/javascript">
    function func(el){
      if (smth != true) {var smth = false;}
      if (smth == false) {
         el.firstElementChild.style.display = 'none';
      el.lastElementChild.style.display = 'block';
        smth = true;
      } else {
        el.firstElementChild.style.display = 'block';
      el.lastElementChild.style.display = 'none';
        smth = false;
      }
    }
</script>


<div onClick="func(this)">
  <div>1</div>
  <div style="display:none;">2</div>
</div>

Answer 1

In the code, smth will be undefined every time the func() is called because it is not a global variable. To fix this just make the smth global.

<script type="text/javascript">
var smth = false;

function func(el){
  if (smth == false) {
     el.firstElementChild.style.display = 'none';
  el.lastElementChild.style.display = 'block';
    smth = true;
  } else {
    el.firstElementChild.style.display = 'block';
  el.lastElementChild.style.display = 'none';
    smth = false;
  }
}
</script>


<div onClick="func(this)">
  <div>1</div>
  <div style="display:none;">2</div>
</div>