title: JQuery Swapping the Toggle of elements, one at a time
body: <p>I'm new to JQuery and I'd like to know if you've got any idea regarding how to accomplish the following with JQuery instead of JScript:</p>
  
  <p>You have a group of a's within a top div:</p>
  
  <pre><code>&lt;h3&gt;
  &lt;a id="acer" href="#acerca"&gt;acerca&lt;/a&gt; |
  &lt;a id="cur" href="#cursos"&gt;cursos y clases&lt;/a&gt; |
  &lt;a id="cal" href="#calendario"&gt;calendario&lt;/a&gt; |
  &lt;a id="con" href="#contacto"&gt;contacto&lt;/a&gt;
  &lt;/h3&gt;
  </code></pre>
  
  <p>And below them, inside the same container div, there's four content divs, one after the other, each belonging to each of the a's above:</p>
  
  <pre><code>&lt;div id="acerca"&gt;&lt;/div&gt;
  &lt;div id="cursos"&gt;&lt;/div&gt;
  &lt;div id="calendario"&gt;&lt;/div&gt;
  &lt;div id="contacto"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Now, the idea here is that we start off by closing all of these content div's but one, the first: acerca, which is visible to the user:</p>
  
  <pre><code>$(document).ready(function(){
  
      $("#cursos,#calendario,#contacto").hide();
  
  });
  </code></pre>
  
  <p>Now, using the h3 a's at the top, I want the following behaviour to take place:</p>
  
  <p>1.- If I click a different item than the one open by default (acerca), then close the currently open one and show me the new one.
  2.- If I click the same item which is already open (acerca), then nothing happens: there must always be one content div open at all times.
  3.- If possible, using #anchors to mask the ugly "javascript:;" of the old days.</p>
  
  <p>This is very simple with the use of JavaScript's onclick function (save for #3) but, I'm somehow getting stuck with JQuery. </p>
  
  <p>Help is greatly appreciated
  Sotkra</p>