title: hide and show contents with jquery
body: <p>I have 2 divs with a button above it. In the beginning you only see 1 div and this will be thecatalogusOrderBox div. If i click the button: manualButton(which will be shown above the div) then it must show the manualOrderBox div and hide the catalogusOrderBox div. But it then also need to change the button text(from manual button to catalogus button) so the user can open the catalogusOrderBox div again, so if you then click on that button it must show the catalogusOrdersBox again and hide the manualOrderBox.</p>
  
  <p>For now i have this and it doesn't work:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){   
      $('.manualOrderBox').hide().before('&lt;a href="#" id="toggle-manualOrderBox" class="manualButton"&gt;manual order box&lt;/a&gt;');
      $('a#toggle-manualOrderBox').click(function() {
  
          $('.manualOrderBox').slideToggle(1000);
  
          if($('.manualOrderBox').is(":visible")){
              $('.catalogusOrderBox').hide();
              $('.manualOrderBox').visible = false;
          }else{
          $('.manualOrderBox').visible = true;
          $('a#toggle-manualOrderBox').text('catalogus orderBox');
          $('.catalogusOrderBox').show();
          }
          return false;
      });
  
  });
  &lt;/script&gt;
  
  &lt;div class="manualOrderBox"&gt;
  </code></pre>
  
  <p>see also <a href="https://jsfiddle.net/Lbot8a8b/" rel="nofollow">https://jsfiddle.net/Lbot8a8b/</a>
  live in action</p>