If you have the latest the Modern FAQ
extension, you know it works beautifully, because it opens each single item
individually or opens/closes all items simultaneously. But what about
when you simply want to CLOSE a single item. Modern FAQ simply is
frozen, you can only close ALL at once, but not one at a time. So here
is the fix:
First, the method
When you click the "Question", the singleOpen option (initially set to
"true") is sent through the onclick attribute (of the <dt
class="tx-irfaq-dynheader"> HTML tag) to the tx_irfaq_showHideFaq()
function, and hence the "Answer" dynamically opens/appears. But when
you click on the "Question" again, the "Answer" does not
close/disappear because the singleOpen option is was previously set to
"true" (and not changed/updated), and therefore we are simply asking to
open what is already opened; hence we do not get the desired
effect/behavior and seems like nothing happened. What we then need is
for the singleOpen option to change its "true" or "false" status when
we click on a "Question", and thereby allowing the JavaScript to
properly close/open the answer.
Next, the solution
I adopted the approach that the "Show All" and "Hide All" links have
for manually sending the singleOpen option status as either "true" or
"false" to the tx_irfaq_toggleAll() and ultimate tx_irfaq_showHideFaq()
functions. I did however had to rewrite some HTML, some javascript and
alter the default CSS to make it work for my needs.
And now, the code
Below is the updated section of default irfaq html template for the use of
dynamic questions/answers. Notice that I added a link
reference to the plus/minus icon and question; also I no longer need
the onclick="" attribute in the <dt class="tx-irfaq-dynheader">
HTML tag:
<!-- ###TEMPLATE_DYNAMIC### begin
This is the template for dynamic FAQ list.
-->
<div class="tx-irfaq-pi1">
<p>
<a href="javascript:tx_irfaq_toggleAll(true, '###HASH###',
###COUNT###);">###TEXT_SHOW###</a> / <a
href="javascript:tx_irfaq_toggleAll(false, '###HASH###',
###COUNT###);">###TEXT_HIDE###</a>
</p>
<dl>
<!-- ###CONTENT### begin
This is the part of the template substituted with the list of
FAQs:
-->
<!-- ###FAQ### begin
Template for a single FAQ item
-->
<dt class="tx-irfaq-dynheader">
<a id="irfaq_q_###FAQ_ID###_###HASH###"
href="javascript:tx_irfaq_toggleFaq('###FAQ_ID###', ###SINGLE_OPEN###,
'###HASH###');"> ###FAQ_PM_IMG### ###FAQ_Q### </a>
<div class="tx-irfaq-cleaner"></div>
</dt>
<dd
id="irfaq_a_###FAQ_ID###_###HASH###" class="tx-irfaq-dynans-hidden">
###FAQ_A###
###RATING###
</dd>
<!-- ###FAQ### end-->
<!-- ###CONTENT### end -->
</dl>
</div>
<!-- ###TEMPLATE_DYNAMIC### end -->
Here
is the updated javascript tx_irfaq_showHideFaq() function that needs to
be updated in the typo3conf/ext/irfaq/res/toggleFaq.js file. Notice
here that I make use of a new variable "qes_id" to simply alter the
link reference to the question/icon when a user clicks to open/close
the answer:
/**
* shows or hides a FAQ item at a time depending on the given status
*
* @param id the id of the FAQ item to hide or show
* @param show true to show the item, false to hide it
*/
function tx_irfaq_showHideFaq(id, show, hash) {
var qes_id = 'irfaq_q_'+id+'_'+hash; // question
var ans_id = 'irfaq_a_'+id+'_'+hash; //
answer
var img_id = 'irfaq_pm_'+id+'_'+hash; // plus/minus image icon
if (show) {
document.getElementById(qes_id).href =
"javascript:tx_irfaq_toggleFaq('" + id + "', " + !show + ", '" + hash + "')";
document.getElementById(ans_id).className =
'tx-irfaq-dynans-visible';
document.getElementById(img_id).src = tx_irfaq_pi1_iconMinus;
}
else {
document.getElementById(ans_id).className =
'tx-irfaq-dynans-hidden';
document.getElementById(img_id).src = tx_irfaq_pi1_iconPlus;
}
}
Also, because I no longer make use of the <dt
class="tx-irfaq-dynheader"> HTML tag, I eliminated the following
line for the default CSS (typo3conf/ext/irfaq/res/styless.css) of
the extension:
/* .tx-irfaq-dynheader { cursor: pointer; } */
Hopes this helps, because it works beautifully for me! Let me know if you have
any questions. Happy Typo3-ing!
_______________________________________________
TYPO3-english mailing list
TYPO3-english@lists.netfielders.de
http://lists.netfielders.de/cgi-bin/mailman/listinfo/typo3-english
