Databases
StackOverflow2013
Postsdbo
POUsing progressive disclosures within JQuery Tools tab
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing progressive disclosures within JQuery Tools tab
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USAlex
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COPS. The same script works fine OUTSIDE of tabs. Go figure!
      singulars
      1. POUsing progressive disclosures within JQuery Tools tab
      1. USAlex
    2. COThere is no hyperlink in section h3 of your lists (you select .sys_expandable li h3 a but there is no a in your example...). Could you please check?
      singulars
      1. POUsing progressive disclosures within JQuery Tools tab
      1. USSamuel Caillerie
    3. COAh, you're right - I left out the beginning of the script; $('.sys_expandable li h3').wrapInner('<a href="#na"></a>'); $('.sys_expandable div.sys_section').hide(); These are the lines that add the link.. Please remember I am loading JQuery and JQueryTools before hand.
      singulars
      1. POUsing progressive disclosures within JQuery Tools tab
      1. USAlex
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload