How to create a Spry Collapsible Panel within a repeat region
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
-
Thks man…. awesome idea…
Leave a reply
Leave a Reply
You must be logged in to post a comment.
This site uses Akismet to reduce spam. Learn how your comment data is processed.