How to create a Spry Collapsible Panel within a repeat region

By Chris on July 20, 2011 in php, Web Design Snippets
1
0

I had to create an FAQ section on a website recently so this solution came in very handy as the standard DW collapsible panel does not work if you put it inside a repeat region. Why? because each panel needs a unique id number each time to make the open/close work.

The solution is to create a php counter that increases by one each time the region is repeated and put a bit of php code that echoes this after ‘div id=”CollapsiblePanel’ in the panel code and also after ‘var CollapsiblePanel’ in the script.

1. Put the counter code at the top of the page after the <body> tag: ‘<? php $counter = 1; ?>‘ This defines the variable ‘counter’.

2. Move the Spry javascript that usually appears at the foot of the page to within the repeat region itself.

3. Put <?php echo $counter; ?> after the div id and in the script so the code looks like this.

Top line of Spry Collapsible Panel: <div id=”CollapsiblePanel<?php echo $counter; ?>“>

Javascript:   <script type=”text/javascript”>
var CollapsiblePanel<?php echo $counter; ?> = new Spry.Widget.CollapsiblePanel(“CollapsiblePanel<?php echo $counter; ?>“, {contentIsOpen:false});
</script>

4. Put the php counter-increase code ‘<?php $counter++; ?>’ just before the end of the repeat region.

And that’s it. If your recordset is called rs_faq your code should look something like this:

<?php do { ?>

<div id=”CollapsiblePanel<?php echo $counter; ?>”>
<div tabindex=”0″> <?php echo $row_rs_faq[‘question’]; ?></div>
<div><?php echo $row_rs_faq[‘answer’]; ?></div>
</div>

<script type=”text/javascript”>
var CollapsiblePanel<?php echo $counter; ?> = new Spry.Widget.CollapsiblePanel(“CollapsiblePanel<?php echo $counter; ?>”, {contentIsOpen:false});
</script>

<?php
$counter++;
?>

<?php } while ($row_rs_faq = mysql_fetch_assoc($rs_faq)); ?>

1 Comment

  1. uuuuffff October 28, 2012

    Thks man…. awesome idea…

Leave a reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.