title: How to use jQuery to add "active" class to first "div.content"? (and include it in existing script)
body: <p>I need to add an active class to the following div tag:</p>
  
  <pre><code>&lt;div id="panel1" class="content table-scroll [active]"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>I'm not sure how to go about this, but I saw a similar question here <a href="https://stackoverflow.com/questions/11852425/php-add-class-to-html-div">PHP add class to html div</a> but I'm not really understanding that.</p>
  
  <p>I was using jQuery before, but it wasn't working for me. I have this code which toggles the text in an A tag on click:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function ($) {
      function toggleText() {
          $('dl.accordion div.content.active').prev().find('span.click').text('click to close');
          $('dl.accordion div.content:not(.active)').prev().find('span.click').text('click to open');
      }
      toggleText();
      $('dl.accordion').on("click", "dd a", function (event) {
          setTimeout(toggleText, 25);
      })
  });
  &lt;/script&gt;
  
  
  $("dl.accordion div.content:first-child").addClass("active"); // not sure where to add this or if it will even work (it didn't work by itself in a dom ready)
  </code></pre>
  
  <p>Here is the actual code if needed (as you can see I'm manually adding the active class here):</p>
  
  <pre><code>&lt;dl class="accordion" data-accordion&gt;
  &lt;dd&gt;
  &lt;a href="#panel1"&gt;March, 2014 &lt;span class="click hide-for-small-only show-for-medium-up"&gt;click to open&lt;/span&gt;&lt;/a&gt;
  &lt;div id="panel1" class="content table-scroll active"&gt;
      &lt;table&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th width="40%"&gt;Date&lt;/th&gt;
                  &lt;th width="25%"&gt;Days&lt;/th&gt;
                  &lt;th width="25%"&gt;Time&lt;/th&gt;
                  &lt;th width="10%"&gt;Register&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;March 1st, 4th, April 1st, 4th&lt;/td&gt;
                  &lt;td&gt;Tuesdays&lt;/td&gt;
                  &lt;td&gt;6pm to 9:30pm&lt;/td&gt;
                  &lt;td class="button-center"&gt;&lt;a href="register.html" class="button tiny radius"&gt;Register&lt;/a&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;March 1st, 4th, April 1st, 4th&lt;/td&gt;
                  &lt;td&gt;Long Weekends&lt;/td&gt;
                  &lt;td&gt;9am to 2:45pm&lt;/td&gt;
                  &lt;td class="button-center"&gt;&lt;a href="register.html" class="button tiny radius"&gt;Register&lt;/a&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;/dd&gt;
  &lt;/dl&gt;
  </code></pre>
  
  <p>Any ways jQuery wasn't doing the trick so I'm interested in doing it with PHP as well, I have a list of DD tags on the page within the DL tag, so I only need the active class to be applied to the first DD. I'll be using a CMS to add and remove these so I can't manually add the active class anymore or use the ID tag as that will be changing too.</p>
  
  <p>All help is appreciated, thanks =)</p>