By default the Collapsible Panel widget is open when the web page loads in a browser. You can, however, change the status of the panel if you want the panel to be closed when the page loads.
Set the contentIsOpen option
in the constructor as follows:
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", { contentIsOpen: false });
</script>
You can also check the status of the panel with the isOpen function. The following code returns true if the panel is open and false if it is not:
<script type="text/javascript">
function getStatus(){
var xx = CollapsiblePanel1.isOpen();
document.form1.textfield.value = xx
}
</script>
</head>
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabIndex="0" onclick="getStatus();">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<form id="form1" name="form1" method="post" action="">
<input name="textfield" type="text" id="textfield" value="a" size="50" />
</form>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
//-->
</script>
Setting the default collapsed state by adding the script section as described might not work if you added the collapsible panel using the Dreamweaver insert menu. That menu item adds this script section automatically to the end of your page, and you need to edit that code, rather than add it again, to change the default display state.Donald Booth said on Apr 25, 2007 at 10:52 AM :
After inserting the widget, look for this at the bottom of your page's source code:
<script>
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
</script>
Edit that code, adding ", { contentIsOpen: false }" (without quotes), or replace that entire script section with the code in the instruction above:
<script>
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", { contentIsOpen: false });
</script>
The Property Inspector for the Collapsible Panel has a dropdown that allows the default state to be set. That will add or remove the { contentIsOpen: false } option in the constructor.dynchuck said on Apr 28, 2007 at 5:13 AM :
Click on the widget name in the blue outline to get the widget PI.
Let us know if that isn't working for you.
Thanks,
Donald Booth
Adobe Spry Team
Don't bother using this yet on an Intel Mac. It causes dreamweaver to crash. Cannot believe they released it.Donald Booth said on Apr 30, 2007 at 9:56 AM :
Hi Dynchuck,dynchuck said on May 7, 2007 at 6:19 AM :
Can you be more specific as to what is causing Dreamweaver to crash for you? We are interested in seeing if this could be reproduced.
Thanks,
Donald Booth
Adobe Spry Team
The behavior listed below will cause DW CS3 to crash on MACTEL at various points. It took a little bit of trial an error to find the offending item. Disabling it stabilized Dreamweaver.MingTheMerciless said on Jun 6, 2007 at 9:42 AM :
So far, it works on a Mac G5.
PHP autonumbered records
With this server behavior you can add record numbers in a Repeat Region.
It will respect the previous number if you are using DW's Navigation Bar to move across the records.
http://www.tecnorama.org/extensions
I have found that the Spry Tabbed widget crashes Dreamweaver CS3 (and completely broke it only way to get back in is to reinstall) and exhibits the same behavior on Dreamweaver MX.
System Alienware M9700 Laptop (my portable development tool of choice) running XP Pro 2gb memory, 160gb hard drive space AMD Proc.
Error occurs when I attempt to open the TabbedPanels.css for editing. First time I used it I was able to get in started editing and spent maybe 20 minutes testing configs for the page. Dreamweaver crashed and from that point it all went down hill. DW CS3 would not open (click on DW CS3 and it would start to load and then crash with a .js file error) rebooting did not help problem still exsisted. I tried opening the project in my Old version of DW (MX) loaded the project successfully had the web page open (I only work in the Code interface I never use the WYSIWYG interface) went to open the .CSS file and crashed DW MX.
Reinstalled DW MX first and ran into a locked file (after I had rebooted so there should have been NO locked files) in "C:\Program Files\Macromedia\Dreamweaver MX\JVM\lib" called rt.jar rebooted again no avail. Finally forced DW MX to install and same problem exsists. Reloaded DW CS3 and again same problem as above with a locked file in the JVM lib folder. Reinstall does give me back functionality but sadly I must disable the Spry tools and not even attempt to call them.
jonmichael
said on
Jun 6, 2007
at
10:27 AM :
I believe this problem has been fixed internally and happens with that specific file because its file size is near some magic number that triggers the crash. The workaround is to either pad the CSS file with a couple/few spaces, or remove the comments in the CSS file so that your file size isn't near that magic number.skyhawkguru said on Jul 13, 2007 at 7:25 AM :
What the number is, I don't actually know.
Is it possible to designate specific panels within a Collapsible Panel Group to be open or closed? There might be an occasion where one or more of my panels are empty.digitalhecht said on Feb 13, 2008 at 5:15 PM :
I have just discovered the same behavior outlined above MingtheMerciless. The workaround suggested by jonmichael worked: I removed ALL comments from the CSS files and the crashes stopped. However, as these CSS files are generated BY Dreamweaver when working with Spry widgets, I find this inconvenience collosally lame. The solution for me at this point is to go into C:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\Shared\Spry\Widgets, copy and paste all CSS files for backup, then delete all comments from each widget's corresponding CSS file. Seems like an easy fix for Adobe in the next update.aquo.com said on Mar 11, 2008 at 3:18 PM :
I have the same question as skyhawkguru posted earlier, but I have not been able to find a solution.kinblas said on Mar 11, 2008 at 3:54 PM :
I have a set of pages that use CollapsiblePanelGroup. By default they are set to be closed when the page is loaded. However, I would like to designate one panel as open at loading.
Is this possible?
You can find the example here:
http://www.profitpt.com/supply_chain_planning.asp
Thanks in advance for any assistance!
There is no constructor option for specifying which panels are opened or closed initially. They are either all open, or all closed.aquo.com said on Mar 11, 2008 at 4:53 PM :
A workaround is to add the "CollapsiblePanelOpen" class name to the panels you want open. For example:
<div class="CollapsiblePanelGroup">
...
<div class="CollapsiblePanel CollapsiblePanelOpen">
...
</div>
...
</div>
--== Kin ==--
Kin that was too easy and works like a charm.kinblas said on Mar 19, 2008 at 9:56 PM :
Thank you!!
:)
A common question folks ask is how do I add open/closed arrow indicators to my collapsible panel tabs if I'm already placing a background-image on my CollapsiblePanelTab?
The trick is to add an extra container *INSIDE* the collapsible panel tab, and use CSS contextual selectors to automatically switch the images for you.
Whenever a collapsible panel is opened or closed, the widget programatically places a CollapsiblePanelOpen or CollapsiblePanelClosed class on the top-level element of the widget. This means that you can style your tabs with the open arrow by default, and then use a CSS rule that uses .CollapsiblePanelClosed as part of its contextual selector:
<style>
...
.CollapsiblePanelTab div {
margin: 0;
padding: 2px 2px 4px 36px;
background: url('../demos/images/down_arrow.gif') no-repeat left 50%;
}
.CollapsiblePanelClosed .CollapsiblePanelTab div {
background: url('../demos/images/right_arrow.gif') no-repeat left 50%;
}
...
</style>
...
<div id="cp1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab>
<div>My Tab Title</div>
</div>
<div class="CollapsiblePanelContent">
...
</div>
</div>
You'll notice that this same style is used to give the accordion it's arrow indicators in the products demo:
http://labs.adobe.com/technologies/spry/demos/products/index.html
--== Kin ==--
RSS feed | Send me an e-mail when comments are added to this page | Comment Report
Current page: http://livedocs.adobe.com/en_US/Spry/1.4/WS60F14D91-B45B-4eba-8DA7-2D7A7649D7CB.html
Comments
Comments are no longer accepted for Spry 1.4. Spry 1.6 is the current version. To discuss Spry 1.4, please use the Adobe forum.