title: jQuery hide and show toggle keeping active only one div
body: <p>I am a starter with JQuery, and Javascript, and I would like to know how should I edit the following code so that when I click on a heading, the content under the other headings, will be hidden? I also want the arrows to function properly.</p>
  
  <p>Basically, I want to keep only one content active when clicking on a heading?</p>
  
  <p>Here is the code I have: <a href="http://jsfiddle.net/mL79571z/1/" rel="nofollow">http://jsfiddle.net/mL79571z/1/</a></p>
  
  <pre><code>$(".prod_options").hide();
  $(".stag_options").hide();
  $(".qa_options").hide();
  
  $("#show_prod_options").click(function(){
      $(".prod_options").slideToggle("slow");
      $("#arrow_prod").toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
  });
  $("#show_stag_options").click(function(){
      $(".stag_options").slideToggle("slow");
      $("#arrow_stag").toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
  });
  $("#show_qa_options").click(function(){
      $(".qa_options").slideToggle("slow");
      $("#arrow_qa").toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
  });
  </code></pre>
  
  <p>Thanks!</p>