[TYPO3-english] Modern FAQ Toggle Open and Close Single item Bug Fix

[Finees Mendez]

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!