Question

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.

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.

HOWEVER I am trying to put progressive disclosures within my tabs – and they won’t work at all! I have a bespoke script;

//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);
    }

});

And the HTML;

<DIV class=PLACE id=PLACE1 title=tabs>
<UL class=tabs>
    <LI>
        <A href="#tabone">General Information</A>
    </LI>
    <LI>
        <A href="#tabtwo">Rentals</A>
    </LI>
    <LI>
        <A href="#tabthree">Referrals</A>
    </LI>
</UL>
</DIV>
<DIV class=pane id=tabone>
<DIV class=PLACE id=PLACE2 title=tabone >
    <P>
        <ul class="sys_expandable">
        <li class="sys_expandableContainer">
          <h3>
            Health Partners 
          </h3>
          <div class="sys_section"> 
            <p>
              Health Partners will take steps...
            </p>
          </div>
        </li>
      </ul>
      <ul class="sys_expandable">
        <li class="sys_expandableContainer">

          <h3>
            East Wing external refurbishment
          </h3>
          <div class="sys_section">

            <p>
              The East Wing has been a ....
            </p>
          </div>
        </li>
      </ul>
    </P>
</DIV>
</DIV>
<DIV class=pane id=tabtwo>
<DIV class=PLACE id=PLACE3 title=tabtwo>
    <P>
        Tab two
    </P>
</DIV>
</DIV>
 <DIV class=pane id=tabthree>
 <DIV class=PLACE id=PLACE4 title=tabthree >
    <P>
        Tab three
    </P>
</DIV>
</DIV>

Can anyone see a conflict? I am pulling my hair out over this one!

Thanks in advance to anyone that has a clue.

Answer 1

I have created a fiddle with hyperlink added : http://jsfiddle.net/scaillerie/5GwND/ .

Does it works as you want?