Collapsible Panel Open/Close

Currently my tab text "See What Everyone's Talking About"
will open and close the panel. I would like to assign an image
inside the panel to also close the panel after it has opened. So,
essentially the current tab would open and close the panel and
clicking on an image in the panel would close the panel. Here's the
code for reference. Any help would be appreciated!
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTabHover">
<a href="##" style="font-weight:bold;
text-transform:uppercase; margin:0; padding:0;
font-size:0.875em;">See What Everyone's Talking About</a>
</div>
<div class="CollapsiblePanelContent">
<p>Select Your Preferred Region</p>
(I want to insert an image here that would close the panel
here)
<ul>
<li>›› <a
href="##">australia</a></li>
<li>›› <a
href="##">brazil</a></li>
<li>›› <a
href="##">canada</a></li>
<li>›› <a
href="##">china</a></li>
<li>›› <a
href="##">germany</a></li>
<li>›› <a
href="##">mexico</a></li>
<li>›› <a
href="##">russia</a></li>
<li>›› <a
href="##">spain</a></li>
<li>›› <a href="##">united
kingdom</a></li>
<li>›› <a href="##">united
states</a></li>
</ul>
<br />
</div>
<script type="text/javascript">

</script>

Did u check out the sample codes? It includes a preview how u
can close and open a panel with a link;
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_panel_sample. htm

Similar Messages

Collapsible Panel open on new page

I am using the Spry Collapsible Panel as a sidebar menu. I
would like to be able to click on a menu link, which takes me to a
new page with the relevant panel staying open on that new page. Is
this possible? If so, how do I make it happen? I am not great with
codes and other jargon, so if someone could help me with "exactly"
what I need to do, it would be most appreciated.
Many thanks,
Caryl

First Include SpryDOMUtils.js in your file;
Than add this script in the head of the page, or include it
in a script.
<script language="JavaScript" type="text/javascript">
//please note, that my SpryDOMUtils.js is packed so i have a
the extra onUNLOAD listener in the code below.
// * Declare vars;
var Spry;
if (!Spry.Utils) Spry.Utils = {};
var coll1; //declare vars outside the function so u can use
then tab panel everywhere
// * This is a addition to the SpryDomUtils.js U can include
it under line #262
// Or leave it in a javascript external / internal
// This function will fire anything when u leave the current
page.
Spry.Utils.addUnLoadListener = function(handler)
if (typeof window.addEventListener != 'undefined')
window.addEventListener('unload', handler, false);
else if (typeof document.addEventListener != 'undefined')
document.addEventListener('unload', handler, false);
else if (typeof window.attachEvent != 'undefined')
window.attachEvent('onunload', handler);
//This function will be used by cookie to check if the value
is allready in the cookie, if so it returns it position
Spry.Utils.CheckArray = function(a, s){
for (i=0; i<a.length; i++){if (a
== s)return i;}return null;
* SPRY COOKIE; HOW TO USE;
* constructor:
Spry.Utils.Cookie(type,string,{name:'cookie_name',path:'/',days:'number'};
* TYPE:
* - create : this creates *saves* the cookie
* : Spry.Utils.Cookie('create','string or
array',{name:'Spry_Cookie'});
* - get : this will return the cookie in array format
* : Spry.Utils.Cookie('get','',{name:'Spry_Cookie'});
* - destory: this will destroy the cookie
* : Spry.Utils.Cookie('destroy','',{name:'Spry_Cookie'});
* - add : this allows u to add value to the cookie with out
creating a whole new string
* it will place the add value behind the older cookie
values, it checks if the value is allready in the cookie,
* if it is, it will NOT add it in the cookie.
* STRING:
* This is the data what u want to store in to the cookie, it
can be an Array or a normal string / var
* OPTIONS:
* - name: : this is the name of the cookie so u can identify
it
* - path: : optional path for the cookie;
* - days: : the amount of days for the cookie to be saved.
Spry.Utils.Cookie = function(type,string,options){
if(type == 'create'){
var expires='';
if(options.days != null){
var date = new Date();
var UTCString;
date.setTime(date.getTime()+(days*24*60*60*1000));
expires = "; expires="+date.toUTCString();
var thePath = '; path=/';
if(options.path != null){
thePath = '; path='+options.path;
document.cookie =
options.name+'='+escape(string)+expires+thePath;
}else if(type == 'get'){
var nameEQ = options.name + '=';
var ca = document.cookie.split(';');
for (var i=0; i<ca.length; i++){
var c = ca;
while (c.charAt(0)==' '){
c = c.substring(1,c.length);
}if (c.indexOf(nameEQ)==0) return
unescape(c.substring(nameEQ.length,c.length)).split(",");
}return null;
}else if(type == 'destory'){
Spry.Utils.Cookie('create','',{
name: options.name
}else if(type == 'add'){
var c = Spry.Utils.Cookie('get','',{name:options.name});
if (typeof string == 'object') {
for (i = 0, str; str = string
, i < string.length; i++) {
if (Spry.Utils.CheckArray(c, str) == null)c.push(str);
}else{
if (Spry.Utils.CheckArray(c, string) == null) c.push(string)
Spry.Utils.Cookie('create',c,{name:options.name});
// * check if we have a panel to set from cookie value
// * becouse we are using spry dom we can also include the
tab construction within this function.
Spry.Utils.addLoadListener(function(){
//becouse cookie GET returns a array we have to add a var
before it to store the data
var tab = Spry.Utils.Cookie('get','',{name:'tabs_history'});
coll1 = Spry.Widget.CollapsiblePanel('ID_OF_PANEL');
if(tab == "open")coll1.open();
else coll1.close();
Spry.Utils.addUnLoadListener(function(){
var classnames =
document.getElementById('ID_OF_THE_PANEL').className;
if(classnames.match("CollapsiblePanelOpen"))var tab =
'open';
else var tab = 'closed';
//destroy old cookie (i want a clean cookie)
Spry.Utils.Cookie('destory','',{name:'tabs_history'});
//setting the new cookie value
Spry.Utils.Cookie('create',tab,{name:'tabs_history'});
</script>
The best way to copy the script is to press the | Quote |
button and copy it out of th quote becouse there are some taggs
used by the forum sofware in it.
If u have placed it in your header u need to do few edits.
im using coll1 as collaps variable name (constructor) if u
use a other, change it to yours.
also change coll1 = new
Spry.Widget.CollapsiblePanel("coll1"); to your desired ID
This will solve your problem ;)
To see it in action on tab panels (where i created it for)
http://www.3rd-eden.com/Spry-it.com/examples/restyled_tabs/
This is option 1. If u want 1 panel to be open on your page
if the user want it. If u want to open a random panel on click
function, u can use:
http://labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.html
SpryURLUtils.js
This will read param's that u send true a url. and responds
to it. U can see it in action with the tab panels in the example
above.
add this in the header of your page; (also include the
SpryURLutils.js)
<script type="text/javascript">
// Grabs the values of the URL parameters for the current
URL.
var params = Spry.Utils.getLocationParamsAsObject();
</script>
and change your constructor like this
<script type="text/javascript">
//sets default as open.
var ac1 = new
Spry.Widget.CollapsiblePanel("myCollapsiblePanel",{contentIsOpen:(params.ac1open
? params.ac1open : true));
</script>
U can add this behind a url to activate it:
<a href="testpage.html?ac1open=true" > test page ac1
open </a>
true is open, and false is closed. ;)
I hope this helps :D

How to make Spry Collapsible Panels open one at a time?

Hello,
I am using CS5 and want to use the spry collapsible panels. What I notice (and I think this wasn't the case in cs3) is that all panels can be open at the same time. I don't want that happen. I only want one panel to be open at a time. If someone clicks on a panel that is closed, I want the current panel to close and the one they clicked on to open. I don't want multiple panels to be opne at once. How can I do this? I am not a web developer by any means, so please be easy on me with code. I think in CS3 it used to work this way. Any help would be appreciated! Thank you in advance!

GRAMPS!! That's it!! It was the accordian panel I had used in the past!!!! Oh, thank you, I was driving myself crazy as to why it wasn't working the way I had remembered!!!!!!!! THANK YOU!!
I was told you would probably help me find the right answer by Hans-g!
Thanks again!

Spry Collapsible panel - open and closed default question...

I am using a Spry Collapsible panel in a vertical nav menu (DW CS4) and it's in a template for my site. I want it to be closed as default on the Home page, but when a visitor clicks to open it and selects their option, I would like it to remain open on the selected page - Is there a way to do this?
Thank you all!
Aza

Check out the examples on this page: http://www.spry-it.com/examples/spry-widget-cookie-history/#collapsiblepanel

Make a spry collapsible panel open on hover??

Hi All,
I'm trying to play with the Spry Collapsible Panel and would
like to have it open on hover but not on the on click, I've
attached the standard js code Dreamweaver produces, and would be
very grateful if you could highlight what needs to be
changed,---

http://labs.adobe.com/technologies/spry/articles/tabbed_panel/index.html
See the section titled Open panels programmatically
<li class="TabbedPanelsTab" tabindex="0"
onmouseover="TabbedPanels1.showPanel(0)">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0"
onmouseover="TabbedPanels1.showPanel(1)">Tab 2</li>
Ken Ford
Adobe Community Expert - Dreamweaver
Fordwebs, LLC
http://www.fordwebs.com
"miachu" <[email protected]> wrote in
message news:fvihb0$miq$[email protected]..
> hi there,
>
> did you ever find a solution to this dreamweaver
collapsible panel problem? i
> am having the same problem...i need it to open on hover
instead of click. it
> makes so much more sense for them to have it on
hover/roll over!
>
> help would be much appreciated!
> thanks.
>

Spry collapsible panel open by default

Hi there,
I've done a couple of sites where the left nav bar is a
series of
collapsible panels, each one housing links to products within
a specific
line. Would it be possible to insert code somewhere to get
one of the panels
open by default when you open a certain page, ie if you open
the 'suncare'
page the 'suncare' panel is open on load. I read something
about this on the
Adobe documentation but when I tried it it did't work.
It needs to be code somewhere on the page that interacts with
the spry
panel, I can't put it on the panel itself as I'm using a SSI
to insert the
nav bar into dozens of pages.
Many thanks...

Check out the examples on this page: http://www.spry-it.com/examples/spry-widget-cookie-history/#collapsiblepanel

Colapsible Panel open close with delay ?

Hi
first of all i really dig spry, even thou i nearly cant read
that javascript stuff ;-) ... keep it up spry-team
First an image which illustrates my idea better than my
limited english.
http://www.defcon-x.de/mogh_forum_files/badge_hover.png
So i think it should be doable ... with an acordion or
colapsable panel effekt ,.. still i cant figure put how to hover it
and of course this layout needs a additional timer (3sec lets say)
to slide in again when the mouse leaves the area
also what I am worrying about is that the hover area moves so
the apearing area has to react to the hover also to keep itself
open ...
I found this in the forum but this is deffinetly out of my
codereading skills, and its about tabbed panels anyway, sorry.
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=602&threadid =1372067&highlight_key=y&keyword1=hover
Thanks in advance ...
regards mogh

I searched some more and even tinkered with the
javascriptcode ..
I read in the forums that an acodion can not be closed by
mouseout so an colapsible panel is the right directon to go ..
i edited the code (SpryCollapsiblePanel.js) so that the
mousehover does the same as an mousclick ..
//Spry.Widget.CollapsiblePanel.addEventListener(tab, "click",
function(e) { return self.onTabClick(e); }, false);
Spry.Widget.CollapsiblePanel.addEventListener(tab,
"mouseover", function(e) { return self.onTabClick(e); }, false);
Spry.Widget.CollapsiblePanel.addEventListener(tab,
"mouseover", function(e) { return self.onTabMouseOver(e); },
false);
//Spry.Widget.CollapsiblePanel.addEventListener(tab,
"mouseout", function(e) { return self.onTabMouseOut(e); }, false);
(don't forget to add some mousout stile removments (ad the
top of the javascript file) to make ist work nicely)
anyway I am still unsure if I am on the right track or just
messing around.
now to the delay ...
I found this:
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=602&threadid =1357284&highlight_key=y&keyword1=delay
but i couldn't manage to make it work with my
CollapsiblePanel; I tried to implement the unobstructive routine
but again this is again out of my league ...
hope it helps someone to chim in ,,,

Collapsible Panels - Links to open one, and close others

Hi,
I am new to Dreamweaver and have been creating my site by
learning as I go along. I have already read through all the other
related topics associated with Collapsible Panels on this blog and
have still not found an answer. I have been able to open and close
Collapsible Panels by using links - but unfortunately, I need more
than just opening and closing.
On my site i have approximately 5 pages, all with the same
header and Menu bar. The Information (that i have presented in
numerous Collapsible Panels) does however vary from page to page.
What I need to try and figure out is:
How can I open one collapsible panel and close all others? I
have seen the one example which leads to my next question:
How can I group Panels? Some examples of how to open one and
close all others use this grouping. Is there any other way of
opening one and closing all others without grouping?
Lastly, is it possible to set up a link that can be viewed on
one page which when clicked opens the relevant page and collapsible
panel? i.e. on my About Us page there is a link (using the Menu
bar) for one of my several services on the services drop down menu
(but services is on a different page with the same setup). When a
viewer clicks on the specific service, is it possible to get the
site to open the services page, and open the relevant collapsible
panel (with all other Panels closed)?
Any assistance would be greatly appreciated - I have been
searching for days now and cannot seem to find any
answers/directions in laymans terms.
Kind regards,
John

wlsjoh013 wrote:
> Hi,
>
> I am new to Dreamweaver and have been creating my site
by learning as I go
> along. I have already read through all the other related
topics associated
> with Collapsible Panels on this blog and have still not
found an answer. I
> have been able to open and close Collapsible Panels by
using links - but
> unfortunately, I need more than just opening and
closing.
>
> On my site i have approximately 5 pages, all with the
same header and Menu
> bar. The Information (that i have presented in numerous
Collapsible Panels)
> does however vary from page to page. What I need to try
and figure out is:
>
> How can I open one collapsible panel and close all
others? I have seen the one
> example which leads to my next question:
This page has an example that has a link that can open and
close a panel:
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_panel_sample. htm
One way to do this would be to have a single link that would
open one of your panels using the code, but then add to it code
that closes each of the other panels, for example:
<a href="#"
onclick="CollapsiblePanel4.open();CollapsiblePanel5.close();CollapsiblePanel6.close();">O pen
4, close 5 and 6</a>
To make this work, you'll need to look that the panel
constructors at the bottom of your page and make sure to match up
the panel variable names i.e. "var CollapsiblePanel1 =...." the
variable is CollapsiblePanel1.
You could also write a function that gathers together the
various panels you have on the page and then pass to it only the
panel that you want kept open. For now, though, it might be best to
use the above method, given your expertise. And taking that even
further, you could apply the function call unobtrusively. Both the
function call and the unobtrusive part you can work on later to get
this working for now.
> How can I group Panels? Some examples of how to open one
and close all others
> use this grouping. Is there any other way of opening one
and closing all
> others without grouping?
This is a little confusing, on one hand you ask about how to
group, but then ask how not to group. There is a concept of a
collapsible panel group:
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
But there is another type of group, that may be more what
you're looking for, and that's an Accordion panel, which is similar
to the collapsible panel group, with the exception that it can only
have one panel open at a time.
> Lastly, is it possible to set up a link that can be
viewed on one page which
> when clicked opens the relevant page and collapsible
panel? i.e. on my About Us
> page there is a link (using the Menu bar) for one of my
several services on the
> services drop down menu (but services is on a different
page with the same
> setup). When a viewer clicks on the specific service, is
it possible to get
> the site to open the services page, and open the
relevant collapsible panel
> (with all other Panels closed)?
Probably the easiest way to do this particular one would be
to make sure that you have all of the panels set to be closed when
the page loads, and then take a look at the code for the last
example on this page:
http://labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.html
That example uses a tabbed panel, but the concept is the
same, use a URL parameter to determine what to show. You'll need to
link in the SpryURLUtils file in the Spry download package (look in
the includes folder):
http://labs.adobe.com/technologies/spry/home.html
Essentially, your link will look similar to:
sample.html?panel=1
Then your code could look something like:
var params = Spry.Utils.getLocationParamsAsObject();
var CollapsiblePanel1 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel1",
{contentIsOpen:(params.panel==1 )} );
var CollapsiblePanel2 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel2",
{contentIsOpen:(params.panel==2 )} );
Basically what this is doing is creating an object from the
URL parameters. Then for each of the panels the constructor has
code that determines whether or not to expand the panel when the
page loads. So it checks the value of params.panel to see if it
matches 1 (for the first one), if it does, then that means that
contentIsOpen is set to true, if it is some other number or is not
present at all, then that means that the panel is closed. This
would then be repeated down the line for how ever many panels you
want to operate like that.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Closing a Collapsible Panel from another link?

Hello....
I'm not a web designer and know next to nothing about HTML
and even
less about Javascript, but am trying to make a website in
Dreamweaver,
which is going quite well, and I'm learning as I go along,
but I am
having trouble with one thing: the Spry Collapsible Panel.
I'm making a photography site and I have a sidebar on my site
which is
my list of all my galleries, one of which has sub-galleries
in it, and
it is this one that I have made into a collapsible panel, so
that when
it's clicked, it expands to reveal the sub-galleries inside,
moving
the other galleries down the page accordingly.
This works fine, but what I cannot do is get the collapsible
panel to
close again when clicking on one of the other gallery titles
outside
it, so that the sub-galleries become hidden again.
The only way of collapsing this panel seems to be to click on
the tab
of the panel itself, but what I want to do is make the panel
collapse
when something outside it is clicked.
Is there a way to do this?
I have tried looking at the "Call Javascript" behaviours and
all the
rest of it but I'm afraid it's all a foreign language to me!
Any help would be much appreciated.
Thanks

You can programatically close a collapsible panel by calling
the close() function on it. So for example if you created a
collapsible panel called cp1:
var cp1 = new
Spry.Widget.CollapsiblePanel("mycollapsiblepanel");
You can close it with a link like this:
<a href="#" onclick="cp1.close(); return false;">Close
The Panel</a>
You can see more examples here:
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_panel_sample. htm
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
http://labs.adobe.com/technologies/spry/articles/data_api/apis/collapsible_panel.html#meth ods
--== Kin ==--

Collapsible Panel Group - automatic close/open?

Is there a way to set it so the Spry Collapsible Panel Group automatically closes an open panel when you select to open another one?
Thank you.

Uhm... I think you should swap the collapsible panel group for a Spry Accordion: http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html

Checkbox (only) controls open/close function of collapsible panel

I have a form with several collapsible panels in it, each
with a checkbox in the tab area, like so:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">
<input type="checkbox" name="checkbox_array[]"
value="i_need_this" />
I need this!
</div>
<div
class="CollapsiblePanelContent">Content</div>
</div>
My question is this: Is there any way to control the
open/close function of the collapsible panel using only the
checkbox located within the tab? Ideally, the panel would still
change based on hover, focus, etc.
In advance, let me just say thank you so much for any help
you might provide with this.
- Devin

Yessir, it is possible. I was struggling with something
similar myself, and got it figured out. You'll need to do this in
two steps.
First, you should disable the existing listener, so that when
you click the tab area nothing happens. You'll need to wade into
your SpryCollapsiblePanel.js file and comment out a line. Somewhere
around line 191 you'll find a function called
"Spry.Widget.CollapsiblePanel.prototype.attachPanelHandlers".
Within that function, around line 198, you'll find the following
code:
quote:
Spry.Widget.CollapsiblePanel.addEventListener(tab, "click",
function(e) { return self.onTabClick(); }, false);
Comment it out by typing a double forward slash (//) at the
beginning of the line like this:
quote:
// Spry.Widget.CollapsiblePanel.addEventListener(tab,
"click", function(e) { return self.onTabClick(); }, false);
If you test your code at this point, you'll discover that
you've broken the collapsible panel functionality. The panel won't
open. Now you need to set up your checkbox to trigger the
open/close functions. To do this, you just need to add an onclick
event to your checkbox like this:
quote:
<input type="checkbox" name="checkbox_array[]"
value="i_need_this"
onclick="CollapsiblePanel1.onTabClick();" />
The onTabClick() function simply checks if the panel is
already open, and calls either the open() or close() function as
appropriate. If you needed to, you could check whether the checkbox
is checked or not, then call the open() or close() functions
directly.
Please note that in modifying your SpryCollapsiblePanel.js
file like this, you'll be modifying the behavior of all collapsible
panels built using that file. If you need standard collapsible
panels as well, you'll need to add the same onclick event to your
tab panels manually.

One link to open/close all _accordion_ panels

I am aware that collapsible panels have group feature and you can open and close all panels by wrapping the individual panels within a group.
Is there a way to open all panels in an accordion widget?

Open all, no.
Close all, yes (set panel to -1, with the useFixedHeights:false option)

DW CS6 - Spry collapsible panels - How to have panel close when you click away from it?

I know typically onmouseout is used to close other items, but I could not figure it out with the spry collapsible panel. I have the panel opening onclick and closing onclick, but I would really like for it to close when you click anything else on the page outside of the panel.
Thank you!

Sorry, I did not mean other collapsing panels close when you click away from it. I simply meant in general for the closing after clicking away function, you can use onmouseout. I was working on something with collapsing panels and I wanted it to show the information when you clicked on it, but when you click on another panel, they both remain open. I really want both to close. I believe accordion does this, but not quite what I am looking for either.
Here is a better example of what I would prefer: Houston Public Library
If you visit their page and click "Find it" a box pops down with information and then when you click anywhere else on the screen, it closes that box. When you click "Research," it closes the "Find It" box and opens the "Research" box. There is likely a much better way to do this, but I am pretty new to this.
Any assistance is very much appreciated.
Thank you!

Script to Close all the collapsible panels on click of one collapsible panel

Hi All,
Please help me with modifying the script or a new script to suffice the following.
I have around 5 to 6 collapsible panels in many html files. There is a huge content under each panel and thats the reason I want to collapse i.e., close all the open panels and open the panel that is clicked on.
that is initially i click on panel 1 - > Panel 1 opens and contents are displayed.
now I click on panel 2 - > panel 1 should close and panel 2 should open.
Please help me acheive this.
Thanks in advance.

To close the remaining panels you can just use the onclick method and however many panels you have just add them to the list spacing them out with a " , "
Here is an example of 3 panels that close and open, upon clicking on one of the panels.
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="CollapsiblePanel2.close(),CollapsiblePanel3.close()">Tab 1</div>
<div class="CollapsiblePanelContent">Long-Sleeve Prices</div></div>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="CollapsiblePanel1.close(),CollapsiblePanel3.close()">Tab 2</div>
<div class="CollapsiblePanelContent">T-Shirt Prices</div>
</div>
<div id="CollapsiblePanel3" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="CollapsiblePanel1.close(),CollapsiblePanel2.close()">Tab 3</div>
<div class="CollapsiblePanelContent">Hat Prices</div>
</div>

How to open multiple collapsible panels?

http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_panel_sample. htm
This "Open Panel with Link" sample opens only one panel, but
I'd like to open multiple collapsible panels at the same time with
one button/link click.
I'm trying to use a class name "Collapsible Panel" instead of
the id name "cp1, cp2,cp3,cp4, ....", but I'm stuck on how to
open/close by class name.
If anyone knows how to do it, I'm appreciated to hear it.
Thanks,
(^_^)/

I'm not sure if this is what you're going for, but here is an
example of using a text link to open multiple collapsible panels:
<a href="javascript:;"
onclick="CollapsiblePanel1.open();CollapsiblePanel8.open();">Click
to open</a>
<a href="javascript:;"
onclick="CollapsiblePanel1.close();CollapsiblePanel8.close();">Click
to close</a>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab">Standard Collapsible
Panel</div>
<div class="CollapsiblePanelContent">
<p>Default CSS class .CollapsiblePanel width set to
300px. Since all Panels on this page use the same CSS, it
affects all Panels on the page.</p>
<p>Custom classes can be used to customize individual
Panels. </p>
</div>
</div>
<div id="CollapsiblePanel8" class="CollapsiblePanel">
<div class="CollapsiblePanelTab">Standard Collapsible
Panel</div>
<div class="CollapsiblePanelContent">
<p>Default CSS class .CollapsiblePanel width set to
300px. Since all Panels on this page use the same CSS,
it affects all Panels on the page.</p>
<p>Custom classes can be used to customize individual
Panels. </p>
</div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
var CollapsiblePanel8 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel8");
</script>

Collapsible Panel Open/Close

Similar Messages

Maybe you are looking for