title: Using progressive disclosures within JQuery Tools tab
body: <p>Uh boy.. I have a client that wants EVERY bell and whistle going on their pages. Of course I am using JQuery; the original designers have supplied me with various bespoke scripts, however now the requirement list has grown and I have started modifying and adding to the original flat HTML.</p>
  
  <p>The designers appear to have used JQuery UI - but frankly looking at all the functions I think it was over kill as they also supplied bespoke scripts for Cycle, Hover, Chosen. I didn't like the Tabs function as I could not seem to adapt it to the client's new requirements. So I turned to JQUery Tools for my tab solution - which works great.</p>
  
  <p>HOWEVER I am trying to put progressive disclosures within my tabs - and they won't work at all! I have a bespoke script;</p>
  
  <pre><code>//OnClick
  $('.sys_expandable li h3 a').click(function(){
  
      if( $(this).parent().parent().hasClass('active') ){
          $(this).parent().parent().removeClass('active').find('div.sys_section').slideUp(200);        
      } else {
          $(this).parent().parent().addClass('active').find('div.sys_section').slideDown(200);
      }
  
  });
  </code></pre>
  
  <p>And the HTML;</p>
  
  <pre><code>&lt;DIV class=PLACE id=PLACE1 title=tabs&gt;
  &lt;UL class=tabs&gt;
      &lt;LI&gt;
          &lt;A href="#tabone"&gt;General Information&lt;/A&gt;
      &lt;/LI&gt;
      &lt;LI&gt;
          &lt;A href="#tabtwo"&gt;Rentals&lt;/A&gt;
      &lt;/LI&gt;
      &lt;LI&gt;
          &lt;A href="#tabthree"&gt;Referrals&lt;/A&gt;
      &lt;/LI&gt;
  &lt;/UL&gt;
  &lt;/DIV&gt;
  &lt;DIV class=pane id=tabone&gt;
  &lt;DIV class=PLACE id=PLACE2 title=tabone &gt;
      &lt;P&gt;
          &lt;ul class="sys_expandable"&gt;
          &lt;li class="sys_expandableContainer"&gt;
            &lt;h3&gt;
              Health Partners 
            &lt;/h3&gt;
            &lt;div class="sys_section"&gt; 
              &lt;p&gt;
                Health Partners will take steps...
              &lt;/p&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;ul class="sys_expandable"&gt;
          &lt;li class="sys_expandableContainer"&gt;
  
            &lt;h3&gt;
              East Wing external refurbishment
            &lt;/h3&gt;
            &lt;div class="sys_section"&gt;
  
              &lt;p&gt;
                The East Wing has been a ....
              &lt;/p&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/P&gt;
  &lt;/DIV&gt;
  &lt;/DIV&gt;
  &lt;DIV class=pane id=tabtwo&gt;
  &lt;DIV class=PLACE id=PLACE3 title=tabtwo&gt;
      &lt;P&gt;
          Tab two
      &lt;/P&gt;
  &lt;/DIV&gt;
  &lt;/DIV&gt;
   &lt;DIV class=pane id=tabthree&gt;
   &lt;DIV class=PLACE id=PLACE4 title=tabthree &gt;
      &lt;P&gt;
          Tab three
      &lt;/P&gt;
  &lt;/DIV&gt;
  &lt;/DIV&gt;
  </code></pre>
  
  <p>Can anyone see a conflict? I am pulling my hair out over this one!</p>
  
  <p>Thanks in advance to anyone that has a clue.</p>