[Request] Glossary and/or FAQs

[mikeh]

A FAQ plugin would be brilliant!

I had the same plan and this ( http://getsimple.dare-is.nl/faq/) is what I have so far ...

Put next jQuery code in header

Code:

$('#faqs span').each(function() {
    var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();
    tis.click(function() {
        state = !state;
        answer.slideToggle(state);
        tis.toggleClass('active',state);
    });
});

Put next code in CSS

Code:

#faqs { position:relative; margin-left:10px;}
#faqs span {
    background: url(images/icon_plus.jpg) no-repeat left center;
    display: block;
    cursor:pointer;
    font-size: 15px;
    font-weight: normal;
    color: #3a3a3b;
    letter-spacing: -1px;
    padding: 6px 0 6px 26px;
    margin: 0 0 0 -10px;
}
#faqs span:hover    { color:#0099CC;}
#faqs span.active { color:#0099CC; background: url(images/icon_minus.jpg) no-repeat left center; }
#faqs div { height:0; overflow:hidden; position:relative; }
#faqs div p { position:relative; }

Create new page (example 'FAQ'), press button code and copy/paste next HTML code into it ...

Code:

<h1>Frequently Asked Questions</h1>
<div id="faqs">
    <span>Question A Lorem Ipsum?</span>
    <div>
        <p>Massa cum cras pid porttitor? Placerat? Odio. <a href="/">Pulvinar porta nascetur, sit pellentesque!</a>. Magna urna nec adipiscing aenean aliquet pid, ultricies in. Penatibus, mauris ac scelerisque ac a? Nec arcu rhoncus enim non et pulvinar placerat dignissim pulvinar massa hac!</p>
    </div>
    <span>Question B Lorem Ipsum?</span>
    <div>
        <p>Scelerisque vel augue adipiscing enim mauris integer lundium odio penatibus nisi lacus. Magna etiam platea scelerisque! Auctor? Magna turpis lorem tempor. Massa adipiscing, elementum, magna! Amet placerat eros nec scelerisque! Porta! Elementum placerat, et cras placerat sit, porta natoque, pellentesque urna.</p>
    </div>
    <span>Question C Lorem Ipsum?</span>
    <div>
        <p>Massa cum cras pid porttitor? Placerat? Odio. <a href="/">Pulvinar porta nascetur, sit pellentesque!</a>. Magna urna nec adipiscing aenean aliquet pid, ultricies in. Penatibus, mauris ac scelerisque ac a? Nec arcu rhoncus enim non et pulvinar placerat dignissim pulvinar massa hac!</p>
    </div>
</div>

The only thing you have to do is to alter the text. Not brilliant, but it works for sofar. Next step was to put text into a XML file. Hope some code is usefull for Mikeh.

Thanks! I like what you did with the jquery and I will incorporate that coding! Thanks for your help