title: jQuery - after click show one div and close other
body: <p>I'm building my personal site and I've encountered a challenge. I suppose it will be none to those, who are more familiar with jQuery than me (not hard) ;) </p>
  
  <p><strong>The structure:</strong></p>
  
  <pre><code>&lt;a href&gt;one&lt;/a&gt;
  &lt;div id="hidden_one&gt;&lt;/div&gt;
  
  &lt;a href&gt;two&lt;/a&gt;
  &lt;div id="hidden_two&gt;&lt;/div&gt;
  
  &lt;a href&gt;three&lt;/a&gt;
  &lt;div id="hidden_three&gt;&lt;/div&gt;
  
  &lt;a href&gt;four&lt;/a&gt;
  &lt;div id="hidden_four&gt;&lt;/div&gt;
  </code></pre>
  
  <p>etc.
  In other words every "a" is shown all the time and has an attached div below.</p>
  
  <p><strong>The action:</strong></p>
  
  <p>After clicking any "a":</p>
  
  <p>if clicked "a" has a shown div below - close the div</p>
  
  <p>if clicked "a" doesn't have a shown div below, but there are other divs shown - hide those divs and show the one attached to this "a".</p>
  
  <p>if no div is shown - show the one attached to this "a".</p>
  
  <p>I'll be grateful for any support! :) </p>