title: Only one toggle open at a time?
body: <p>I am new to JS, so please bear with me.</p>
  
  <p>I am trying to create a basic content toggle, however I am struggling to get my code to only show one toggle at a time.</p>
  
  <p>The code I am using is:</p>
  
  <pre><code>&lt;div&gt;
      &lt;h3 class = "trigger"&gt;&lt;a href="#box1"&gt; Heading 1&lt;/a&gt;&lt;/h3&gt; 
      &lt;h3 class = "trigger"&gt;&lt;a href="#box2"&gt; Heading 2&lt;/a&gt;&lt;/h3&gt;
  
  &lt;/div&gt;
  &lt;div class ="toggle" id="box1"&gt;
          box one content
  &lt;/div&gt;
  
  &lt;div class ="toggle" id="box2"&gt;
      box two content
  &lt;/div&gt;
  
  $("a").click(function(){
     var myelement = $(this).attr("href")
     $(myelement).slideToggle("slow");
     $(".toggle:visible").not(myelement).hide();  
  });
  </code></pre>