title: Opening a div by clicking a button and closing the same div by clicking another buttonm
body: <p>I am making a page where there will be three buttons 1) Mission, 2) Vision, 3) Management</p>
  
  <p>Here the functions have to be
  1.By clicking the Mission Button a separate div(#mission1) shall open.</p>
  
  <p>2.By clicking the Vision Button another div(#vision1) shall open in the same position of the #mission1 div and also the #mission1 &amp; #mteam divs shall close.</p>
  
  <ol>
  <li>By clicking the Management Button another div(#mteam) shall open in the same position of the #mission1 &amp; #vision1 divs and also the #mission1, #vision1 divs shall close. 
  and so on consecutively</li>
  </ol>
  
  <p>I have coded the following
  Script</p>
  
  <pre><code>$('document').ready(function() {
  
     $('#show1').click(function(){
  
       $('#mission1').slideToggle();  
  
  
         });
  
         $('#show2').click(function(){
  
             $(' #vission1').slideToggle();
  
  
  
             });
  
  
             $('#show3').click(function(){
  
              $('#mteam').slideToggle();   
  
                 });
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code> #mission1 
    {
      width:450px; 
      height:200px; 
      background:#069; 
      margin-top:10px;
      display:none; 
      position:absolute; }
  
  
    #vission1
    {
      width:450px; 
      height:200px; 
      background:#096;
      margin-top:10px;
      display:none; 
      position:absolute; }
  
      #mteam
    {
      width:450px; 
      height:200px; 
      background:#CC3;
      margin-top:10px;
      display:none; 
      position:absolute; }​
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;button id="show1"&gt;Mission&lt;/button&gt;
  &lt;button id="show2"&gt;Vision&lt;/button&gt;
  &lt;button id="show3"&gt;Management&lt;/button&gt;
  
           &lt;div id="mission1"&gt;Abcd&lt;/div&gt;
           &lt;div id="vission1"&gt;VVVVVVV&lt;/div&gt;
           &lt;div id="mteam"&gt;MMMMMMMMM&lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/amitabhaghosh197/XseGB/" rel="nofollow">See Demo</a></p>
  
  <p>I have done it but I am facing the problem only the hide issues. My hiding is being operated only after clicking the same buttons but not clicking the other buttons.</p>
  
  <p>Please help me how shall I do this.
  Thanks a lot in advance</p>