title: show div and hide existing div if open with jQuery?
body: <p>I have two divs which are hidden by default. The user then reveals the div on click. If a div is already open, and the user clicks to reveal the other div, I want the current div to hide, and show the new div. </p>
  
  <p>My current code is this.. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="menu"&gt;MENU&lt;/div&gt;
  &lt;div class="search"&gt;SEARCH&lt;/div&gt;
  
  &lt;div class="menu-box"&gt;MENU BOX&lt;/div&gt;
  &lt;div class="search-box"&gt;SEARCH BOX&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code> .menu, .search {
        display:inline-block;
        cursor:pointer;
      }
  
      .menu, .search, .menu-box, .search-box  {
        padding:20px;
        background-color: #ccc;
        margin-right:10px;  
      }
  
      .menu-box, .search-box {
        width:20%;
        display:none;
      }
  
      .menu-box {
        background-color:red;
      }
  
      .search-box {
        background-color:green;
      }
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>$('.menu').click(function(){
      $('.menu-box').slideToggle();
  });
  
  $('.search').click(function(){
      $('.search-box').slideToggle();
  });
  </code></pre>
  
  <p>You can see a working demo here... </p>
  
  <p><a href="http://codepen.io/seraphzz/pen/zbHDk" rel="nofollow">http://codepen.io/seraphzz/pen/zbHDk</a></p>
  
  <p>I have had a look around for help, but all the solutions are found are for tabs, where one div is always showing. This is not what I am after. A div should only be showing if that link was clicked on. </p>
  
  <p>So to confirm, if the 'menu' div is already open, and the user clicks on 'search', I want the 'menu' div to hide and the 'search' to show. The two divs should never be showing at the same time!</p>
  
  <p>Thanks in advance</p>