Close faq when clicking on next link
Liliplanet - June 24, 2009 - 12:34
| Project: | Frequently Asked Questions |
| Version: | 6.x-1.x-dev |
| Component: | User interface |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | fixed |
Description
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
#1
I can see an advantage of this and the existing method, so if implimented can it be switchable :)
#2
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...
#3
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.
#4
This is actually "Accordeon" UI Pattern. Very nice feature indeed.
#5
#6
Is it true this tweak wont work at version 5.x?
I tried but it just expanded all FAQ's
#7
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.