jQuery-FAQ Plugin Test

Here we are showing how the script can handle raw markup, adding the classes on the fly
Also showing the use of "noLinks" to keep from adding the +/x links to the second section
In this case, all the containers - div, ul, fieldset, paragraph - have a class of 'myfaq', and we simply call
$('.myfaq').makefaq();
to apply it to all of them at once!

Simple nested divs

This set is simply divs, no class preassigned or anything!... see the source:

<div>
<div>This set is simply divs, no class preassigned or anything!... see the source: </div>
<div>
<p><div class="myfaq"></p>
<p><div><br>
<div>This set is simply divs... see the source: </div><br>
<div>This should be an answer</div> <br>
</div></p>
<p><div><br>
<div>How is it working? </div><br>
<div>The faq script is adding the classes to our markup for us</div> <br>
</div></p>
<p><div><br>
<div>This is a question </div><br>
<div>This should be an answer</div> <br>
</div></p>
<p><div><br>
<div>This is a question </div><br>
<div>This should be an answer</div> <br>
</div></p>
<p></div></p>
</div>
</div>

<div>

How is it working?

The faq script is adding the classes to our markup for us

How does it do that?

It looks for children of the element that is initially called by makefaq(),
and sets up the classes as needed

What does that code look like?

// first, we find the children of the faq container that are not <a> links
var faqch = $(this).children('*:not(a)');
// then we add the class of "faq" to those children
$(faqch).addClass('faq');
// the first element of any kind inside the 'faq' gets the class of 'qq'
$('.faq > *:first-child').addClass('qq');
// all other elements get a class of 'aa'
$('.faq > *:not(.qq)').addClass('aa');
// find the all the 'qq' in the current faq container
var fqq = $(this).children().children('.qq');
if the class is not 'noLinks', add the links!
var fcl = $(this).attr('class');
if (!(fcl.match('noLinks'))){
$(sh).insertBefore(fqq);
//$(sh).prepend($(this).children($('.faqList:not(.noLinks) > .qq'))); };

UL / LI with <p> for question and answer, no x/+ links shown

This is a <ul> list with the class of 'noLinks' assigned, no classes on child elements

and hey, no links !
See the markup
<ul class="noLinks myfaq">

<li>
<p>This is a <ul> list with the class of 'noLinks' assigned, no classes on child elements</p>
<p>and hey, no links ! </p>
</li>

<li>See the markup
<p> <ul class="noLinks myfaq"></p>
<p><li><br>
<p>This is a &lt;ul&gt; list with the class of 'noLinks' assigned, no classes on child elements</p><br>
<p>and hey, no links ! </p><br>
</li></p>
<p><li>See the markup<br>
<p>This should be an answer</p><br>
</li></p>
<p><li><br>
<p>This is a question</p><br>
<p>This should be an answer</p><br>
</li></p>
<p></ul></p>
</li>

<li>
<p>This is a question</p>
<p>This should be an answer</p>
</li>
</ul>
This is a question

This should be an answer

Fieldset container

Classes preassigned in markup, works either way

This section has all the classes preassigned...

... and it still works!

This is another question - it loads open with class oo

This is another answer - loaded open

See the markup

<div class="faq">
<div class="qq">
This section has all the classes preassigned...
</div>
<div class="aa">
... and it still works!
</div>
</div>

<div class="faq oo">
<div class="qq">
This is another question - it loads open with class oo
</div>

<div class="aa">
This is another answer - loaded open
</div>
</div>

<div class="faq">
<div class="qq">
See the markup
</div>
<div class="aa">
--markup--
</div>
</div>

<div class="faq">
<div class="qq">
This could be a question. Wanna bet?
</div>
<div class="aa">
Nope! You lose.
</div>
</div>

</div>

This could be a question. Wanna bet?

Nope! You lose.

<p> container with <span> for questions / answers

This is a <span> with nested spans inside, no preassigned classes Something else This is a question, loaded open with class "oo" This is the answer