title: Change div to class active only when needed
body: <p>I am trying to get each title/block bar of my little carousel controls to change to blue when 'active' and showing its content. Right now they will keep switching between blue and black when clicked, this is pretty much just be testing things out but overall is there anyone which may be able to amend my javascript to control the active/non active state of each button to do this.</p>
  
  <p>I've left a live url to have a look so you can see and some code:</p>
  
  <p>Live URL: <a href="http://bit.ly/1bijza0" rel="nofollow">http://bit.ly/1bijza0</a>  (Homepage, next to the large image.)</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul id="index-controls"&gt;
      &lt;li&gt;&lt;div id="1" class="active"&gt;FREE DISC Profile&lt;/div&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;h2&gt;Training that fits like a glove&lt;/h2&gt;&lt;/li&gt;
              &lt;li&gt;&lt;p&gt;Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.&lt;/p&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;div id="2"&gt;Last Minute Availability&lt;/div&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;h2&gt;Training that fits like a glove&lt;/h2&gt;&lt;/li&gt;
              &lt;li&gt;&lt;p&gt;Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.&lt;/p&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;div id="3"&gt;Bespoke Training&lt;/div&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;h2&gt;Training that fits like a glove&lt;/h2&gt;&lt;/li&gt;
              &lt;li&gt;&lt;p&gt;Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.&lt;/p&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong> </p>
  
  <pre><code>jQuery('#1').click(function () {
      jQuery(this).toggleClass('active');
  });
  jQuery('#2').click(function () {
      jQuery(this).toggleClass('active');
  });
  jQuery('#3').click(function () {
      jQuery(this).toggleClass('active');
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#index-controls div { display: block; background-color: #222424; font-weight: bold; margin: 0px; cursor: pointer; padding: 19px 20px 20px 20px; border-bottom: 1px solid #4e92ad; color: #fff; font-size: 1.1em; }
  #index-controls .active { background-color: #4e92ad; }
  #index-controls ul { padding-left: 0; margin-top: 0; }
  #index-controls ul{ display: none; background-color: transparent; padding: 10px 10px 0px 10px; }
  #index-controls ul li { list-style-type: none; background-color: transparent; width: 240px; color: #fff; font-size: 12px; }
  </code></pre>