title: How to show an element only on click on it and and hide it on click on other elements?
body: <p><strong>Description:</strong> I created two buttons and two more elements (div &amp; section).
  When I click on button 1, div element will appear with background-color HotPink and/if at this moment i re-click on button 1, div element will disappear.</p>
  
  <p>I also wrote a function for button 2 so that when i click on button 2, section element will appear with background-colour DarkGreen and at this moment when i click on button 2 again, section element will disappear.</p>
  
  <p>I should mention that if i click on white space of body ( (document).click(event) ), both div and section elements will disapear.</p>
  
  <p><strong>Question:</strong> What function should I write to show div element when I click on button 1 and then I hide hide it when I click on button 2 or any other elements on my web page???<br/><br/>
  <a href="http://jsfiddle.net/revilcv/jw70n6ot/12/" rel="nofollow noreferrer">Demo</a><br/><br/>
  <strong>NOTE:</strong> I duplicated this question because I'm not interested to use any method like:<br/></p>
  
  <pre><code>$(".button1").click(function(event){
      event.stopPropagation();
      if($(".div").css("display") == "none"){
      $(".div").css("display","block");
      $(".section").css("display","none");
      }else{
      $(".div").css("display","none");
      }
      });
      $(".button2").click(function(event){
      event.stopPropagation();
      if($(".section").css("display") == "none"){
      $(".section").css("display","block");
  $(".div").css("display","none");
      }else{
      $(".section").css("display","none");
      }
      });
  </code></pre>
  
  <p><br/>
  It would be better if you do a favour and suggest a better method instead of duplicating a line of code with different class name under different events (functions).
  <br/></p>
  
  <p>My codes: 
  <strong>HTML:</strong></p>
  
  <pre><code>&lt;button class="button1"&gt;
  Show Div Element
  &lt;/button&gt;
  &lt;div class="div"&gt;
  I am Div Element
  &lt;/div&gt;
  
  &lt;br&gt;&lt;br&gt;
  
  &lt;button class="button2"&gt;
  Show Section Element
  &lt;/button&gt;
  &lt;section class="section"&gt;
  I am Section Element
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>JQuery:</strong></p>
  
  <pre><code>$(function(){
  
      $(".button1").click(function(event){
      event.stopPropagation();
      if($(".div").css("display") == "none"){
          $(".div").css("display","block");
      }else{
          $(".div").css("display","none");
      }
    });
  
    $(".button2").click(function(event){
      event.stopPropagation();
      if($(".section").css("display") == "none"){
          $(".section").css("display","block");
      }else{
          $(".section").css("display","none");
      }
    });
  
    $(document).click(function(){
      $(".div").css("display","none");
      $(".section").css("display","none");
    });
  
  });
  </code></pre>