title: Can this javascript code be cleaned up?
body: <p>The code is working just fine now, but is a bit sloppy and long. I'm not as proficient in js as I would like to be.</p>
  
  <p>Javascript</p>
  
  <pre><code>    $("#IDArea1").click(function () {
          $('#indicator1').toggleClass("icon-caret-up icon-caret-down");
          $('#indicator2').removeClass("icon-caret-up");
          $('#indicator2').addClass("icon-caret-down");
          $('#indicator3').removeClass("icon-caret-up");
          $('#indicator3').addClass("icon-caret-down");
      });
      $("#IDArea2").click(function () {
          $('#indicator2').toggleClass("icon-caret-up icon-caret-down");
          $('#indicator1').removeClass("icon-caret-up");
          $('#indicator1').addClass("icon-caret-down");
          $('#indicator3').removeClass("icon-caret-up");
          $('#indicator3').addClass("icon-caret-down");
      });
      $("#IDArea3").click(function () {
          $('#indicator3').toggleClass("icon-caret-up icon-caret-down");
          $('#indicator2').removeClass("icon-caret-up");
          $('#indicator2').addClass("icon-caret-down");
          $('#indicator1').removeClass("icon-caret-up");
          $('#indicator1').addClass("icon-caret-down");
      });
  </code></pre>
  
  <p>DOM Structure</p>
  
  <pre><code>&lt;div id="IDArea1"&gt;
      &lt;i class="icon-caret-up"&gt;&lt;/i&gt;
  &lt;/div&gt;
  ...
  &lt;div id="IDArea2"&gt;
      &lt;i class="icon-caret-down"&gt;&lt;/i&gt;
  &lt;/div&gt;
  ...
  &lt;div id="IDArea3"&gt;
      &lt;i class="icon-caret-down"&gt;&lt;/i&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Basically, the first area (IDArea1) is open by default. Then, depending on which heading you click, will toggle the clicked heading to the opposite icon and force the others to be "icon-caret-down". So the structure of each function is the same and I have a feeling there is a cleaner way to execute this code, I just can't find a solution.</p>
  
  <p>Thank you for your help.</p>