Hello, I'm using the accordion effect for questions and categories.
I'm also using the unique classes so I can display an arrow with css.

I'll try explain what's happening to the categories, although the same happens to the questions.

While clicking the header of a category, a class is added to the <h5> element, from <h5 class="faq-header"> to <h5 class="faq-header faq-category-qa-visible">
Clicking on another category, the questions are collapsed correctly, but the class faq-category-qa-visible isn't reset. So the css arrow keeps pointing down.

I've added the following to faq.js file on line 175 $('div.faq-qa-header .faq-header').removeClass('faq-category-qa-visible');.
While it resets the classes for the headers correctly, it does not reset it while clicking the current header.

I sure this is not a good solution for the problem. Regarding the questions the same happens, so I've added the following on line 152 $('div.faq-dt-hide-answer').removeClass('faq-qa-visible');.

I'm attaching a patch with the changes, but I'm leaving it completely open for anyone with a better option. maybe replacing faq-category-qa-visible with faq-category-qa-hidden would be a better alternative? We can't use the collapsed class without breaking a lot of sites :P

Thank you stella for this great module!

CommentFileSizeAuthor
#9 655216_faq_js_v2.patch1.29 KBjolidog
#1 655216_faq.js_.patch889 bytesjolidog

Comments

jolidog’s picture

jolidog commented
StatusFileSize
new 655216_faq.js_.patch889 bytes
jolidog’s picture

jolidog commented
Title: reseting classes for accordion effect » Reseting classes for accordion effect
Status: Active » Needs review

Marking this as needs review, perhaps someone will test it and finds a better way of dealing with this.
Is this a bug report? Should it be a feature request instead?

stella’s picture

stella commented
Status: Needs review » Postponed (maintainer needs more info)

I think this is a duplicate of #482990: Toggle expanded class after slideToggle() and has been released already. What version of the module are you using? Can you retest with the latest version (6.x-1.11) and confirm whether it is working or not.

jolidog’s picture

jolidog commented
Status: Postponed (maintainer needs more info) » Active

Hello, I was using version 1.10, that issue was corrected in version 1.9.
Anyway I've updated to 1.11 and verified the issue I've described is still present.

This happens while using the accordion effect, for both questions and categories.
I've updated a beta site, so it does not include the patch, so you can check and compare with the online site.

BETA Without the patch:
http://beta.gruponett.com/rais/utilidades/apoio-juridico

ONLINE With the patch
http://gruponett.com/rais/utilidades/apoio-juridico

Just click on several questions, inside the same category, or on several categories to see what I'm trying to explain when I say:

While clicking the header of a category, a class is added to the <h5> element, from <h5 class="faq-header"> to <h5 class="faq-header faq-category-qa-visible">
Clicking on another category, the questions are collapsed correctly, but the class faq-category-qa-visible isn't reset. So the css arrow keeps pointing down.

By the way, I'm sure there is a better way of dealing with this behaviour, but I'll leave that for someone who actually knows jquery :D
Thank you!

stella’s picture

stella commented
Version: master » 6.x-1.11
Status: Active » Needs review
FreeFox’s picture

FreeFox commented

Same problem here. I added the two lines and ... the problem was solved, however ...

When you open a question => icon switches
When you close the same question => icon stays open

So, there is something missing.

I don't know what because I'm not good in js so I hope you guys & girls will find a solution.
Thanks in advance
Jan

FreeFox’s picture

FreeFox commented
Status: Needs review » Needs work
jmauricio’s picture

jmauricio commented 
//Removed this line    
//  $(this).toggleClass('faq-qa-visible'); 

//Added these
if ($(this).hasClass('faq-qa-visible')) {
  $(this).removeClass('faq-qa-visible');
}
else {
  $('div.faq-dt-hide-answer').removeClass('faq-qa-visible');
  $(this).addClass('faq-qa-visible');
}

I'm sure that there are better ways to do this, but did the trick for me!

jolidog’s picture

jolidog commented
Title: Reseting classes for accordion effect » Reseting visibility classes for accordion effect
Status: Needs work » Needs review
StatusFileSize
new 655216_faq_js_v2.patch1.29 KB

Hi there, I've used jmauricio code for the answers, applied it to the category classes to and created a revised patch.

Could someone test this?
It's working for me...

wils.solutions’s picture

wils.solutions commented

Hi,

Please, how do you display the Icons?

Blz cara, bom ver Brazuca por aqui hehehee...abraços.

jolidog’s picture

jolidog commented

Hi There!

You will have to use css, and apply diferent background images according to the class activated by the javascript on the element.

It's a good ideia to use a css sprite image so it doesn't have to make a call to the server when the class changes.

Here is a link to a good article on the subject: http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-te...

Have fun!

bschilt’s picture

bschilt commented

I have tested the patch in #9 and it checks out fine. The problem described in the original issue is fixed.

jolidog’s picture

jolidog commented

Could you please mark the issue has reviewed and tested? I can't mark it since I made the patch... :)

Thank you!

bschilt’s picture

bschilt commented
Status: Needs review » Reviewed & tested by the community
stella’s picture

stella commented
Status: Reviewed & tested by the community » Fixed

Committed, with a few changes. It didn't work in the scenario where the user clicked on the open question again to close it. It also broke the css classes when not using the accordion effect.

Status: Fixed » Closed (fixed)

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

stella’s picture

stella commented

Released in 6.x-1.12.

stella’s picture

stella commented

Released in 6.x-1.12.