title: How to make accordion stay open
body: <p>How would one make an accordion tab remain open, giving it an active state?</p>
  
  <p>Ie., if I was on the List One accordion page, then that accordion would be open upon entering the page, and the other accordion would be closed.</p>
  
  <p>I've created <a href="http://jsfiddle.net/F2krm/" rel="nofollow">a JS Fiddle</a> of where I am so far. I've tried a few different methods but it just seems to stop the accordion from working altogether. </p>
  
  <p>Here is the code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="trigger-button"&gt;&lt;span&gt;List One&lt;/span&gt;&lt;/div&gt;
          &lt;div class="accordion"&gt;
                  &lt;ul&gt;
              &lt;li&gt;Item One&lt;/li&gt;
              &lt;li&gt;Item Two&lt;/li&gt;
              &lt;li&gt;Item Three&lt;/li&gt;
              &lt;li&gt;Item Four&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;div class="trigger-button"&gt;&lt;span&gt;List Two&lt;/span&gt;&lt;/div&gt;
          &lt;div class="accordion"&gt;
              &lt;ul&gt;
             &lt;li&gt;Item One&lt;/li&gt;
             &lt;li&gt;Item Two&lt;/li&gt;
             &lt;li&gt;Item Three&lt;/li&gt;
             &lt;li&gt;Item Four&lt;/li&gt;
              &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.trigger-button {
  float: left;
  width: 100%;
  padding: 10px 0 10px 0;
  margin-bottom: 6px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.17);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.17);
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.17);    
  background-color: #CCC;
  border: 1px solid #000;
  color: #FFF;
  font-size: 14px;
  cursor:pointer;
  text-align: center;
  }
  .trigger-button span {
  padding-left: 0;
  }
  .trigger-button.active { 
  background-color: #000;
  color: #FFF;
  }
  .accordion {
  float: left;
  padding: 8px 15px 22px 15px;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('.trigger-button').click(function() {
      $(".trigger-button").removeClass("active")
      $('.accordion').slideUp('normal');
      if($(this).next().is(':hidden') == true) {
          $(this).next().slideDown('normal');
          $(this).addClass("active");
       } 
       });
      $('.accordion').hide();
  </code></pre>
  
  <p>Thanks in advance. </p>