Nested Collapsible Panels

Hi I have found a bug in using the collpasible panels, in a
nested manner. No problem in IE 6, after I altered the class for
the main CollapsiblePanel container, to have overflow:hidden( which
prevents (in IE6 & IE7) the nested sub-panels, showing
underneath/through a main panel, when collapsing (even after giving
the main panel a background color).
When interacting with sub-panels, after the initial loading
of the page, the height of the master panels grow appropriately,
based on sub-panel opening and closing, until, the sub-panel is
collapsed and subsequently the main panel is also collapsed.
IN IE 7, a main panel, housing a sub-panel, will not grow to
the appropriate height , after a sub-panel has been collapsed and
then the main-panel is collapsed. After re-opening the main panel
and then clicking the sub-panel's tab, the subpanel's content gets
cuts-off, until the main panel is closed and re-opened, at which
point everything grows correctly.
How do I get the interim height of the subpanel, to size the
main panel correctly, without closing the main panel while the
sub-panel is opened, and then reopening the main panel?

For the first problem you'll have to use overflow: auto which
will not cut the content that will not fit into the element but
instead will show scrollbars. The default behavior in CSS say that
an element shouldn't grow if has a fixed height if the content will
be larger. Instead there are 3 options: the content is displayed on
top over the element but the element shouldn't resize because will
affect all the other elements in the flow (default browser
behaviour, overflow: visible) or it should cut the content and
display the part that enter in the viewport (overflow: hidden) or
should show scrollbars to be able to scroll the viewport and see
the full content (overflow: scroll).
The only method to allow the element to enlarge to the same
size as the content within is to not specify a height. In this
situation the element will expand itself to its content height. In
this situation you'll have to put the useFixedPanelHeights option
of the Accordion widget to false (default is true) which will mean
the Accordion is not controling the height anymore and will leave
each panel with the height you set.
Now, the second problem appears because when you open a panel
we are animating the transition from the element current height to
0px and the other way around by setting a gradual fixed height.
Because of this the last height value used to animate will remain
set to the element. When you change the content into a Panel, the
Panel is no longer able to resize automatically for the reasons I
explained above. Unfortunately there is no solution to this issue
other then to disable the animation by passing "enableAnimation"
option to false into the constructor.
Regards,
Cristian

Similar Messages

Collapsible panel in morphing panel

Hi,
Hope this isnt too complicated:
I searched and found that if you have a nested collapsible panel within another, you can fix the downward expandible problem by changing line 431 of SpryCollapsiblePanel.js from:
this.content.style.height = this.toHeight + "px";
to:
this.content.style.height = "auto";
I'm having a similar problem only I have a collapsible panel nested into one of the tabs of a spry morphing panel. When clicked the collapsible panel expands downwards under the border of the morphing panel, so the content cannot be seen. The above fix did not work.
Here is a link to a morphing panel sample:
http://labs.adobe.com/technologies/spry/ui/samples/MorphPanelsSample.html
My collapsible panel is nested within the second tab at the bottom.
Anyone have a fix for this?
I wrapped the collapsible panel in a div with an overflow of hidden and that didnt work, I also played around with the SpryMorphPanels.js but couldnt come up with anything.

100+ views, any takes on this?
Gramps your magic is needed.
Maybe the markup would help:
<div id="ex1" class="liveSample">
             <ul id="ex1-tabs" class="SimpleTabs" style=" font-size:16px;">
<li><a href="#ex1-s1" >Card</a></li>
<li><a href="#ex1-s2">Biography</a></li>
<li><a href="#ex1-s3">References</a></li>
<li><a href="#ex1-s4">Articles</a></li>
</ul>
                 <div class="content">
        <div id="ex1-s1" class="section">
            <div class="content">
                               content1
                           </div>
                                                </div>
            <div id="ex1-s2" class="section">
            <div class="content" align="left" style="font-family: Lekton;">
<h2>Biography</h2>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">
<p>Content</p>
<p>info</p>
<p>info</p>
                      </div>
                </div>
</div>
</div>
            <div id="ex1-s3" class="section">
            <div class="content" align="left">
<h2>References by this Author</h2>
</div>
                                                </div>
</div>
</div>

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

Tabbed panels, Collapsible Panel, and Server Side Include

Hi,
I'm having a problem with the way a Server Side Include inside a Collapsible Panel displays.
Here is how this particular page is set up.
The page has spry tabbed panels.
>>A panel has one overall Collapsible panel (the main product tab)
>>>>Nested in that Collapsible panel are four other collapsible panels (Overview, Features, Screenshots, What's New).
>>>>>>In each of these four collapsible panels is a server side Include that features that category's content
E verything works fine as far as opening and closing is concerned. However, the problem is with the display. The content panel doesn't resize with the Include content, and therefore, the Include content extends outside the border of the content panel.
I'm thinking this is because it is Include content rather than normal content. Is that right?
Do I fix this by changing the overflow value of one the Tabbed Panel CSS styles? If so, which one should I change, and to what value?
Or if that's not how to fix it, can anyone tell me how?
Thanks a lot,
Mike

Hi, I'm using the latest version of Spry. I modified some CSS rules of the tabbed panels, but not the javascript file. I didn't do anything to the Collapsible Panel rules.
Since first posting this thread, I changed the overflow of the Tabbed Panels Content Group CSS rule to "scroll". That did produce a scroll, but I'd much rather have the panel expand. So, I changed it back the way it was.
Here's the page I'm working on. Click the Court Solutions tab to get to the problem panel.
http://www.ptssolutions.com/Test/public_safety_products_3.shtml
It has different results in IE and FireFox, but doesn't work correctly in either.
Thanks a lot for all your help,
Mike

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

SPRY Collapsible Panel problem in Chrome

I have a SPRY Collapsible Panel in a nested template that is not working properly in Chrome.
Here is an example:
1) Go to http://www.realestate-bigbear.com/search/map-search.html
2) In the "search big bear real estate" area... click on the [+] to expand the "QUICK SEARCH LINKS"
3) The panel opens, sometimes it works, sometimes the bottom is cut off (it is supposed to end with a red bar like at the top). If you move your mouse down a column, you will reveal the missing part
3) Now, if you choose one of the links -- lets say, the first one [Big Bear Lakefronts], you will be taken to a similar page, but to the #search-results anchor. If you again try to reveal the panel with the [+] things only get worse. Sometimes just the top red bar is revealed, sometimes 170px... I cannot figure it out.
The panel seems to be working fine in IE and Firefox, but not Chrome.
Please help,
Thanks in advance.

Using Chrome Version 23.0.1271.64, I could not replicate the problem.
During my analysis, I could not find any problem that could be associated with the proper workings of Spry. However, when I look at http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.realestate-bigbear.com%2Fsear ch%2Fmap-search.html, there seem to be a number of issues that could send your version of Chrome into a frenzy.
After you have fixed the above errors and the problem persists, please come back here and I shall have a more in-depth look.

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

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

How do I make a Spry collapsible panel close by clicking a link in its content?

People don't understand that they have to close a collapsible panel by clicking on the tab. I want to put the word "close" at the end of the content and have the panel slide closed. Example: http://www.canyonranch.com/miamibeach/our_services/

People don't understand that they have to close a collapsible panel by clicking on the tab. I want to put the word "close" at the end of the content and have the panel slide closed. Example: http://www.canyonranch.com/miamibeach/our_services/

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/

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.

Preventing overlapping divs (using spry collapsible panel)?

I'm using a collapsible panel. below that is another div.
When user clicks on collapsible panel it revelas it content. The following div with content(i.e. <div class=""> </div>
             <div class="clean-graypop">
               <input type="radio" value="a" name="question1" />...) moves down. At least when viewed in a browser.
However, when viewed in print preview, and when printed. the contents of the collapsible panels now overlaps the content of the following div contents
<p><strong>Part 1: Statistical inference</strong></p>
            <p> Questions revealed and hidden using buttons.</p>
            <div id="CollapsiblePanel2" class="CollapsiblePanel">
              <div class="CollapsiblePanelTab" tabindex="0"><a href="#" target="_self" class="button"><span>Question 1</span></a><br />
                <br />
              </div>
              <div class="CollapsiblePanelContent">
                <p>Read the following statements (1-5) about measures of effect in epidemiological studies. </p>
                <ol>
                  <li>A measure of effect is a quantity that measures the effect of a factor on the frequency or risk of an outcome.</li>
                  <li>The incidence of a disease cannot be calculated in a case-control study because the controls represent an unknown fraction of the whole population.</li>
                  <li>Rate ratios, risk ratios, odds ratios, differences between means and differences between medians can all be used as effect measures in both cohort and intervention studies.</li>
                  <li>The only measures of effect that can be calculated in a cross-sectional study are prevalence ratios and odds ratios. </li>
                  <li>A prevalence ratio can be calculated in an ecological study.</li>
                </ol>
                <p>Which one of the following options (a-e) is correct?</p>
              </div>
            </div>
            <br />
            <div class=""> </div>
            <div class="clean-graypop">
              <input type="radio" value="a" name="question1" />
              a) Statements 1 and 2 are correct<br />
              <input type="radio" value="b" name="question1" />
              b) Statements 1, 3 and 5 are correct<br />
              <input type="radio" value="c" name="question1" />
              c) Statements 1, 2, 3 and 4 are correct<br />
              <input type="radio" value="d" name="question1" />
              d) Statements 2, 3, 4 and 5 are correct<br />
              <input type="radio" value="e" name="question1" />
              e) All of the statements are correct<br />
            </div>
            <br />

Define a media type CSS for print that compensates. Read here: http://www.w3.org/TR/CSS2/media.html
Mylenium

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

Why is my Spry Collapsible Panel not working in IE

I have created a very very simple website, in dutch (i'm dutch). http://www.dgvastgoed.nl
And on the 'projecten' (dutch word for projects) page i've made some collapsible panels.
The picture is only showing when you click on the text once, when you click again the picture disappears, that's what i want.
But in Internet Explorer it always shows, and that's not what i want.
How do I get this right in Internet explorer?
(if it's possible a second question: How do i get on the 'werkzaamheden' page the 3 links in the top left corner on the position like they are in safari and firefox.)

It lookslike you fixed it, it works fine in IE7 and 8

Nested Collapsible Panels

Similar Messages

Maybe you are looking for