title: hide and show a div using javascript
body: <p>I have a question, I'm making a javascript that shows and hide a div by clicking another div but because divs don't have a value or a name I can't find out a way to do this.
  I'm using input type hidden because it can have a value, but still it doesn't work as it should.
  I hope somebody can help me to find a solution thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function hideshow(pairsblock){
     var value = document.getElementById(pairheader).value;
      if(value == 1){
          document.getElementById(pairsblock).style.display = 'block';
          document.getElementById(pairheader).value = 2;    
      }else if(value == 2){
          document.getElementById(pairsblock).style.display = 'none';
          document.getElementById(pairheader).value = 1;              
      }    
  }  </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
  border :2px solid #0f111d82;
  margin-left :10px !important;
  margin-right :10px !important;
  padding-left:5px;
  padding-top:15px;
  padding-bottom:15px;
  padding-right:5px;
  background-color: #0f111d82;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div id="pairheader2" onclick="hideshow('pairsblock')" class="box"&gt;
        &lt;input type="hidden" id="pairheader" value="1"&gt;
            &lt;h6&gt;header&lt;/h6&gt;
    &lt;/div&gt;
      
  &lt;div id="pairsblock" class="pairs-block"&gt;
  &lt;p&gt;test&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>