title: How to change background color of active accordion segment?
body: <p><strong>How to change background color of active accordion segment?</strong></p>
  
  <p>I've created an accordion using following code:</p>
  
  <pre><code>$(document).ready(function(){
  $(".toggle-content").hide();
  $(".toggle-title").click(function(){
  $(this).next(".toggle-content").slideToggle("normal");
  });
  });
  </code></pre>
  
  <p>This works great - <strong>However I would like my toggle-title's background color to change when it's active.</strong></p>
  
  <p>This is the HTML i'm currently using:</p>
  
  <pre><code>   &lt;div class="toggle-box"&gt;
        &lt;div class="toggle-title"&gt;Toggle 1&lt;/div&gt;
        &lt;div class="toggle-content"&gt;
          &lt;p&gt;Ut orci lorem, malesuada sed rhoncus quis, dignissim eget erat. Sed accumsan lorem sed libero posuere vitae blandit mi varius. Vestibulum eu dui leo, eget molestie quam. Integer non velit arcu, non tempor nulla.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="toggle-title"&gt;Toggle 2&lt;/div&gt;
        &lt;div class="toggle-content"&gt;
          &lt;p&gt;Ut orci lorem, malesuada sed rhoncus quis, dignissim eget erat. Sed accumsan lorem sed libero posuere vitae blandit mi varius. Vestibulum eu dui leo, eget molestie quam. Integer non velit arcu, non tempor nulla.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="toggle-title"&gt;Toggle 3&lt;/div&gt;
        &lt;div class="toggle-content"&gt;
          &lt;p&gt;Ut orci lorem, malesuada sed rhoncus quis, dignissim eget erat. Sed accumsan lorem sed libero posuere vitae blandit mi varius. Vestibulum eu dui leo, eget molestie quam. Integer non velit arcu, non tempor nulla.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And this is my CSS:</p>
  
  <pre><code>.toggle-box {
      margin-top: 20px;
  }
  
  .toggle-box p {
      margin: 0;
      padding: 0;
  }
  
  .toggle-title {
      width: 100%;
      margin-bottom: 10px;
      padding: 10px;
      background: #BBC4D5;
      border: 1px solid #45536C;
      cursor: pointer;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border-radius: 6px;
  }
  
  .toggle-title:hover,
  .toggle-title:active {
      background: #000;
  }
  
  .toggle-title a {
      color: #111;
  }
  
  .toggle-content {
      padding-bottom: 10px;
  }
  </code></pre>
  
  <p>Help would be very welcome!</p>
  
  <p>Thanks in advance,</p>
  
  <p>Jan</p>