Multiple Collapsible Panel Issues

When I have a single collapsible panel on my page it works
just fine. However, once I start to add more panels I start to get
issues. The panels are not nested or anything, I just have the
following problem:
With a single panel, the entire tab area is clickable as the
control to open/close the tab.
With multiple panels the first panel is as above but any
subsequent panels lose haveing the entire tab area as clickable.
What I mean is you can only open or close the tab by clicking on
the text within the tab itself, rather than any area of the tab.
I am using 1.6 and ensuring my div id's match the
corresponding script insert at the bottom of the page etc for each
new panel.
Any help would be greatly appreciated
TIA

nvm, i had a funny margin value set that was throwing things
our of whack for some reason, found it totally by accident.
thanks anyway

Similar Messages

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>

Multiple Collapsible Panels on same page

I am creating a new site using Dreamweaver CS3, temporarily uploaded at:
http://www.sharpeacademy.co.uk/nick-jackson.co.uk/sharpeacademy/theatrearts/
I have an email signup form using a collapsible panel (this appears on every page). I want to put a second collapsible panel elsewhere on selected pages with completely different formatting. Is this possible? When I tried to add another panel it adopted the formatting of the email panel. I don't know how to change it while leaving the email styling intact.

Check the variables at the bottom of the page. When I loaded it in, Dreamweaver said there is javascript widget code that goes to
widgets that have been removed. Your Spry will not work if the proper code is not at the bottom of the page.
The yellow border comes from
.CollapsiblePanel {
    padding: 0px;
background-color: #FEFAEC;
border: 1px solid #F1CB00;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
Running the DW validation check turns up a bundle of nesting errors, etc. If you sort those out, you may find the monkeywrench that is making your collapsible panel not collapse.
Take advantage of the w3c validators, too:
http://validator.w3.org/check?uri=http://www.sharpeacademy.co.uk/nick-jackson.co.uk/sharpe academy/theatrearts/harrow.html&charset=(detect+automatically)&doctype=Inline&group=0
http://jigsaw.w3.org/css-validator/validator?uri=http://www.sharpeacademy.co.uk/nick-jacks on.co.uk/sharpeacademy/theatrearts/harrow.html&profile=css21&usermedium=all&warning=1〈=en
I think that the widget errors on the CSS validation are non-starters; that is, don't worry about them because they won't validate.
The rest should be considered.
Beth

Dynamically created COLLAPSIBLE PANELS

In case this might help others, I thought I would share how I
dynamically create Collapsible Panels using MySQL, PHP, and SPRY.
Please note that I am not a master PHP coder and so there might be
a more efficient method but this does work great for me. Here is my
scenario. I have a MySQL table which holds a list of user
applications. Some applications then have individual modules which
are stored in a seperate table and related to applications by
app_id. I want to display the list of applications and then for
applications that have modules I create a collapsible panel to
display the modules.
My Applications:
mysql_select_db($database_ppg_conn, $ppg_conn);
$query_applications = "SELECT * FROM applications ORDER BY
active desc, name ASC";
$applications = mysql_query($query_applications, $ppg_conn)
or die(mysql_error());
$row_applications = mysql_fetch_assoc($applications);
$totalRows_applications = mysql_num_rows($applications);
code for application lists and collapsible panels:
<div id="maincontainerbox" align="center">
<div class="ppgaccounthdr">
PPG Applications
</div>
<div class="ppgaccountrow_active">
<a href="ppgaccounts_update.php?app=new">Add New
Application</a>
</div>
<?php
$icount = 0;
do { ?>
<?php switch ($row_applications['modules']) {
case "Y":
$modules = 1; //flags the building of collapsible panel to
display available modules for current application.
++$icount; //tracks # of applications that have modules.
This is used to properly create multiple collapsible panels.
break;
default:
$modules = 0; //no modules for current app
break;
} ?>
<?php switch ($row_applications['active']) {
case "Y":
if ($modules == 1) {
echo '<div id="CollapsiblePanel'.$icount.'"
class="ppgaccountrow_active1"><div
class="ppgaccountrow_active">';
} else {
echo '<div class="ppgaccountrow_active">'; }
break;
default:
echo '<div class="ppgaccountrow_notactive">';
break;
?>
<a href="ppgaccounts_update.php?app=<?php echo
$row_applications['id'];?>"><?php echo
$row_applications['name']; ?></a>
<?php if ($modules == 1) {
echo '</div>';
echo '<div class="CollapsiblePanelContent">';
$query_appmodules = "SELECT *
FROM app_modules
WHERE app_id = {$row_applications['id']}
ORDER BY active desc, name ASC";
$appmodules = mysql_query($query_appmodules, $ppg_conn) or
die(mysql_error());
$row_appmodules = mysql_fetch_assoc($appmodules);
$totalRows_appmodules = mysql_num_rows($appmodules);
echo '<div class="appmodulerow_active">';
echo '<a
href="ppg_app_modules_update.php?id=new&app_id='.$row_applications['id'].'">Add
New Module</a>';
echo '</div>';
do {
switch ($row_appmodules['active']) {
case "Y":
echo '<div class="appmodulerow_active">';
break;
default:
echo '<div class="appmodulerow_notactive">';
break;
echo '<a
href="ppg_app_modules_update.php?id='.$row_appmodules['id'].'"
title="Update Application
Module">'.$row_appmodules['name'].'</a></div>';
} while ($row_appmodules = mysql_fetch_assoc($appmodules));
mysql_free_result($appmodules);
echo '</div>';//close content div for collapsible
panal
} ?>
</div>
<?php } while ($row_applications =
mysql_fetch_assoc($applications)); ?>
</div>
So when my application record has a flag saying that it
possesses modules I increment $icount and then use
echo '<div id="CollapsiblePanel'.$icount.'"
class="ppgaccountrow_active1"> to build the collapsible
panel. Notice the $icount in the div id. Now at the bottom of the
HTML I do the following.
<?php
$i = 0;
do {
++$i;
echo 'var CollapsiblePanel'.$i.' = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel'.$i.'",{contentIsOpen:false});';
} while ($i <= $icount);
?>
//-->
</script>
This creates a collapsiblepanel for each application which
has modules.
I hope I have described this ok and that it might help
somebody out. If you have suggestions on how to do it better then
please do let me know.
Thanks,
Lee Goolsby

Nice. Thanks for posting this, Lee.

Spry Collapsible Panels Safari Error

I'm working on a website with multiple collapsible panels on some of the pages. I have the Javascript set so that they automatically load closed, which works in Firefox and Chrome, but not in Safari. There, they load open. They will close when clicked on, so the script is working on some level.
This website is not live yet, so I can't send a link. I have experience with html and css programming, but Javascript is new to me and I'm a bit afraid to mess around with it too much! I haven't changed anything in the Javascript (from what is automatically loaded when you insert a Spry item) besides making the first "contentIsOpen" equal "false." That changed it in Firefox--do I have to adjust other pieces in the js code specifically for Safari?
Any other thoughts as to why Safari isn't loading the collapsible panels properly?
Thanks!

The out-of-the-box Spry Collapsible Panels work in all modern browsers including Safari. If they do not work for you, then you have altered something that upset the apple cart. At this stage you are better able to see what you have done, i.e. untill you give us a link to your site.
Incidently, do not touch the JS, there is no need to do that. If you want all panels closed to start with, all you need to do is say so in the constructor as per
var cpg = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup", { contentIsOpen: false });
Also see here http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
Gramps

IE 7 issue with Spry Collapsible Panel

Hi Folks
My problem is I have dropped in a small collapsible panel at the top (right) of my site pages
which basically houses a sharing panel and a Google+1 button.
As ever it works well on all the other major browsers with the exception of IE (7).
Here it remains in the open position and clicking on the tab has no effect.
I have tried many of the suggestions put forward including;
1. Altering the js file (line 431 to now read 'this.content.style.height = "auto";')
2. Given the panel a height of 'auto'
3. Tweaked the z-index stacking
4. Reordered my other js files in case of interference
5. etc.
I was wondering whether placing the Google+1 button inside the panel was the issue...
Needless to say it was not with the other browsers.
Here is the site URL : hughsitton.com/slideshow/grey_Site/contact_Grey.html
As per usual the site goes ok then these seemingly inocuous little problems become huge and eat up oceans of time!
Any help would be greatly appreciated as my tether end is close to being reached!
(Apologies if you find my coding a little messy. Hope not.)
Many Thanks
Chris
Message was edited by: m4hs33r

Thank you, that gave me what I was looking for. Although now I have come across another issue when I put text in that is not the same length. What would cause the extra white space in the menu box.

How to apply different styles to multiple spry collapsible panels?

Hello every.
I would really appreciate some help with this problem I am coming up against.
I am creating a website which has multiple Spry collapsible panels in it. I applied the styles I wanted for the first Spry collapsible panel I did in the styles panel with no problems what so ever.
However when I go to apply the styles I want for my second and every other Spry collapsible panel, when I applied the style I wanted it changed the first panel I did. I’ve tried giving all my collapsible panels different Div ID’s but no luck. I just can’t seem to apply different styles to each of my collapsible panels.
Can someone please advise me how to do this?
Thank you in advance for your help.
Kind regards
Elliot

I've figured the most of it out.
By giving the Spry Collapsible Panel that you want to style differently a separate ID and class and then duplicating the original Spry Collapsible Panel style in the CSS style panel on the right and renaming them the same name as the panel you want to style differently it will allow you to style it differently to all the other panels apart from the Hover.
I've tried everything! Below is the code I'm using for the two Collapsible Panels I want to style Differently.
I only want to have different Tab backgrounds and Hover backgrounds
1st Spry CollapsiblePanel
Code:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
CSS Style
.CollapsiblePanelTab
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover
2nd Spry CollapsiblePanel
Code:
<div id="CollapsiblePanel2" class="CollapsiblePanel2">
<div class="CollapsiblePanel2Tab" tabindex="0">Tab</div>
<div class="CollapsiblePanel2Content">Content</div>
</div>
.CollapsiblePanel2Tab
.CollapsiblePanel2TabHover, .CollapsiblePanelOpen .CollapsiblePanel2TabHover
As I said the Tab works both I have two seperate background images for the Tabs but I can only seem to have one background for the hover.
Has anyone any ideas on how to get around this?
Kind regards
Elliot

Collapsible Panel within another Collapsible Panel HEIGHT ISSUE

Having an issue with the height of a collapsible panel that has another collapsible panel within it not adjusting. I am using Dreamweaver CS5.
When I try the fix of changing line 431 in .js (where you change "px" to "auto" where it says this.content.style.height = this.toHeight + "auto";) it does not work in IE7 or Firefox. If I change the height inferences in the .js on lines 392, 431, and 439--it worksperfect in Firefox, however it throws an error in IE7. Anyone have a clue???
Here is my page: http://www.l-3choosewisely.com/dev/
username: owl
password: l3ae2011
Help would be greatly appreciated. PLEASE PLEASE PLEASE help me!

For right now I have "semi-fixed" the issue, by adding a min-height to my second collapsible panel set, but really am NOT HAPPY
with it... please help me, it has to be something with the auto-height... I know I am looking right at it and just not seeing it.

Spry collapsible panel - panel (link) border issue

Hi folks. I'm new to spry and I'm inserting a spry collapsible panel into a web page in Dreamweaver CS4. It all works fine but i have this very ugly border around the panel tab (the link that you click to open the panel). In frefox its a dotted line and in safari its a blue border. I havent had change to check this in other browsers/platforms. (I'm using a mac) I've read that its an accessabilty thing? which can be overcome in a different way. I have to get rid of this border as it completely spoils the design of the site..
Anyone know how to remove this?
Thanks in advance :-)

Hi, I asked that same question a minute ago, then I saw your solution you wrote to someone else previously.
Works for me too!
Thanks for solving it!
Here is another question if you can help...
I currently have ">>read more" at the end of the text in my top content tab panel, so the user knows to click and read more in a lower panel.
I want that ">>read more" text to disappear when it is clicked and lower content section is open.
And then a "read less" to appear so user knows to click the top tab content to close the bottom panel.
Can this be done using this Spry Collapsible technique?
Thanks!

DW crashes when attempting to insert another collapsible panel

Hello all, please be patient with me as it is my first post...i am trying to insert another collapsible panel into my content div and my Dreamweaver CS5 has crashes multiple times...here are my codes:
forgive me if i am adding too much, the address is: http://www.crestars.com/accordion.html
i have a lightbox inserted into my first panel...i'm just trying to add another panel for a different set of pictures.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Martine & Dewaine's pictures</title>
<link href="css/chinesecrestedatcrestars.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" href="dmx/widgets/Lightbox/styles/default/style.css" />
<script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="dmx/dmx.core.js"></script>
<script type="text/javascript" src="dmx/widgets/Lightbox/dmx.lightbox.js"></script>
</head>
<body>
<div id="wrapper"> <img src="pictures/banner/banner.png" width="1000" height="200" alt="Chinese Cresteds at Crestars" />
<div id="SofteryMenu" style="position:relative; top:0; visibility: visible; z-index: 100;">
<object id="sf_menu" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100%" height="25">
   <param name="movie" value="SofteryMenus/sf6menu119.swf" />
   <param name="quality" value="high" />
   <param name="wmode" value="transparent" />
   <param name="FlashVars" value="flashlet={_bgPicture:'NA',_googleDomain:'http://www.google.com',_googleSearch:false,_mainButtonHeight:25,_mainButtonTextColor:#E7E9 EC,_mainFont:'Tahoma',_mainFontSize:12,_mainHighlightColor:#999999,_mainTextHighlightColor :#13133C,_menuAlign:'center',_menuColor:#737373,_menuLeftMargin:90,_menuMinimalWidth:493,_ menuRightMargin:100,_menuTopMargin:0,_searchFieldColor:#ffffff,_searchFieldWidth:70,_searc hInputTextColor:#666666,_searchVariable:'searchText',_subButtonHeight:20,_subButtonTextCol or:#E7E9EC,_subFont:'Tahoma',_subFontSize:12,_subHighlightColor:#999999,_subMenuColor:#737 373,_subShowSpeed:20,_subTextHighlightColor:#13133C,_yourDomain:'NA',autosize:true,needSea rch:false,navigationTree:['Mainbut1:Home;http://www.crestars.com;_top','Mainbut2:About Crestars *amp* Us;;','_subbuton1:Crestars Belief;chinese_crested_about_crestars.html;_parent','_subbuton2:Martine *amp* Dewaine;about_dewaine_and_martine.html;_parent','_subbuton3:Contact;mailto:[email protected]?subject=I visited your website and;_top','Mainbut3:General Information;;_parent','_subbuton1:FAQ\'s;chinese_crested_faq.html;_parent','_subbuton2:Ge neral Overview;chinese_crested_info.html;_parent','_subbuton3:Common Health Issues;chinese_crested_common_health_issues.html;_parent','_subbuton4:Exercise;chinese_cr ested_exercising.html;_parent','_subbuton5:Other Links;other_links.html;_parent','Mainbut4:Grooming;;_parent','_subbuton1:Read First;chinese_crested_grooming.html;_parent','_subbuton2:A Hairy Hairless;chinese_crested_grooming_hairy_hairless.html;_parent','_subbuton3:A Medium Hairy Hairless;chinese_crested_grooming_medium_hairy.html;_parent','_subbuton4:A True Hairless;chinese_crested_grooming_true_hairless.html;_parent','_subbuton5:A Powderpuff;chinese_crested_grooming_powderpuff.html;_parent','_subbuton6:Taping Puppy Ears;chinese_crested_ear_taping.html;','_subbuton7:Grooming Supplies;chinese_crested_grooming_supplies.html;','Mainbut5:Our Males;;_parent','_subbuton1:Bootz;chinese_crested_bootz.html;_parent','_subbuton2:Bugzy;c hinese_crested_bugzy.html;_parent','_subbuton3:Oreo;chinese_crested_oreo.html;_parent','Ma inbut6:Our Females;;_parent','_subbuton1:Candy;chinese_crested_candy.html;','_subbuton2:Didi;chinese _crested_didi.html;','_subbuton3:Goldie;chinese_crested_goldie.html;','_subbuton4:Hottie;c hinese_crested_hottie.html;','_subbuton5:Izzee;chinese_crested_izzee.html;_parent','_subbu ton6:Vickie;chinese_crested_vicki.html;','_subbuton7:Zeekitah;chinese_crested_zeekitah.htm l;','Mainbut7:New Generation;;','_subbuton1:Puppies;chinese_crested_puppies.html;','_subbuton2:Show Hopefuls;chinese_crested_hopefuls.html;','_subbuton3:Available;chinese_crested_available. html;','Mainbut8:What\'s New...;crestars_latest_news.html;','Mainbut9:New owners...;chinese_crested_new_owners.html;','Mainbut10:Rainbow Bridge;chinese_crested_rainbow_bridge.html;_parent']}" />
   <embed id="sf_menu2" src="SofteryMenus/sf6menu119.swf" wmode="transparent" quality="high" flashvars="flashlet={_bgPicture:'NA',_googleDomain:'http://www.google.com',_googleSearch:false,_mainButtonHeight:25,_mainButtonTextColor:#E7E9 EC,_mainFont:'Tahoma',_mainFontSize:12,_mainHighlightColor:#999999,_mainTextHighlightColor :#13133C,_menuAlign:'center',_menuColor:#737373,_menuLeftMargin:90,_menuMinimalWidth:493,_ menuRightMargin:100,_menuTopMargin:0,_searchFieldColor:#ffffff,_searchFieldWidth:70,_searc hInputTextColor:#666666,_searchVariable:'searchText',_subButtonHeight:20,_subButtonTextCol or:#E7E9EC,_subFont:'Tahoma',_subFontSize:12,_subHighlightColor:#999999,_subMenuColor:#737 373,_subShowSpeed:20,_subTextHighlightColor:#13133C,_yourDomain:'NA',autosize:true,needSea rch:false,navigationTree:['Mainbut1:Home;http://www.crestars.com;_top','Mainbut2:About Crestars *amp* Us;;','_subbuton1:Crestars Belief;chinese_crested_about_crestars.html;_parent','_subbuton2:Martine *amp* Dewaine;about_dewaine_and_martine.html;_parent','_subbuton3:Contact;mailto:[email protected]?subject=I visited your website and;_top','Mainbut3:General Information;;_parent','_subbuton1:FAQ\'s;chinese_crested_faq.html;_parent','_subbuton2:Ge neral Overview;chinese_crested_info.html;_parent','_subbuton3:Common Health Issues;chinese_crested_common_health_issues.html;_parent','_subbuton4:Exercise;chinese_cr ested_exercising.html;_parent','_subbuton5:Other Links;other_links.html;_parent','Mainbut4:Grooming;;_parent','_subbuton1:Read First;chinese_crested_grooming.html;_parent','_subbuton2:A Hairy Hairless;chinese_crested_grooming_hairy_hairless.html;_parent','_subbuton3:A Medium Hairy Hairless;chinese_crested_grooming_medium_hairy.html;_parent','_subbuton4:A True Hairless;chinese_crested_grooming_true_hairless.html;_parent','_subbuton5:A Powderpuff;chinese_crested_grooming_powderpuff.html;_parent','_subbuton6:Taping Puppy Ears;chinese_crested_ear_taping.html;','_subbuton7:Grooming Supplies;chinese_crested_grooming_supplies.html;','Mainbut5:Our Males;;_parent','_subbuton1:Bootz;chinese_crested_bootz.html;_parent','_subbuton2:Bugzy;c hinese_crested_bugzy.html;_parent','_subbuton3:Oreo;chinese_crested_oreo.html;_parent','Ma inbut6:Our Females;;_parent','_subbuton1:Candy;chinese_crested_candy.html;','_subbuton2:Didi;chinese _crested_didi.html;','_subbuton3:Goldie;chinese_crested_goldie.html;','_subbuton4:Hottie;c hinese_crested_hottie.html;','_subbuton5:Izzee;chinese_crested_izzee.html;_parent','_subbu ton6:Vickie;chinese_crested_vicki.html;','_subbuton7:Zeekitah;chinese_crested_zeekitah.htm l;','Mainbut7:New Generation;;','_subbuton1:Puppies;chinese_crested_puppies.html;','_subbuton2:Show Hopefuls;chinese_crested_hopefuls.html;','_subbuton3:Available;chinese_crested_available. html;','Mainbut8:What\'s New...;crestars_latest_news.html;','Mainbut9:New owners...;chinese_crested_new_owners.html;','Mainbut10:Rainbow Bridge;chinese_crested_rainbow_bridge.html;_parent']}" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100%" height="25"> </embed>
</object>
</div>

<div id="content">
<div id="housesurroundings" class="CollapsiblePanel">
   <div class="CollapsiblePanelTab" tabindex="0"> Check out our house surroundings   </div>
   <div class="CollapsiblePanelContent"><a href="pictures/flower1.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/flower1.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/dahlia1.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/dahlia1.jpg" width="66" height="100" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/flower2.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/flower2.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/flower3.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/flower3.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/flower4.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/flower4.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard1.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard1.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard2.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard2.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard3.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard3.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard4.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard4.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard5.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard5.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard6.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard6.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard7.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard7.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard8.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard8.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard9.jpg" title="My pet rock all the way from Quebec!" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard9.jpg" width="100" height="66" alt="My pet rock all the way from Quebec!" border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard10.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard10.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard11.jpg" title="Cute little birdhouse that nobody wants to use..." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard11.jpg" width="66" height="100" alt="Cute little birdhouse that nobody wants to use..." border="0" /></a> <a href="pictures/aboutus/around_the_house/lightning.jpg" title="Lightning show from our back yard" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/lightning.jpg" width="100" height="66" alt="Lightning show from our back yard" border="0" /></a> <a href="pictures/aboutus/around_the_house/lightning1.jpg" title="Lightning show from our back yard" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/lightning1.jpg" width="100" height="66" alt="Lightning show from our back yard" border="0" /></a> <a href="pictures/aboutus/around_the_house/lightning2.jpg" title="Lightning show from our back yard" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/lightning2.jpg" width="100" height="66" alt="Lightning show from our back yard" border="0" /></a> <a href="pictures/aboutus/around_the_house/lilly2.jpg" title="Garden Flowers" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/lilly2.jpg" width="100" height="66" alt="Garden Flowers" border="0" /></a> <a href="pictures/aboutus/around_the_house/lilly3.jpg" title="Garden Flowers" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/lilly3.jpg" width="100" height="66" alt="Garden Flowers" border="0" /></a> <a href="pictures/aboutus/around_the_house/lilly4.jpg" title="Garden Flowers" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/lilly4.jpg" width="100" height="66" alt="Garden Flowers" border="0" /></a> <a href="pictures/aboutus/around_the_house/rose1.jpg" title="Garden Flowers" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/rose1.jpg" width="100" height="69" alt="Garden Flowers" border="0" /></a> <a href="pictures/aboutus/around_the_house/rose2.jpg" title="Garden Flowers" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/rose2.jpg" width="100" height="66" alt="Garden Flowers" border="0" /></a> <a href="pictures/aboutus/around_the_house/rose3.jpg" title="Garden Flowers" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/rose3.jpg" width="100" height="70" alt="Garden Flowers" border="0" /></a> <a href="pictures/aboutus/around_the_house/firepit1.jpg" title="Enjoying a nice fire by the fire pitt with family" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/firepit1.jpg" width="100" height="75" alt="Enjoying a nice fire by the fire pitt with family" border="0" /></a> <a href="pictures/aboutus/around_the_house/dewaine_enjoying_the_sun_on_front_deck.jpg" title="Nothing beats relaxing on the front deck..." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/dewaine_enjoying_the_sun_on_front_deck.jpg" width="100" height="66" alt="Nothing beats relaxing on the front deck..." border="0" /></a> <a href="pictures/aboutus/around_the_house/dewaine_oreo_bugzy_hammack.jpg" title="Dewaine enjoying himself in the hammeck with a couple of dogs" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/dewaine_oreo_bugzy_hammack.jpg" width="100" height="66" alt="Dewaine enjoying himself in the hammeck with a couple of dogs" border="0" /></a> <a href="pictures/aboutus/around_the_house/dewaine_oreo_front_deck1.jpg" title="Someone needs to patrol what's going on...Dewaine and Oreo take their job seriously " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/dewaine_oreo_front_deck1.jpg" width="100" height="68" alt="Someone needs to patrol what's going on...Dewaine and Oreo take their job seriously " border="0" /></a> <a href="pictures/aboutus/around_the_house/firepit2.jpg" title="Let the fire rise!" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/firepit2.jpg" width="66" height="100" alt="Let the fire rise!" border="0" /></a> <a href="pictures/aboutus/around_the_house/fire1.jpg" title="Fire pitt" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/fire1.jpg" width="100" height="66" alt="Fire pitt" border="0" /></a> <a href="pictures/aboutus/around_the_house/seeds_on_table2.jpg" title="Seeds from our back yard Manitoba Maple on a piece of bark" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/seeds_on_table2.jpg" width="100" height="66" alt="Seeds from our back yard Manitoba Maple on a piece of bark" border="0" /></a> <a href="pictures/aboutus/around_the_house/backyard_figurines1.jpg" title="Cute little figurines in the back yard" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/backyard_figurines1.jpg" width="100" height="65" alt="Cute little figurines in the back yard" border="0" /></a> <a href="pictures/aboutus/around_the_house/backyard_figurines2.jpg" title="Cute little figurines in the back yard" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/backyard_figurines2.jpg" width="100" height="66" alt="Cute little figurines in the back yard" border="0" /></a> <a href="pictures/aboutus/around_the_house/backyard_figurines3.jpg" title="Cute little figurines in the back yard" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/backyard_figurines3.jpg" width="100" height="66" alt="Cute little figurines in the back yard" border="0" /></a> <a href="pictures/aboutus/around_the_house/seeds_falling_off_tree.jpg" title="Seeds falling off the Manitoba Maple Tree" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/seeds_falling_off_tree.jpg" width="100" height="66" alt="Seeds falling off the Manitoba Maple Tree" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow1.jpg" title="Ok nobody is going to BBQ today..." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow1.jpg" width="100" height="66" alt="Ok nobody is going to BBQ today..." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow2.jpg" title="Snow pilling up on front deck" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow2.jpg" width="100" height="66" alt="Snow pilling up on front deck" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow3.jpg" title="Snow fall" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow3.jpg" width="100" height="66" alt="Snow fall" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow4.jpg" title="Yuck who wants this much snow!" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow4.jpg" width="100" height="66" alt="Yuck who wants this much snow!" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow5.jpg" title="Yuck who wants this much snow!" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow5.jpg" width="100" height="66" alt="Yuck who wants this much snow!" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow7.jpg" title="Yuck who wants this much snow!" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow7.jpg" width="100" height="66" alt="Yuck who wants this much snow!" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow8.jpg" title="Looks fun?...just for 2 minutes!" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow8.jpg" width="100" height="66" alt="Looks fun?...just for 2 minutes!" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow9.jpg" title="Making a snow angel" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow9.jpg" width="100" height="65" alt="Making a snow angel" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow10.jpg" title="Snow angle snow print" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow10.jpg" width="100" height="66" alt="Snow angle snow print" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow11.jpg" title="BRRRR..." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow11.jpg" width="67" height="100" alt="BRRRR..." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow12.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow12.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow13.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow13.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow14.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow14.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow15.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow15.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow16.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow16.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow17.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow17.jpg" width="75" height="100" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow18.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow18.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow19.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow19.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow20.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow20.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow21.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow21.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow22.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow22.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snowgarlandfence.jpg" title="Cool looking garland" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snowgarlandfence.jpg" width="100" height="66" alt="Cool looking garland" border="0" /></a> <a href="pictures/aboutus/around_the_house/sunset_in_backyard_tree1.jpg" title="Fall funky colors from the sunset" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/sunset_in_backyard_tree1.jpg" width="100" height="66" alt="Fall funky colors from the sunset" border="0" /></a> <a href="pictures/aboutus/around_the_house/sunset_in_backyard_tree2.jpg" title="Fall funky colors from the sunset" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/sunset_in_backyard_tree2.jpg" width="100" height="66" alt="Fall funky colors from the sunset" border="0" /></a> <a href="pictures/aboutus/around_the_house/sunset_in_backyard_tree3.jpg" title="Fall funky colors from the sunset" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/sunset_in_backyard_tree3.jpg" width="66" height="100" alt="Fall funky colors from the sunset" border="0" /></a> <a href="pictures/aboutus/around_the_house/tree_seeds_on_table2.jpg" title="Fall funky colors from the sunset" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/tree_seeds_on_table2.jpg" width="100" height="66" alt="Fall funky colors from the sunset" border="0" /></a> <a href="pictures/aboutus/around_the_house/tree_seeds_on_table.jpg" title="Seeds from our Manitoba Maple tree" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/tree_seeds_on_table.jpg" width="100" height="66" alt="Seeds from our Manitoba Maple tree" border="0" /></a> <a href="pictures/aboutus/around_the_house/woodsplitter1.jpg" title="Preparing for the winter" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/woodsplitter1.jpg" width="100" height="66" alt="Preparing for the winter" border="0" /></a> <a href="pictures/aboutus/around_the_house/woodsplitter2.jpg" title="Fall funky colors from the sunset" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/woodsplitter2.jpg" width="100" height="66" alt="Fall funky colors from the sunset" border="0" /></a><a href="pictures/aboutus/around_the_house/cloud_shadow_1.jpg" title="Weird forming clouds...the shadow was behind" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/cloud_shadow_1.jpg" width="100" height="56" alt="Weird forming clouds...the shadow was behind" border="0" /></a><a href="pictures/aboutus/around_the_house/cloud_shadow_2.jpg" title="Weird cloud" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/cloud_shadow_2.jpg" alt="Weird cloud" width="100" height="56" border="0" /></a><a href="pictures/thumbs/thumbs/laughing_cloud.jpg" title="" rel="dmxLightbox" rev="{group: 'AroundOurHouseGarden', preset: 'thin'}"><img src="pictures/thumbs/thumbs/thumbs/laughing_cloud.jpg" width="100" height="66" alt="" border="0" /></a></div>
</div>
<p> </p>
</div>

<style type="text/css">

</style>
<span class="smallercentered">The entire Site is Copyrighted©, 2010. Designed by owner, <a href="mailto:[email protected]?subject=I visited your website and..." target="_blank">Martine Couture</a></span> </div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("housesurroundings", {contentIsOpen:false});
</script>
</body>
</html>

Depending on the development environment, I can imagine that DW has a problem.
My systems is Windows7, i7 processor, 8GB ram and it does take a while for DW to add an extra collapsible panel.
Possible solutions
use accordion panels
hand code the second collapsible panel
use a Collapsible Panel Group
To hand code all you have to do is add the following to your document, in the appropriate places amking sure that the ID corresponds.
<div id="CollapsiblePanel2" class="CollapsiblePanel">
   <div class="CollapsiblePanelTab" tabindex="0">Tab</div>
   <div class="CollapsiblePanelContent">Content</div>
</div>
and
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2");
For more info on a Collapsible Panel Group see here http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
Gramps

Target Named Anchor in a Spry Collapsible Panel from a different page

Let me start by saying I have combed this forum (and others) looking for a resolution to this. I am familiar with David Powers solution on Foundationphp.com and am using that code in project to open the collapsible panel from a separate page and it works beautifullly. The problem I have is that I want the browser to move down to a specific named anchor inside that opened collapsible panel when clicked from a different page.
Snippets of my current code here.
Below is the code that I have on an image that when clicked goes to the correct page and opens Panel1. Works Perfectly!
<a href="bamboo-species.php?col1=open#CollapsiblePanel1"><img src="images/Content/Photos/HomeScroll/blackTmbor.jpg" width="227" height="175" /></a>
Below is the link to the .js file and the script in the head of the target page
<script type="text/javascript" src="SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">
// Grabs the values of the URL parameters for the current URL.
var params = Spry.Utils.getLocationParamsAsObject();
</script>
Below is the code that I have on the target page for Panel1
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:params.col1 ? true : false},{duration: 1000});
</script>
If I have a named anchor say <a name="species1" id="species1"></a> down in the page, how do I target that named anchor from my link on the separate page. I have tried adding the #species1 to the end of the link on the link page (see below) but with no luck. I believe those were the instructions on foundationphp.com site.
<a href="bamboo-species.php?col1=open#CollapsiblePanel1#species1"><img src="images/Content/Photos/HomeScroll/blackTmbor.jpg" width="227" height="175" /></a>
I hope (and suspect) that this is an easy fix, I just do not know what it is. Any help or direction where to look is greatly appreciated.

I once had the same issue can created a small function that allows me to "jump" to a element.
function scrollTo( element ){
     var stylize = function( element){ return !+"\v1" ? element.currentStyle : document.defaultView.getComputedStyle( element , null ) },
          getPosition = function( element ){
               // based on the SpryEffect's module:
               var computedStyle, tryComputedStyle,
                    position = { x: 0, y: 0 };
                    if ( element.style.left && /px/i.test(element.style.left) ){
                         position.x = parseInt(element.style.left, 10); // without padding
                    } else {
                         computedStyle = stylize( element );
                         var tryComputedStyle = computedStyle && computedStyle.left && /px/i.test( computedStyle.left );
                         if (tryComputedStyle)
                              position.x = parseInt( computedStyle.left, 10 ); // without padding, includes css
                         if(!tryComputedStyle || position.x == 0) // otherwise we might run into problems on safari and opera (mac only)
                              position.x = element.offsetLeft;   // includes padding
                    if ( element.style.top && /px/i.test(element.style.top) )
                         position.y = parseInt( element.style.top, 10); // without padding
                    else
                         if ( !computedStyle )
                              computedStyle = stylize( element );
                    var tryComputedStyle = computedStyle && computedStyle.top && /px/i.test( computedStyle.top );
                         if ( tryComputedStyle )
                              position.y = parseInt( computedStyle.top, 10 ); // without padding, includes css
                         if( !tryComputedStyle || position.y == 0 ) // otherwise we might run into problems on safari and opera (mac only)
                              position.y = element.offsetTop;   // includes padding
               return position;
          scroll( 0, getPosition( element ).y );
So now we have a scrollTo function that accepts a pure HTML element as argument, all what is left to do is figure out if we have a hash, and if the anchor exits on the page.
( hopes this works, i wrote it without testing, but you get the general idea ):
if( window.location.hash ){
     var hash = window.location.hash.substr(1), // remove the # from the hash
     element;
     // as anchors can also be used with id attributes, check that first,
     element = document.getElementById( hash );
     // maby we used name="" attribute
     if( !element && ( element = document.getElementsByName( hash )) ){
          element = element[0];
     // if we have a match:
     if( element ){
          // give the collapsible panel some time to init and update the DOM;
          setTimeout(function(){ scrollTo( element ) },0);
\o/

Link to tabs in spry collapsible panel work in IE-8; not Firefox or Safari

I have little experience with Spry. I've asked my question on the user forum in Dreamweaver several times with no response. I am hoping that someone somewhere in the Adobe community can help me resolve this issue.
I created links from the top of a page to the tabs of a spry collapsible panel underneath.
In IE-8, on one page, with a small collapsiable panel, clicking the link creates a rollover effect on the appropriate panel. This effect works wonderfully for my purposes.On another page, with a long collapsible panel, clicking the link jumps the user to the panel AND creates a rollover effect. Perfect.
In Firefox and Safari, clicking the link does nothing. If I right-click the link in Firefox, I create a duplicate of the page.
I am using Windows XP and Dreamweaver CS4
http://www.judydiamondstone.net/Writing.html
click any of the links in the first section of the page
Thanks.

Arnout, Thank you so much for the guidance!
My code now looks like this:
(Click the first tab
below to open; click to close.)
but it still doesn't work
(I still like the error effect in IE!)
Do I need to add to the CSS or JS script that comes with the spry widget?
I am accessing all the tutorials I can find, including a very clear
explanation of event handlers in a Safari online search but I'm obviously
missing one or more basic concepts.
Page with new code on the
elements:
http://www.judydiamondstone.net/Writing.html

Google map inside the spry collapsible panel

So this time I've bumped into interesting 'bug'. I've placed the google map inside the spry collapsible panel. Panel is set to the closed mode on load of page. When I open the tab, map appears, but address marker is hidden behind the top left corner. If I place the same map outside the collapsiple panel it renders all well.
So my question is whether there is any way around this issue. When I know where the marker is hidden I can simply move the map and see it, but customer who's not aware of the problem will see only blank map with not marked address which is not acceptable.
cheers,
Simon

Sure mate. Here you go:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
              <div class="CollapsiblePanelTab" tabindex="0">SHOW MAP</div>
              <div class="CollapsiblePanelContent">
              <cfmap width="242" height="200" zoomlevel="12" name="mainMap" markercolor="333444" showscale="false"
typecontrol="none" showcentermarker="true" centeraddress="#get_event.event_address1#, #get_event.event_address2#, #get_event.event_city#,#get_event.event_county#, #get_event.event_postcode#, #get_event.event_country# "
></cfmap>
              </div>
            </div>
And this bit goes at the bottom of the code :
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
</script>
And that would be the preview that I get once the panel is open:
And that is the preview of how it should look:
As you can see the map marker sticks to the top left corner. I was wondering whether there is any way to re-focus it once the panel is open.
cheers,
Simon

Collapsible Panel - Tab start closed?

Hello
Just began working with Spry and I'm going to use the
Collapsible Panels to display multiple lists, each form a different
year, beneath eachother. Therefore I wanted the top list to start
as open, just as it normally does - but the rest that followed
would start as closed. I'll code the PHP to assign the tabs their
classes based on their position myself, but I just need help with
how to give a tab the closed-value.
Do I need to temper with the .js-file, or is it enough to
change the class of the tab-div to CollapsiblePanelClosed for
instance. I tried the latter, but it didnt work. In addition I
couldn't find the class CollapsiblePanelClosed represented in the
.css-file either.
Short example:
2007 (begins open and displays its content)
- item 01
- item 02
- item 03
2006 (begins closed)
2005 (begins closed)
etc.
Thanks,
Eirik

Hi Eirik,
you should better use Collapsebile Panel group. We can find
an working example
here.
Diana

Spry Collapsible Panel problem

Hi there,
I've tried to create a few collapsible panels but I have come across a problem. When I checked the error debugger in FF, I get an issue that states "Spry undefined". I have checked a few of the forums on this and I have tried some of the solutions but still find myself stuck.
http://tailoredart.ca/Mesco/default.html
Please help.
Thanks!

That error means you Spry files cannot be found did you upload all
files to your server? If yes, than post a online.

Multiple Collapsible Panel Issues

Similar Messages

Maybe you are looking for