contentgrrl

I am conTENT. My work is CONtent.

divaFAQ: style and grace in collapsible Q&A

Posted by contentgrrl on December 26, 2007


Months ago, I searched high and low for a script to help me show and hide the answers to our frequently asked questions (FAQs). I didn’t want to program it myself. Ideally, it would work in Macromedia Dreamweaver, but also use standards-compliant, W3C-valid xHTML markup, friendly JavaScript, and CSS. And since we often break down questions by category, multiple sets of Q&A per page had to be possible.

At first the best I found was tjkdesign.com’s Perfect FAQ, toggling show/hide elements using Definition Lists and the DOM. Thierry and T.J. Koblentz offered it in easyFAQ, but then I had trouble applying the script to a page based on our Dreamweaver site templates, and had some other suggestions. Luckily great minds think alike. Thierry and E. Michael Brandt of Valley Web Designs (my heroes) were collaborating on a new version of the product, and asked me to beta test. Thierry was recently scooped up by Yahoo! so is now “emeritus,” offering vital input and ideas but leaving the day-to-day activities and programming to EMB.

divaHTMLI am downright ecstatic to have found the result of their collaboration, divaHTML’s divaFAQ, and happy to testify that it beats out every other kid on the block!

Here’s why:

  • No one else lets you toggle the display of multiple FAQ sections per page.
  • Nobody else gives you the option to let users print the FAQs page with either selected answers or all answers shown.
  • Nobody else does all this at such a reasonable price.
  • Nobody else does all this while making it so easy to implement and maintain, even in a template environment, without a lot of coding.

We even include images, paragraphs and bullet lists within the definition tags, and it turns out very clean, user-friendly, and customizable. We did some easy tweaks in the well-commented CSS, and we have more pages to convert to definition lists. But my boss likes the buttons and my most verbal coworkers are thrilled with the results.

They keep adding new products too: a standards-compliant pop-up window divaPOP, and “you are here” highlighting to virtually any menu in divaGPS. …And now they’ve updated divaFAQ with the ability to have multiple definitions (DDs) per definition term (DT). OK, I’m not sure how I’m going to use that, but it speaks volumes about their support and dedication.

One thing I learned the hard way is that divaFAQ cannot be added directly to Templates, rather it is to be added to their Children. Not a problem; with the Extension installed in Dreamweaver, that’s a couple of clicks away using the friendly toolbar button and wizard.

If you’re not a Dreamweaver fanatic, it’s still easy to use by simply setting up and naming your Definition Lists, copying the divaFAQ files and scripts into the right place.

I use the collapsible divaFAQs for not only Q&A, but also for lists of recent software support messages, and to organize information about our Webinars.

Advertisements

2 Responses to “divaFAQ: style and grace in collapsible Q&A”

  1. Howard L. Funk said

    Amen to all of the above. I must add that the technical support is superb – nonpareil. Rapid and accurate. I recently needed to find a way to handle nested FAQ’s which is not part of the standard product. Within a couple of hours I was sent a file with some CSS head tags and complete instructions. Absolutely awesome support. I can recommend this product without reservation – except maybe that the price is too low for such great performance and support!

  2. contentgrrl said

    Thank you, Howard! I completely agree.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: