title: Resetting function so there only is one open at the time
body: <p>Once again i have a problem. </p>
  
  <p>I have this function below, and it works very well except for when you already have a div clicked visible. I need it to reset the whole thing and then run the function when you click it. 
  Ime pretty lost at it at the moment. </p>
  
  <pre><code>    &lt;nav&gt;
          &lt;ul&gt;
              &lt;li id="home" onclick="showAndHidediv('homeBox', 'home');"&gt;&lt;a href="#" class="menuHovers"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;div class="hiddenFormMouseoverButton"&gt;Home&lt;/div&gt;&lt;/a&gt;
                  &lt;img src="GFX/arrow.png" /&gt;
              &lt;/li&gt;
              &lt;li id="test" onclick="showAndHidediv('testbox', 'test');"&gt;&lt;a href="#" class="menuHovers"&gt;&lt;i class="fa fa-dashboard"&gt;&lt;/i&gt;&lt;div class="hiddenFormMouseoverButton"&gt;Dashboard&lt;/div&gt;&lt;/a&gt;
              &lt;img src="GFX/arrow.png" /&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;div class="menuBox" id="homeBox"&gt;
          &lt;h2&gt;Home&lt;/h2&gt;
          &lt;p&gt;Her kan du redigere dine oplysninger på forsiden. Det kan fx. være teksterne i de bokse du ser på forsiden, eller måske en udskiftning af et billede i slideren. &lt;/p&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;a href="Home.aspx"&gt;Informationsbokse&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Slider&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;SEO&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="menuBox" id="testbox"&gt;
          &lt;h2&gt;Test&lt;/h2&gt;
          &lt;p&gt;Her kan du redigere dine oplysninger på forsiden. Det kan fx. være teksterne i de bokse du ser på forsiden, eller måske en udskiftning af et billede i slideren. &lt;/p&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;a href="Home.aspx"&gt;Test 1&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Test 2 &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Test 3&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
  
      var open = "closed";
  
      function showAndHidediv(id, liName) {
          $("#" + id).toggle(function () {
              $("#" + id).animate({
                  display: 'block'
              }, 500);
  
              if (open == "open") {
                  $("#" + liName + " a").removeClass('color');
                  $("#" + liName + " a div").removeClass('block');
                  $("#" + liName + " img").removeClass('block');
                  open = "closed";
              } else {
                  $("#" + liName + " a").addClass('color');
                  $("#" + liName + " a div").addClass('block');
                  $("#" + liName + " img").addClass('block');
                  open = "open";
              }
          });
      }
  </code></pre>