Collapsible FAQs

8 posts by 4 authors in: Forums > CMS Builder
Last Post: May 10, 2010   (RSS)

By affinitymc - May 8, 2010

Has anyone succeeded in implementing collapsible FAQs, such as the ones on Dynamic Drive that use javascript? I have an FAQ section set up (using the preset feature in CMSBuilder), where my client can add Q&As, but the javascript requires that each Answer be included in a separate DIV with it's own unique ID. The javascript I am attempting to implement is here:

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

Any help would be greatly appreciated!

Brian

Re: [affinitymc] Collapsible FAQs

By Damon - May 8, 2010

Hi Brian,

You could use a counter to assign a unique ID.

Outside the foreach loop set the variable:
<?php $counter = 1; ?>

Then print it out in the loop:

<?php echo $counter; ?>

And last, before the foreach loop closes, increment the number:

<?php $counter++; ?>

Try that out and see how that works for you.
Cheers,
Damon Edis - interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Damon] Collapsible FAQs

By affinitymc - May 8, 2010

Thanks Damon, it works well, except that in the HEAD section, I still have to list the DIV id's individually...is there any way to include some script that would automate this?

When I have this finished, I will post the code with instructions for others to use.

Brian

Re: [affinitymc] Collapsible FAQs

By Maurice - May 9, 2010

HI affinitymc,

http://www.basicconcepts.eu/faq/

it is easer to use Jquery UI for these things.

Just pm me your email and we will send u a basic setup code for your site if u like.

Greetz Maurice
-------------------------------------------

Dropmonkey.nl

Re: [Damon] Collapsible FAQs

By affinitymc - May 9, 2010


For the Head section, how about just using a separate foreach loop that just outputs the DIV id's?

Give that a shot. If it still isn't working, post your code and let me know what stage you are at so I can take a look.



Hi Damon,

Thanks! Not being a php coder, what might that code look like?

Brian

Re: [Maurice] Collapsible FAQs

By zip222 - May 10, 2010 - edited: May 10, 2010

I second the recommendation for jquery.

it could be done by just adding the following to your file:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript>
$(document).ready(function() {
$('.question').next('.answer').hide();
$('.question').click(function() {
$(this).next('.answer').slideToggle('500');
return false;
});
});
</script>

And in your page, use this format:

<div class="question">
<a href="#">Your Question Goes here</a>
</div>
<div class="answer">
<p>Your Answer goes here.</p>
</div>

Re: [zip222] Collapsible FAQs

By Maurice - May 10, 2010

zipp222

cool code easy and simple mean and lean.

Greetz M
-------------------------------------------

Dropmonkey.nl