Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>First, I'd suggest the following structure for your faq's:</p> <pre><code>&lt;div id="faq"&gt; &lt;div class="qa" id="faq_greenandflies"&gt; &lt;span class="q"&gt;What is &lt;a href="#faq_greenandflies"&gt;green and flies&lt;/a&gt;&lt;/span&gt; &lt;div class="a"&gt; Super Pickle! &lt;/div&gt; &lt;/div&gt; &lt;div class="qa" id="faq_redandbadforteeth"&gt; &lt;span class="q"&gt;What is &lt;a href="#faq_redandbadforteeth"&gt;Red and bad for your teeth&lt;/a&gt;&lt;/span&gt; &lt;div class="a"&gt; a Brick &lt;/div&gt; &lt;/div&gt; &lt;!-- More FAQ's here --&gt; &lt;/div&gt; </code></pre> <p>and then defining your jQuery as follows:</p> <pre><code> &lt;script type="text/javascript"&gt; $(function(){ // hide all answers $('div#faq .qa .a').hide(); // bind a click event to all questions $('div#faq .qa .q a').bind( 'click', function(e){ // roll up all of the other answers (See Ex.1) $(this).parents('.qa').siblings().children('.a').slideUp(); // reveal this answer (See Ex.2) $(this).parents('.qa').children('.a').slideDown(); // return true to keep any other click events return true; }); // check location.hash to see if we need to expand one (direct link) $(location.hash).find('.q a').click(); }); &lt;/script&gt; </code></pre> <p>Explanation:</p> <p>(Ex.1)</p> <ul> <li><em>this</em> is the link that was clicked</li> <li>get the element that contains <em>this</em> and has a class of 'qa' (the box that contains both question and answer)</li> <li>select all of its siblings. (we now have all qa's as a jQ object)</li> <li>hide the answers</li> </ul> <p>(Ex.2)</p> <ul> <li><em>this</em> is the line or link that was clicked</li> <li>get the element that contains <em>this</em> and has a class of 'qa' (the box that contains both question and answer)</li> <li>reveal the answer</li> </ul> <p>A <strong>working demo</strong> is <a href="http://yaauie.com/stackoverflow/433802/" rel="nofollow noreferrer">here</a>.</p> <p>This does several things for you:</p> <ul> <li>If a user <a href="http://yaauie.com/stackoverflow/433802/#whiteandrocky" rel="nofollow noreferrer">deep-links to an answer</a>, the answer is automatically revealed</li> <li>If a user clicks on one answer, all other answers are hidden</li> <li>You can give your divs proper ids, so which helps search engine optimization of links to individual answers</li> </ul>
    singulars
    1. This table or related slice is empty.
    1. POGetting my head around jQuery
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USyaauie
    1. USyaauie
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POGetting my head around jQuery
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTDownMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI noticed that although you accepted my answer, your now-implemented page does not use this solution and thus bypasses a user's ability to link directly to an item (from outside the page itself)
      singulars
      1. PO
      1. USyaauie
    2. COI've tried implementing it, but it just won't do anything on my site - can't work out the difference between your code and mine - even when I copy and paste! I'll have to keep trying!
      singulars
      1. PO
      1. USRich Bradshaw
    3. COSeems that if I put any tags inside the answer div then nothing works...
      singulars
      1. PO
      1. USRich Bradshaw
 

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