Just love the faq.module .. I have a little support question please ..

As my site has a lot of question and every time a user clicks a link to open the answer (with toggle), they have a lot of answers open and then have to scroll down to the next one.

Is it perhaps possible that when they click on the next link that the previous answer closes? Just to keep it nice and tight :)

Look forward to any reply, and thank you.
Lilian

CommentFileSizeAuthor
#3 faq.js_.patch1.12 KBgaele
#3 faq.css_.patch288 bytesgaele

Comments

Anonymous’s picture

Anonymous (not verified) commented

I can see an advantage of this and the existing method, so if implimented can it be switchable :)

jolidog’s picture

jolidog commented

I would also be very interested in this, one could categorize the questions and open the categories in another page, but this solution has it's uses... this should also work for the categories showing on the same page, selecting one would close the previous...

gaele’s picture

gaele commented
StatusFileSize
new faq.css_.patch288 bytes
new faq.js_.patch1.12 KB

This is working for me:

1. Add this to faq.css:

.faq .collapsible {
	display: block;
}

.faq .collapsed {
	display: none;
}

2. In faq.js, starting at line 218, change this:

if (Drupal.jsEnabled) {
  $(document).ready(function () {
    // hide/show answer to question
    $('div.faq-dd-hide-answer').hide();
    $('div.faq-dt-hide-answer').click(function() {
      $(this).next('div.faq-dd-hide-answer').slideToggle();
      return false;
    });


    // hide/show q/a for a category
    $('div.faq-qa-hide').hide();
    $('div.faq-qa-header .faq-header').click(function() {
      $(this).parent().next('div.faq-qa-hide').slideToggle();
      return false;
    });

with this:

if (Drupal.jsEnabled) {
  $(document).ready(function () {
    // hide/show answer to question
    $('div.faq-dd-hide-answer').addClass("collapsible collapsed");
    $('div.faq-dt-hide-answer').click(function() {
      $('div.faq-dd-hide-answer').not($(this).next('div.faq-dd-hide-answer')).addClass("collapsed");
      $(this).next('div.faq-dd-hide-answer').toggleClass("collapsed");
      return false;
    });


    // hide/show q/a for a category
    $('div.faq-qa-hide').addClass("collapsible collapsed");
    $('div.faq-qa-header .faq-header').click(function() {
      $('div.faq-qa-hide').not($(this).parent().next('div.faq-qa-hide')).addClass("collapsed");
      $(this).parent().next('div.faq-qa-hide').toggleClass("collapsed");
      return false;
    });

Works for both questions and categories. No fancy sliding, though, and not configurable.

What it does: instead of a slideToggle on the clicked question it applies the default Drupal classes collapsible/collapsed to all questions.

crea’s picture

crea commented

This is actually "Accordeon" UI Pattern. Very nice feature indeed.

stella’s picture

stella commented
Status: Active » Needs review
Joerio’s picture

Joerio commented

Is it true this tweak wont work at version 5.x?

I tried but it just expanded all FAQ's

stella’s picture

stella commented
Status: Needs review » Fixed

I've added this to the Drupal 6 branch, and it'll be included in the next release. I also made it configurable - so you can have the current behaviour or the new option.

With Drupal 7 almost upon us, I won't be adding this feature to the Drupal 5 branch as it is now feature frozen.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

stella’s picture

stella commented

Released in faq 6.x-1.9.