title: I want a certain div show up/be selected when all other divs aren't showing/selected - jQuery
body: <p>I want to know how I can show a certain div, when all other divs aren't showing anymore. I've tried toggle, but that create a mess. I've used Hide, but after it is hidden it don't show anymore. I recommend you to watch my fiddle then you'll know what I mean. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="clicks"&gt;  
      &lt;a class="click" id="showInfo" data-target=".1"&gt;&lt;button&gt;1&lt;/button&gt;&lt;/a&gt;
      &lt;a class="click" id="showDataInput" data-target=".2"&gt;&lt;button&gt;2&lt;/button&gt;&lt;/a&gt;
      &lt;a class="click" id="showHistory" data-target=".3"&gt;&lt;button&gt;3&lt;/button&gt;&lt;/a&gt;
  &lt;/div&gt;  
  
  &lt;div class="1" style="display: none;"&gt;
      1
  &lt;/div&gt;
  &lt;div class="2" style="display: none;"&gt;
      2
  &lt;/div&gt;
  &lt;div class="3" style="display: none;"&gt;
      3
  &lt;/div&gt;
  &lt;div id="text"&gt;
      "I WANT THIS DIV GONE EVERYTIME I LET DIV 1, 2 OR 3 SHOW BY CLICKING THE BUTTONS. BUT SHOW UP AGAIN WHEN 1, 2 OR 3 IS NOT SHOWING/SELECTED"
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$(document).ready(function () {
      var $targets = $('.target');
      $('#clicks .click').click(function () {
          var $target = $($(this).data('target')).toggle();
          $targets.not($target).hide()
      });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/73z48jr2/1/" rel="nofollow">http://jsfiddle.net/73z48jr2/1/</a></p>