Alternative to StartExpandCollapse tag -- Questions module example

[michelG]

If you are like me and do not like the behavior of the StartExpandCollapse tag -- which adds an anchor link to the collapsable element and always jumps to it -- here is an alternative using a simple javascript.

Code: Select all

{literal}
<__script__ type="text/JavaScript">
<!--
// TO COLLAPSE/EXPAND ELEMENT
function expand(ind)

{
 e = document.getElementById("ex_"+ ind);
 if (e.style.display == 'none')
 {
   e.style.display = 'block';
 }
 else if (e.style.display == 'block')
 {
   e.style.display = 'none';
 }
}
//-->
</__script>
{/literal}

{foreach from=$items item=entry}
	<div class="QandA-Question">
		<a href="javascript:expand({$entry->id})">{$entry->question}</a>
	</div>
	<div id="ex_{$entry->id}" style="display:none" class="QandA-Answer">
		{if $entry->answer}{$entry->answer}
		{else}<p>Question to be answered soon.</p>
		{/if}
	</div>
	<p class="QandA-RecordDetails">Category: {$param_category} | Question from {$entry->author} on {$entry->created|date_format}</p>
{/foreach}

It can also be helpful for those facing an issue of variables that -- it seems -- cannot be converted as strings in PHP 5.2.0+ as described in the following post:


http://forum.cmsmadesimple.org/index.php/topic,16483.msg81626.html#msg81626




michel

[calguy1000]

This should be trivial with jquery....
(untested, but should be close)

Code: Select all

{literal}
<__script__ type="text/JavaScript">
<!--
document.ready(function() {
  jQuery('.expandcollapse').click(function() {
     this.toggle('slow');
     return false;
  });
});
//-->
</__script>
{/literal}

{foreach from=$items item=entry}
	<div class="QandA-Question">
		<a class="expandcollapse" href="#">{$entry->question}</a>
	</div>
	<div id="ex_{$entry->id}" style="display:none" class="QandA-Answer">
		{if $entry->answer}{$entry->answer}
		{else}<p>Question to be answered soon.</p>
		{/if}
	</div>
	<p class="QandA-RecordDetails">Category: {$param_category} | Question from {$entry->author} on {$entry->created|date_format}</p>
{/foreach}

[jmcgin51]

thanks to you both, Calguy and nkoren!  The "jump" in the original startExpandCollapse tag has always irritated me, but I never had the time/inclination to fix it.

Perhaps one of these fixes should be applied to the startExpandCollapse tag in a future CMSMS release?  The disadvantage (I think, not having looked at the sEC code) is that both of these solutions require Javascript turned on, while the original code does not?  Or maybe the original does...

[blast2007]

Only for reference: see also this related topic
http://forum.cmsmadesimple.org/index.php/topic,5385.msg96710.html#msg96710

regards
blast

[JohnnyB]

http://forum.cmsmadesimple.org/index.php/topic,5385.msg96710.html#msg96710

...link should point to http://forum.cmsmadesimple.org/viewtopic.php?f=4&t=5385 since forum changes