Copy link to clipboard
Copied
After inserting 3 Collapsible Panels on my web page, I want to set the default state of the panels so that when the page loads, panel 1 is open and panels 2 and 3 are closed. I used this code from "Set the default state of the panel" Spry Help page:
<script type="text/javascript">
var cp1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", { contentIsOpen: true});
var cp2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", { contentIsOpen: false });
var cp3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", { contentIsOpen: false });
</script>
But all panels remain open on page load.
Then I tried editing the default code that is inserted by Dreamweaver Insert > Spru > Spry Tabbed Panels :
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", contentIsOpen: false);
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", contentIsOpen: false);
//-->
</script>
That didn't work either. Any advice on what is wrong here? Other than the wrong default state, the panels are working correctly.
Copy link to clipboard
Copied
Thank you. I figured out the problem, and the default panel states are working correctly now.
Next step: I want to use the open and close functions to toggle the state of the other panels so when the user clicks one tab to open a panel, the other two close. I'll try to get this working, but may be back to this forum in case I need help!