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

Similar Messages

Spry Collapsible panel works in Safari, Firefox but not in IE 7 and 8

Revising a page and wish to have the Spry Collapsible Panel load "closed". Never used Spry before but is works ok as mentioned but when page is opened in IE the panel is open and stays open. Clicking does not close it.
The panel tab reads "CLICK To See Matched Rail & Stile Set-Up Blocks".
Did I mention I am not a programmer? Thanks for the help.
http://www.mlcswoodworking.com/shopsite_sc/store/html/smarthtml/pages/set_3pc_roundover_co ve.htm

jonholcombe wrote:
Did I mention I am not a programmer? Thanks for the help.
Jon,
Not a good way to start. You need to have some basic skills to work on websites. OK, if you want to build a bridge for your toy cars to cross a model railway line, you could probably cope, but to build a bridge in the real world, you need real knowledge.
Having said that, I have pulled all of the relevant code from your page to re-construct the collapsible panel and, although the markup would not be the one I would have gone for, the widget works in all browsers, see the code below. This means that the problem lies elsewhere.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://www.mlcswoodworking.com/SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="http://www.mlcswoodworking.com/SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css">
<style>
#collapsiblepaneltab {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
     height: 18px;
     width: 645px;
     color: #512b05;
     text-align: center;
     margin-top: 0px;
     padding-top: 0px;
     line-height: 21px;
     font-weight: normal;
</style>
</head>
<body>
<table width="645" border="0">
<tr>
    <td><div id="CollapsiblePanel3pcset" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" id="collapsiblepaneltab" tabindex="0"><img src="http://www.mlcswoodworking.com/shopsite_sc/store/html/smarthtml/graphics4/collapsiblepanelarrow102.gif" alt="" width="8" height="8" border="0" /> CLICK To See Matched Rail & Stile Set-Up Blocks</div>
<div class="CollapsiblePanelContent"><table border="1" cellpadding="0" cellspacing="0" width="645">
<tr>
    <td colspan="4" align="center" valign="middle" bgcolor=""><font size="1"><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" size="2" color="black"><strong>SET-UP BLOCKS FOR MATCHED RAIL AND STILE BITS</strong></font></td>
</tr>
<tr>
    <td align="center" valign="middle" bgcolor="#cccc99" width="55"><font size="1"><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"><font color="black"><strong>Item</strong></font></font></font></td>
    <td align="center" valign="middle" bgcolor="#cccc99"><font size="1"><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"><font size="2" color="black"><strong>Set-Up Block Profile</strong></font></font></font></td>
    <td align="center" valign="middle" bgcolor="#cccc99" width="55"><font size="1"><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"><font color="black"><strong>Price</strong></font></font></font></td>
    <td align="center" valign="middle" bgcolor="#cccc99" width="58"></td>
</tr>
<tr>
    <td align="center" valign="middle" width="55"><font size="1"><font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" color="black"><strong>#9745</strong></font></font></td>
    <td align="center" valign="middle"><font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Set-Up Block for round over matched rail & stile bits</font></td>
    <td align="center" valign="middle" width="55"><font size="1"><font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" color="black"><strong>$9.95</strong></font></font></td>
    <td align="center" valign="middle" width="58"><a href="http://www.mlcswoodworking.com/cgi-mlcswoodworking/sb/order.cgi?storeid=*16f8a8beab2fd058071ebc4eb5&dbname=products&sku=%239745&function=add"><font size="2"><img src="../graphics/orderbut.gif" alt="" width="58" height="17" border="0" /></font></a></td>
</tr>
</table>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3pcset", {contentIsOpen:false});
</script>
</body>
</html>
To help you any further would take me way outside the scope of this forum, but if you were to employ me to untangle the mess, I would start afresh.
Gramps

My Spry collapsable panel works on Dreamweaver but not on my published site

I created a one page static microsite for a client and inserted Spry collapsable panel in the content div. It looks perfect on Dreamweaver and even when I previewed it on Chrome, Firefox, and Safari, it looked great. After I uploaded the page, the panel's dissapeared and the text center justified. Any help?
The site is http://www.laurawoodsexposed.com (it's a political website, not a porn website)
Any help would be great.

I created a one page static microsite for a client and inserted Spry collapsable panel in the content div. It looks perfect on Dreamweaver and even when I previewed it on Chrome, Firefox, and Safari, it looked great. After I uploaded the page, the panel's dissapeared and the text center justified. Any help?
The site is http://www.laurawoodsexposed.com (it's a political website, not a porn website)
Any help would be great.

Navigation works in IE but not Firefox or Safari!

Hi guys
Why do my nav links on the hompage work in IE but not in Firefox and Safari? http://www.jasonkieck.com/
Any help would be appreciated

The main reason is you have a <div id="bg_grid"> at the end of your html that is essentially over the top of everything else on your page, including your links. All clicks go to that <div> rather than your links undeneath it. I'm kind of surprised it works in IE to be honest.
You do also have a ton of errors as Gramps points out, but that particular issue is not technically an error, so I have a feeling you could fix the ~100 problems shown by the validator and still have the issue.
You could use z-index to "order the stack" as it were. Changing the z-index attributes for the css of those elements will allow you to change their order, regardless of their location in the html. A higher z-index number, the "closer" it is to the viewer (higher on the stack).
Right now, they are both set to 1, so the one that comes later in the html is on top.
Adding z-index:999 to the menu <div> should do it,

Why do website links to documents stored on another server work in IE but not firefox?

here is the line of code that works fine in IE:
<td><div align="left"><b><a ref="file://sndpdps.ess.ad.addp.com/opssupport/FLOWCHARTS/Batch_Processing/PDF format/BKUP_FACKS_PROD_Daily.pdf" target="_Top">FACKS_PROD Backup</a></b></div></td>

Does it work with 3 "/" after "file:" (i.e., file:///)
'''If this reply solves your problem, please click "Solved It" next to this reply when <u>signed-in</u> to the forum.'''
Not related to your question.
You have multiple old Java Console '''''extensions''''' installed that Java did not clean up when updating. The versions are 6.0.13, 6.0.14, 6.0.15, 6.0.17, 6.0.19, 6.0.20, 6.0.21, 6.0.22, 6.0.23. (You also have version 6.0.24 which is your currently installed version of Java --- see below).
You can remove the old versions by following these instructions: http://kb.mozillazine.org/Java#Multiple_Java_Console_extensions
Not related to your question, but...
You need to update some plug-ins:
*Plug-in check: https://www-trunk.stage.mozilla.com/en-US/plugincheck/
*Shockwave Flash (Adobe Flash or Flash): [https://support.mozilla.com/en-US/kb/Managing%20the%20Flash%20plugin#w_updating-flash Updating Flash in Firefox]
*Next Generation Java Plug-in for Mozilla browsers: [https://support.mozilla.com/en-US/kb/Using%20the%20Java%20plugin%20with%20Firefox#w_installing-or-updating-java Installing or Updating Java in Firefox]

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

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!

Spry Collapsible Panel animation not working

I've inserted a spry collapsible panel into a web page and it works fine when I preview it. But when I upload it to the server the animation does not work in both Safari and Firefox (haven't tried any other browsers). The panel is just static, showing the tab and the panel is open showing the content. It is supposed to be closed by default.
I've added CSS styles but I've also tried it with the default CSS and it didn't work then either.
Both the .css and .js files that were saved in the SpryAssets folder have been uploaded to the server in the same location as the webpage.
I'm working on a Mac and CS4.
URL is www.alpinism.com/New/about.html

Thanks. That didn't resolve my issues unfortunately and the corrections it was suggesting started interfering with other functions on the page so I've gone back to square one, deleted the Spry collapsible panel and inserted javascript from http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm that does the same thing and seems to work in Safari and Firefox. Just need to check in IE but I expect this is going to be the best solution for me.

Spry Collapsible Panel Problem with Safari

Hi my Spry Collapsible Panel looks great in Firefox, Camino, and IE, but the top border, which I am using as a line to divide items in the list, and which I have specified in the CSS page, doesn't show up in Safari and Google Chrome. Just nothing, and everything else works. Any help would be GREATLY appreciated!   My CSS page reads as follows:
.CollapsiblePanel {
    color: #000000;
    border-top-style: solid;
    border-top-width: 0.5px;
    padding-top: 3px;
    padding-right: 0px;
    padding-bottom: 3px;
    padding-left: 0px;
#apDiv3 #CollapsibleLINE {
    border-top-width: 20px;
    border-top-style: solid;
    border-top-color: #330099;
.CollapsiblePanelTab {
    margin: 0px;
    padding: 20px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    font-family: sans-serif;
    font-size: 0.7em;
    font-weight: bold;
    color: #3366FF;
    border-top-width: thick;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-top-color: #FF00CC;
    border-right-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000;
/* This is the selector for a CollapsiblePanel's Content area. It's important to note that
* you should never put any padding on the content area element if you plan to
* use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
* element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
* The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style a
* CollapsiblePanel content container.
.CollapsiblePanelContent {
    margin: 0px;
    padding: 0px;
.CollapsiblePanelTab a {
    text-decoration: none;
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover {
    color: #666666;
.CollapsiblePanelFocused .CollapsiblePanelTab {
#apDiv1 .overlay {
and my page looks like this:
<link href="untitled.css" rel="stylesheet" type="text/css">
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<style type="text/css">

div:active, div:focus, div:hover {
    outline-style: none;
    -moz-outline-style:none;
</style>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" >
<style type="text/css">

</style>
<div id="apDiv5"><img src="IMAGES/logo3.jpg" width="843" height="83" /></div>
<div id="frontphoto"></div>
<div id="apDiv1"><img src="IMAGES/Backgound.jpg" alt="back" width="1032" height="516" /></div>
<div id="apDiv2"><img src="IMAGES/overlay.png" alt="Overlay" width="174" height="720" /></div>
<div id="apDiv3">
<div id="CollapsiblePanel2" class="CollapsiblePanel">
    <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">photography</font></div>
    <div class="CollapsiblePanelContent">
      <table width="118" border="0" align="center" cellpadding="3" cellspacing="0">
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">portraits</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">events</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">landscapes</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">experiments</font></em></td>
        </tr>
      </table>
    </div>
</div>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
    <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">print</font></div>
    <div class="CollapsiblePanelContent">
      <table width="118" border="0" align="center" cellpadding="3" cellspacing="0">
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">posters</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">books & packaging</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">invitations</font></em></td>
        </tr>
      </table>
    </div>
</div>
<div id="CollapsiblePanel4" class="CollapsiblePanel">
    <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">motion</font></div>
    <div>
      <table width="120" border="0" align="center" cellpadding="3" cellspacing="0">
        <tr>
          <td width="114"><em><font size="2" face="Georgia, Times New Roman, Times, serif">websites</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">animations</font></em></td>
        </tr>
      </table>
    </div>
</div>
<div id="CollapsiblePanel5" class="CollapsiblePanel">
    <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">about</font></div>
    <div>
      <table width="120" border="0" align="center" cellpadding="3" cellspacing="0">
        <tr>
          <td width="114"><em><font size="2" face="Georgia, Times New Roman, Times, serif">honors</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">background</font></em></td>
        </tr>
      </table>
    </div>
</div>
<div id="CollapsiblePanel6" class="CollapsiblePanel">
    <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">contact</font></div>
    <div class="CollapsiblePanelContent">
      <table width="120" border="0" align="center" cellpadding="3" cellspacing="0">
        
        <tr>
          <td width="114"><a href="mailto:[email protected]" style="text-decoration:none"><font color="#333333" size="2" face="Georgia, Times New Roman, Times, serif">email</font></a></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">202.321.4248</font></em></td>
        </tr>
      </table>
    </div>
</div>
</div>
<script type="text/javascript">

</script>

I am sorry, I tried in FF, IE7/8 and Chrome and they all look the same.

Question about Spry Collapsible Panel

Hey guys my question is that I have a PSD sliced and imported into Dreamweaver and I was wondering if it was possible to have a Spry Collapsible Panel drop down from a button I designed in Photoshop and brought into dreamweaver? Basically I want a content area to drop down when that button is clicked and I figured a Spry Collapsible Panel might be able to accomplish that. I hope I'm explaining this clearly enough, I'm not very experienced with Dreamweaver. Thanks!

Definitely possible.
You should first import the image into DW.
Insert > Spry > Spry Collapsible Panel
It'll insert a demo panel.
You'll then have to move your image <img src..> into the default first div under spry collapsible as follows:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0"><img src="location-to-your-image.jpg" width="100" height="50" /></div>
<div class="CollapsiblePanelContent">Content</div>
</div>
You'll basically be removing 'TAB' from here to replace it with your img src tag.
Your HTML should look like this:
<!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>Collapsible Test</title>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0"><img src="location-to-your-image.jpg" width="100" height="50" /></div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
Do note that you'll have to copy the supporting spry files to your server for this to work. By default, DW will place them into your project folder once you insert the spry collapsible panel.

Spry Collapsible Panel question

I have a file online that uses a Spry collapsible panel. It can be viewed here. It works beautifully. For one exception. The logo is supposed to be up some 10 pixels or so. The CollapsiblePanelTab is occupying the space.
So I took the CSS for the CollapsiblePanelContent and moved it up 1em <margin-top: -1em;>. That put my logo where it should be. Problem is that when I do this the transparent portion of the logo covers most of the "Hide / Show Logo." It leaves only a sliver of the right of the tab. This file can be viewed here.
The logo consists of the image and the bar underneath it. Yes, I could crop the image down to the central part, making it narrower, but I do want the bar which is wider. And I want the bar to disappear when the Spry is activated so that rules out having it as a separate image..
Even better I would like when the panel is open for the "Hide / Show Logo" to be just above the bar. I tried that and it threw everything out of kilter.
Any suggestions! Thank you in advance for any responses.

Beth,
   Thought of it, did it, didn't work.
   If I remove the logo from the HTML of the page and instead place it in the "background-image" of the CollapsiblePanelContent CSS I get disastrous results. The panel collapses (because there is nothing in the DIV) and the CSS placed background image disappears. Following this thread of thought I could try a much narrower transparent image with nothing in it, just the transparency, and see how that might work. This would keep the DIV open to the desired height. Then I could place the actual, true image in the "background-image" of the DIV CSS.
   For the moment I am going to see if someone perhaps comes up with a solution other than this. The chief reason is that I would lose my dynamic linking of the PSD to the placed image. This file will be a template of thousands of pages spanning many years so the logo will change appropriately.
   This method, of using the image in the CSS itself, also causes some alignment problems within the DIV. My background-image does not center properly. It does so when placed in the HTML of the document.
   Getting back to the original problem, which seems to be the transparency of the image and its width, I don't see any reason why I could not break my image into two pieces and place each one within the CollapsiblePanelContent. Each image in their own DIV contained within the panel content. I could then make the logo part separate from the bar but still have the bar collapse. The logo portion could then be much narrower. I think I will try this method and see what transpires. I could then keep my dynamically linked images. Theoretically!!!
   Thanks for letting me bounce ideas off a fellow thick skull. Not seeing the trees for the forest and all that.
Regards,
Wayne

Spry collapsible panel - repeating region

Hi,
I'm trying to make a repeating region that contains a spry
collapsable panel.
The problem is that i need to develop a way to automatically
increase the ID of the spry panel.
The problem I am encountering is that only the first
Collapsible Panel works properly. The remainder are displaying the
data, but will not open and close when their tabs are clicked. It
appears that all are being repeated as
id="CollapsiblePanel1".
Does anyone have a way to increment the Tab & Content
ID's?
On another forum, somebody has suggested using the following
PHP - although having never used PHP before, I am uncertain as to
where I insert this into my code:

bump

Spry Collapsible Panel problem when previewing in web browser

Hello.
I have inserted a spry collapsible panel into my website, made ZERO adjustments to any of the scripting or even css styling, and previewed the panel in my Safari browser. It does not seem to be working correctly. I've attached a couple of images showing what the panel looks like in the browser. My site is not published yet, so I cannot give out the url.
Is something wrong with the js file? I tried the panel earlier on a different site on the same computer and it was working fine.
the "Tab" menu text does not fit inside the grey box. Everything collapses fine, however, the gray box is too thin for the text. I've tried adjusting it in the CSS sheet, but it doesn't seem to change anything.
This is the panel in the collapsed state. It looks bad. I know it's not supposed to work like this.
When I preview the site in "live view" everything works fine...
// SpryCollapsiblePanel.js - version 0.8 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//   * Redistributions of source code must retain the above copyright notice,
//     this list of conditions and the following disclaimer.
//   * Redistributions in binary form must reproduce the above copyright notice,
//     this list of conditions and the following disclaimer in the documentation
//     and/or other materials provided with the distribution.
//   * Neither the name of Adobe Systems Incorporated nor the names of its
//     contributors may be used to endorse or promote products derived from this
//     software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.CollapsiblePanel = function(element, opts)
this.element = this.getElement(element);
this.focusElement = null;
this.hoverClass = "CollapsiblePanelTabHover";
this.openClass = "CollapsiblePanelOpen";
this.closedClass = "CollapsiblePanelClosed";
this.focusedClass = "CollapsiblePanelFocused";
this.enableAnimation = true;
this.enableKeyboardNavigation = true;
this.animator = null;
this.hasFocus = false;
this.contentIsOpen = false;
this.openPanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_DOWN;
this.closePanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_UP;
Spry.Widget.CollapsiblePanel.setOptions(this, opts);
this.attachBehaviors();
Spry.Widget.CollapsiblePanel.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.CollapsiblePanel.prototype.addClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.CollapsiblePanel.prototype.removeClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.CollapsiblePanel.prototype.hasClassName = function(ele, className)
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
return false;
return true;
Spry.Widget.CollapsiblePanel.prototype.setDisplay = function(ele, display)
if( ele )
ele.style.display = display;
Spry.Widget.CollapsiblePanel.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.CollapsiblePanel.prototype.onTabMouseOver = function(e)
this.addClassName(this.getTab(), this.hoverClass);
return false;
Spry.Widget.CollapsiblePanel.prototype.onTabMouseOut = function(e)
this.removeClassName(this.getTab(), this.hoverClass);
return false;
Spry.Widget.CollapsiblePanel.prototype.open = function()
this.contentIsOpen = true;
if (this.enableAnimation)
if (this.animator)
this.animator.stop();
this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, true, { duration: this.duration, fps: this.fps, transition: this.transition });
this.animator.start();
else
this.setDisplay(this.getContent(), "block");
this.removeClassName(this.element, this.closedClass);
this.addClassName(this.element, this.openClass);
Spry.Widget.CollapsiblePanel.prototype.close = function()
this.contentIsOpen = false;
if (this.enableAnimation)
if (this.animator)
this.animator.stop();
this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, false, { duration: this.duration, fps: this.fps, transition: this.transition });
this.animator.start();
else
this.setDisplay(this.getContent(), "none");
this.removeClassName(this.element, this.openClass);
this.addClassName(this.element, this.closedClass);
Spry.Widget.CollapsiblePanel.prototype.onTabClick = function(e)
if (this.isOpen())
this.close();
else
this.open();
this.focus();
return this.stopPropagation(e);
Spry.Widget.CollapsiblePanel.prototype.onFocus = function(e)
this.hasFocus = true;
this.addClassName(this.element, this.focusedClass);
return false;
Spry.Widget.CollapsiblePanel.prototype.onBlur = function(e)
this.hasFocus = false;
this.removeClassName(this.element, this.focusedClass);
return false;
Spry.Widget.CollapsiblePanel.KEY_UP = 38;
Spry.Widget.CollapsiblePanel.KEY_DOWN = 40;
Spry.Widget.CollapsiblePanel.prototype.onKeyDown = function(e)
var key = e.keyCode;
if (!this.hasFocus || (key != this.openPanelKeyCode && key != this.closePanelKeyCode))
return true;
if (this.isOpen() && key == this.closePanelKeyCode)
this.close();
else if ( key == this.openPanelKeyCode)
this.open();
return this.stopPropagation(e);
Spry.Widget.CollapsiblePanel.prototype.stopPropagation = function(e)
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
Spry.Widget.CollapsiblePanel.prototype.attachPanelHandlers = function()
var tab = this.getTab();
if (!tab)
return;
var self = this;
Spry.Widget.CollapsiblePanel.addEventListener(tab, "click", 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);
if (this.enableKeyboardNavigation)
// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
// by default.
// Find the first element within the tab container that has a tabindex or the first
// anchor tag.
var tabIndexEle = null;
var tabAnchorEle = null;
this.preorderTraversal(tab, function(node) {
if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
if (tabIndexAttr)
tabIndexEle = node;
return true;
if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
tabAnchorEle = node;
return false;
if (tabIndexEle)
this.focusElement = tabIndexEle;
else if (tabAnchorEle)
this.focusElement = tabAnchorEle;
if (this.focusElement)
Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "focus", function(e) { return self.onFocus(e); }, false);
Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "blur", function(e) { return self.onBlur(e); }, false);
Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "keydown", function(e) { return self.onKeyDown(e); }, false);
Spry.Widget.CollapsiblePanel.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.CollapsiblePanel.prototype.preorderTraversal = function(root, func)
var stopTraversal = false;
if (root)
stopTraversal = func(root);
if (root.hasChildNodes())
var child = root.firstChild;
while (!stopTraversal && child)
stopTraversal = this.preorderTraversal(child, func);
try { child = child.nextSibling; } catch (e) { child = null; }
return stopTraversal;
Spry.Widget.CollapsiblePanel.prototype.attachBehaviors = function()
var panel = this.element;
var tab = this.getTab();
var content = this.getContent();
if (this.contentIsOpen || this.hasClassName(panel, this.openClass))
this.addClassName(panel, this.openClass);
this.removeClassName(panel, this.closedClass);
this.setDisplay(content, "block");
this.contentIsOpen = true;
else
this.removeClassName(panel, this.openClass);
this.addClassName(panel, this.closedClass);
this.setDisplay(content, "none");
this.contentIsOpen = false;
this.attachPanelHandlers();
Spry.Widget.CollapsiblePanel.prototype.getTab = function()
return this.getElementChildren(this.element)[0];
Spry.Widget.CollapsiblePanel.prototype.getContent = function()
return this.getElementChildren(this.element)[1];
Spry.Widget.CollapsiblePanel.prototype.isOpen = function()
return this.contentIsOpen;
Spry.Widget.CollapsiblePanel.prototype.getElementChildren = function(element)
var children = [];
var child = element.firstChild;
while (child)
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
return children;
Spry.Widget.CollapsiblePanel.prototype.focus = function()
if (this.focusElement && this.focusElement.focus)
this.focusElement.focus();
Spry.Widget.CollapsiblePanel.PanelAnimator = function(panel, doOpen, opts)
this.timer = null;
this.interval = 0;
this.fps = 60;
this.duration = 500;
this.startTime = 0;
this.transition = Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition;
this.onComplete = null;
this.panel = panel;
this.content = panel.getContent();
this.doOpen = doOpen;
Spry.Widget.CollapsiblePanel.setOptions(this, opts, true);
this.interval = Math.floor(1000 / this.fps);
var c = this.content;
var curHeight = c.offsetHeight ? c.offsetHeight : 0;
this.fromHeight = (doOpen && c.style.display == "none") ? 0 : curHeight;
if (!doOpen)
this.toHeight = 0;
else
if (c.style.display == "none")
// The content area is not displayed so in order to calculate the extent
// of the content inside it, we have to set its display to block.
c.style.visibility = "hidden";
c.style.display = "block";
// Clear the height property so we can calculate
// the full height of the content we are going to show.
c.style.height = "";
this.toHeight = c.offsetHeight;
this.distance = this.toHeight - this.fromHeight;
this.overflow = c.style.overflow;
c.style.height = this.fromHeight + "px";
c.style.visibility = "visible";
c.style.overflow = "hidden";
c.style.display = "block";
Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.start = function()
var self = this;
this.startTime = (new Date).getTime();
this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stop = function()
if (this.timer)
clearTimeout(this.timer);
// If we're killing the timer, restore the overflow property.
this.content.style.overflow = this.overflow;
this.timer = null;
Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stepAnimation = function()
var curTime = (new Date).getTime();
var elapsedTime = curTime - this.startTime;
if (elapsedTime >= this.duration)
if (!this.doOpen)
this.content.style.display = "none";
this.content.style.overflow = this.overflow;
this.content.style.height = this.toHeight + "px";
if (this.onComplete)
this.onComplete();
return;
var ht = this.transition(elapsedTime, this.fromHeight, this.distance, this.duration);
this.content.style.height = ((ht < 0) ? 0 : ht) + "px";
var self = this;
this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
Spry.Widget.CollapsiblePanelGroup = function(element, opts)
this.element = this.getElement(element);
this.opts = opts;
this.attachBehaviors();
Spry.Widget.CollapsiblePanelGroup.prototype.setOptions = Spry.Widget.CollapsiblePanel.prototype.setOptions;
Spry.Widget.CollapsiblePanelGroup.prototype.getElement = Spry.Widget.CollapsiblePanel.prototype.getElement;
Spry.Widget.CollapsiblePanelGroup.prototype.getElementChildren = Spry.Widget.CollapsiblePanel.prototype.getElementChildren;
Spry.Widget.CollapsiblePanelGroup.prototype.setElementWidget = function(element, widget)
if (!element || !widget)
return;
if (!element.spry)
element.spry = new Object;
element.spry.collapsiblePanel = widget;
Spry.Widget.CollapsiblePanelGroup.prototype.getElementWidget = function(element)
return (element && element.spry && element.spry.collapsiblePanel) ? element.spry.collapsiblePanel : null;
Spry.Widget.CollapsiblePanelGroup.prototype.getPanels = function()
if (!this.element)
return [];
return this.getElementChildren(this.element);
Spry.Widget.CollapsiblePanelGroup.prototype.getPanel = function(panelIndex)
return this.getPanels()[panelIndex];
Spry.Widget.CollapsiblePanelGroup.prototype.attachBehaviors = function()
if (!this.element)
return;
var cpanels = this.getPanels();
var numCPanels = cpanels.length;
for (var i = 0; i < numCPanels; i++)
var cpanel = cpanels[i];
this.setElementWidget(cpanel, new Spry.Widget.CollapsiblePanel(cpanel, this.opts));
Spry.Widget.CollapsiblePanelGroup.prototype.openPanel = function(panelIndex)
var w = this.getElementWidget(this.getPanel(panelIndex));
if (w && !w.isOpen())
w.open();
Spry.Widget.CollapsiblePanelGroup.prototype.closePanel = function(panelIndex)
var w = this.getElementWidget(this.getPanel(panelIndex));
if (w && w.isOpen())
w.close();
Spry.Widget.CollapsiblePanelGroup.prototype.openAllPanels = function()
var cpanels = this.getPanels();
var numCPanels = cpanels.length;
for (var i = 0; i < numCPanels; i++)
var w = this.getElementWidget(cpanels[i]);
if (w && !w.isOpen())
w.open();
Spry.Widget.CollapsiblePanelGroup.prototype.closeAllPanels = function()
var cpanels = this.getPanels();
var numCPanels = cpanels.length;
for (var i = 0; i < numCPanels; i++)
var w = this.getElementWidget(cpanels[i]);
if (w && w.isOpen())
w.close();
})(); // EndSpryComponent

I have inserted a spry collapsible panel into my website, made ZERO
adjustments to any of the scripting or even css styling
That is good, that means that I have a local copy of the scripting and css files eliminating the need to attach the code to a post.
Is something wrong with the js file? I tried the panel earlier on a
different site on the same computer and it was working fine
The fact that it works on a different site means that something is correct. My assumption is that the scripting and css files are doing their job correctly and to answer your question regarding the js file, no.
Having eliminated the Spry original JavaScript and CSS files as being the culprits, there must be a problem with the rest of the site, incorrect HTML, other interfering JavaScript or CSS.
I can keep guessing, but only those persons that are privy to your code can give you any positive input. Please find a way to upload your files so that we can see the code in context.
To this end, screen captures do not assist in solving the problem, they only add to others' amusement at seeing the problem.
Ben
PS I forgot to say, welcome to our community and yes I am a cynical old codger, sorry.

Spry collapsible panel stays open in Internet Explorer.

I'm trying to use the spry collapsible panel to hide and show inormation, and it will not stay closed. I've used the default closed option in the properties panel, and made sure the eye in design view is closed. Please give some suggestions for correcting this problem.

The out-of-the-box SpryCollapiblePanel works like a charm.
This means that you have altered the HTML, CSS and/or the JS.
Because we are not privy to what you have done, it is not possible to help you find a solution.
I recommend that you upload the site and supply a link to that site.

Jqzoom widget inside spry collapsible panel

I am attempting to place the jqzoom widget inside a spry collapsible panel. The wodget works fine in the html page created for it but will not work in the collapsible oanel page. I believe all documents are in the appropriate folder.
Here is the code for the page:
<!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>Untitled Document</title>
<link href="twoColFixLtHdr.css" rel="stylesheet" type="text/css" />
<LINK rel=stylesheet type=text/css href="css/jquery.jqzoom.css">
<style type="text/css">
#leftbox {
float: left;
width: 70%;
margin-left: 5px;
#rightbox {
float: right;
width: 25%;
</style>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/jquery.jqzoom1.0.1.js" type="text/javascript"></script>
<style type="text/css">
a:hover {
color: #C36;
a:active {
color: #999;
#wrapper #outsideedgewrapper #outsidebox .container .content #CollapsiblePanel1 .CollapsiblePanelTab strong {
text-align: left;
#wrapper #outsideedgewrapper #outsidebox .container .content p strong {
color: #333;
#wrapper #outsideedgewrapper #outsidebox .container .content p {
color: #000;
#topofpage {
width: 100px;
font-size: small;
float: right;
</style>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
</script>
<style type="text/css">
a:visited {
color: #333;
a:hover {
color: #C36;
a:active {
color: #999;
.outsidebox {
width: 1120px;
margin-right: auto;
margin-left: auto;
background-repeat: no-repeat;
background-position: left 90px;
</style>
<script src="javascript/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTooltip.js" type="text/javascript"></script>
<style type="text/css">
</style>
<link href="SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />
<style type="text/css">
h2 {
font-size: x-large;
#wrapper #outsideedgewrapper #outsidebox .container .footer h5 a {
text-align: center;
#wrapper #outsideedgewrapper #outsidebox .container .footer h5 a {
</style>
<link href="2LinkColor.css" rel="stylesheet" type="text/css" />
<link href="css/jqzoom.css" rel="stylesheet" type="text/css" />
<script type="text/xml">

</script>
</head>
<body>
<div id="wrapper">
<div id="outsideedgewrapper">
    <div class="outsidebox" id="outsidebox">
      <div class="container">
        <div class="header">
          <p><em><a name="topofpage" id="topofpage"></a></em></p>
<p> </p>
          <p> </p>
          <p> </p>
          <p><br />
            <br />
          </p>
        </div>
         <div class="sidebar1">
          <p> </p>
          <ul class="nav">
            <li><a href="index.html"><strong>Home</strong></a></li>
            <li><a href="PDf/GAIL SMOLINSKIS EDUCATION - 2010.pdf" target="_new"><strong>Dr. Gail's Education & Credentials(Pdf )</strong></a></li>
<li><a href="philosophyofregeneration.html"><strong>Sunrider Philosophy of Regeneration™</strong></a></li>
            <li><a href="Homeopathy.html"><strong>Homeopathy</strong></a></li>
            <li><a href="LowIntensitylasertherapy.html" target="_new"><strong> Low Intensity Laser Therapy</strong></a></li>
          </ul>
<strong>Dr. Gail Smolinski, DNM®</strong><br />
           Doctorate of Natural Medicine®<br />
           <br />
           Email<br />
           <a href="mailto:[email protected]" class="sidebarlinkcolor">[email protected]</a> <br />
           <br />
           <span class="white"><strong>PH:306-783-1261</strong></span><br />
           Fax:
           306-783-2450<br />
           Box 1625<br />
           Yorkton, SK<br />
           S3N 3L2<br />
<br />
           <strong>Clinic Hours</strong><br />
           Monday - Friday<br />
           9am - 6pm
           <br />
           <br />
           <span id="sprytrigger1"><strong>Coming Events</strong></span><br/>
          </p>
        </div>
        </p>
        <div class="content">
          <div>
            <h2>An Ounce of Prevention Natural Health Center</h2>
          </div>
          <div id="rightbox"><img src="images/gaigrey3.jpg" width="186" height="295" align="top" id="Image2" /></div>
          <p><em>"The doctor of the future will give no medicine, but will interest her or his patients in the care of the human frame, in a proper diet, and in the cause and prevention of disease."<br />
          Thomas A. Edison (1847 - 1931)</em></p>
          <p>Dr. Gail Smolinski, a <span class="focusedtext">Doctor of Natural Medicine</span>, has a natural health clinic at Yorkton, Saskatchewan.
          </p>
          <p>Dr. Gail Smolinski is a member in good standing of the <br />
          <span class="focusedtext">Examining Board of Natural Practitioners of Canada</span> (EBNMP) <a href="http://www.ebnmp.com" title="http://www.ebnmp.com/" target="_blank"><strong>www.ebnmp.com</strong></a>, the <span class="focusedtext">Saskatchewan Association of Doctors of Natural Medicine (SADNM) </span><a href="http://www.sadnm.com/" title="http://www.sadnm.com/" target="_blank"><strong>www.sadnm.com </strong></a>and the <span class="focusedtext">International Organization of Nutritional Consultants</span> (IONC) <a href="http://www.ionc.org" title="http://www.ionc.org/" target="_blank"><strong>www.ionc.org</strong></a></p>
          <p>Doctors of Natural Medicine utilize treatments and lifestyle changes that facilitate the natural healing process, recognizing the inherent self-healing process in every person.<em> <a href="http://www.sadnm.com/" target="_new"><strong>More information....</strong></a></em></p>
          <p>In her natural health clinic, Dr. Gail offers individual health consultations, Low Intensity Laser Therapy, detoxification foot baths and bio-energetic therapies, as well as a wide variety of professional health products.</p>
          <p>Dr. Gail has her <span class="focusedtext">Doctor of Naturopathy</span> degree and is <span class="focusedtext">B</span><strong><span class="focusedtext">oard Certified in both Traditional Naturopathy and Nutritional Wellness</span>.</strong></p>
          <p>She is a <span class="focusedtext">certified Low Intensity Laser Therapist</span>, offering patients safe and effective Low Intensity Laser therapy for soft tissue and sports injuries, wound healing, dermatological conditions and a variety of musculoskeletal problems. <a href="http://www.bioflexlaser.com/patients/" target="_new"><strong><em>More information...</em></strong></a></p>
          <p>She is a <span class="focusedtext">Master Herbalist</span>, specializing in Sunrider Chinese food grade herbs which promote regeneration of the body. Dr. Gail also utilizes Gemmotherapy and Aromatherapy.       </p>
          <p>Dr. Gail is also a Registered Nutritional Consultant, a professional <span class="focusedtext">Homeopath</span> and a <span class="focusedtext">Holistic Iridologist</span>. </p>
          <p>Her bi-weekly column <span class="CollapsiblePanelClosed"><em>“An Ounce of Prevention”</em></span> can be found in the <em>“News Review Extra” </em>and the <em>"Northeast Chronicle"</em>. </p>
          <p>Dr. Gail is also available for <span class="focusedtext">public speaking</span> engagements. She has been the keynote speaker for many groups, specializing in topics that address <span class="focusedtext">the body</span> (health and nutrition), <span class="focusedtext">the mind</span> (motivational speaking) and <span class="focusedtext">the spirit</span> (sharing her Bible-based faith). </p>
          <p><strong>CLINIC SERVICES</strong></p>
          <p>Dr. Gail is available for individual health consultations by appointment. She does nutritional assessments, as well as iridology and homeopathy. Dr. Gail's professional supplements include herbal and homeopathic formulas, Gemmotherapy remedies and therapeutic grade essential oils. She also offers   detoxification footbaths to reduce the load of toxins in the body.</p>
          <p>Although an in-clinic visit is the most effective, Dr. Gail can also help people who cannot travel to see her, due to long distances or poor health. In these cases, she offers telephone assessments to create an appropriate custom-made individual health program, which is suited to the patient’s particular needs. The required health supplements can be mailed or shipped by bus, if necessary. </p>
          <p>Gift Certificates are also available.</p>
          <p><strong>FREQUENTLY ASKED QUESTIONS</strong></p>
          <div id="CollapsiblePanel1" class="CollapsiblePanel">
            <div class="CollapsiblePanelTab" tabindex="0">
              <p><strong><a name="panel1" id="panel1"></a><img src="images/arrow.gif" width="30" height="23" hspace="8" />Can you explain what Homeopathy is all about?</strong></p>
            </div>
            <div class="CollapsiblePanelContent">
              <p><br />
                <br />
              </p>
              <p>Homeopathy is a wonderful system of natural medicine which is safe, non-toxic and effective. It is so safe that expectant mothers and newborn babies can use it, except for a few specific remedies. </p>
<p>A homeopathic remedy contains a very minutely diluted dose of the original medicinal ingredient, and that is why it is so safe. The higher potencies of a remedy do not even have any of the original substance in them, only the memory or energy from it. The purpose of a homeopathic remedy is to give specific information to the body. Then, the body can use this information to heal and repair.</p>
              <p>A homeopathic remedy can be selected <em>according to the symptoms</em>. It can also be selected <em>according to the patient’s constitution</em>, which considers many factors about an individual. </p>
              <p>Food preferences, general features, personality and temperament, such as whether he wants to be left alone or comforted when he does not feel well, what makes his symptoms better and what makes them worse, even a person’s fears, are considered, because they are all part of who that unique individual is. A person’s constitutional remedy will help him with a lot of different symptoms, because it was selected especially for him.</p>
              <p>I would not want to be without homeopathic remedies. You can take them as required, without worrying about side effects. They can make your life so much more comfortable. They can be used to stimulate your immune system, so that, eventually, you do not require them as often, if at all. For example, during allergy season, people can get a lot of relief from homeopathic formulas for allergies.<br clear="all" />
              </p>
              <p>Homeopathic medicine can also help with mental and emotional symptoms, not only physical problems. For example, homeopathic remedies can be helpful for those who are anxious, depressed or even grieving.    <br />
              <a href="#panel1" class="closepanelbutton" onclick="CollapsiblePanel1.close();MM_goToURL('parent','#panel1');return document.MM_returnValue">Close Panel</a></p>
              <p> </p>
            </div>
          </div>
          <div id="CollapsiblePanel2" class="CollapsiblePanel">
            <div class="CollapsiblePanelTab" tabindex="0">
              <p><strong><img src="images/arrow.gif" alt="" width="30" height="23" hspace="8" />What is Gemmotherapy?</strong></p>
            </div>
            <div class="CollapsiblePanelContent">
              <p> </p>
              <p> </p>
              <p>Gemmotherapy is a branch of phytotherapy (therapy from   plants) that uses freshly- picked buds and young shoots from organic trees and   shrubs to make natural remedies. They are carefully stabilized at harvest to   ensure that no vitamins, minerals, natural plant hormones or nucleic acids are   lost. These remedies are full of the energy and therapeutic properties of the   buds. They are meticulously prepared in a solution of water, alcohol and   glycerine to extract all their beneficial attributes. </p>
              <p><a href="#" class="closepanelbutton" onclick="CollapsiblePanel2.close();MM_goToURL('parent','#panel1');return document.MM_returnValue">Close Panel</a></p>
            </div>
          </div>
          <div id="CollapsiblePanel7" class="CollapsiblePanel">
            <div class="CollapsiblePanelTab" tabindex="0">
              <p><strong><img src="images/arrow.gif" alt="" width="30" height="23" hspace="8" />Why is Gemmotherapy so effective?</strong></p>
            </div>
            <div class="CollapsiblePanelContent">
              <p> </p>
              <p>Gemmotherapy is highly effective because the buds and young   shoots contain all the genetic information of the future plant. Since they are   extracts of developing tissues, gemmotherapy remedies combine the properties of   the whole plant, including the flowers, the leaves, the fruits, the sapwood and   the rootlets. Extensive research and clinical studies have been carried out to   identify the properties of different buds and to determine the conditions for   which each one is best used.</p>
              <p>This explains the wide range of applications and   effectiveness of Gemmotherapy remedies for all ages.</p>
              <p><a href="#panel1" class="closepanelbutton" onclick="CollapsiblePanel7.close();MM_goToURL('parent','#panel1');return document.MM_returnValue">Close Panel</a></p>
            </div>
          </div>
<div id="CollapsiblePanel3" class="CollapsiblePanel">
    <div class="CollapsiblePanelTab" tabindex="0">
      <p><strong><img src="images/arrow.gif" alt="" width="30" height="23" hspace="8" id="Image1" />What is Iridology and how does it work?</strong></p>
      </div>
    <div class="CollapsiblePanelContent">
      <p><br />
        <br />
        Iridology is a fascinating natural tool of health assessment. The more I do iridology, the more accurate I see that it is!</p>
      <p>Iridology involves looking into a person’s eyes with a light and magnifying lens. I can do a health assessment by looking into the colored part of the eyes, which is called the iris. </p>
      <p>In iridology, there is a map of the iris, which corresponds to the different organs and      </p>
      <p>structures of the body. Iridology Chart <span class="jqZoomWindow"><a href="jquery-ui-1.7.2/images/BIG_IMAGE.jpg" title="Iridology" class="iridology2">
        <script type="text/javascript">
// BeginOAWidget_Instance_2148522: #iridology2
$(document).ready(function(){
      var options ={
      zoomType: 'standard',
      zoomWidth: 200,
      zoomHeight: 200,
      xOffset: 10,
      yOffset: 0,
      position: "left" ,
      lens:true,
      lensReset : false,
      imageOpacity: 0.2,
      title : false,
      alwaysOn: false,
      showEffect: 'show',
      hideEffect: 'hide',
      fadeinSpeed: 'medium',
      fadeoutSpeed: 'medium',
      preloadImages :true,
      showPreload: true,
      preloadText : 'Loading zoom',
      preloadPosition : 'center'
      $(".iridology2").jqzoom(options);
// EndOAWidget_Instance_2148522
        </script>
        <img src="jquery-ui-1.7.2/images/SMALL_IMAGE.jpg" align="left" title="Iridology" /> </a></span>
        <script type="text/javascript">
// BeginOAWidget_Instance_2148522: #iridology2
$(document).ready(function(){
      var options ={
      zoomType: 'standard',
      zoomWidth: 200,
      zoomHeight: 200,
      xOffset: 10,
      yOffset: 0,
      position: "left" ,
      lens:true,
      lensReset : false,
      imageOpacity: 0.2,
      title : true,
      alwaysOn: false,
      showEffect: 'show',
      hideEffect: 'hide',
      fadeinSpeed: 'medium',
      fadeoutSpeed: 'medium',
      preloadImages :true,
      showPreload: true,
      preloadText : 'Loading zoom',
      preloadPosition : 'center'
      $(".iridology2").jqzoom(options);
// EndOAWidget_Instance_2148522
        </script>
        </a></p>
<p><br />
<br />
</p>
<p> </p>
<p> </p>
<p> </p>
<p><br />
<br />
<br />
It can be used to help determine problem areas in the body, which may have been acquired genetically. It can also be used to identify areas of congestion and environmental toxins that have accumulated in the body since birth, such as liver or kidney toxins. </p>
      <p>For instance, one of my clients was having continual problems with a sluggish bowel, which was not improving in spite of my health recommendations for her colon. When I did an iridology assessment for her, though, I discovered that the problem was originating in the small intestine. I adjusted her health program accordingly, and she did much better after that!<br />
        <br />
        <a href="#panel1" class="closepanelbutton" onclick="CollapsiblePanel3.close();MM_goToURL('parent','#panel1');return document.MM_returnValue">Close Panel</a></p>
      </p>
      </div>
</div>
          <div id="CollapsiblePanel4" class="CollapsiblePanel">
            <div class="CollapsiblePanelTab" tabindex="0">
              <p><strong><img src="images/arrow.gif" alt="" width="30" height="23" hspace="8" />Can Iridology be used preventatively?</strong></p>
            </div>
            <div class="CollapsiblePanelContent">
              <p><br />
                <br />
              Absolutely! It can be very valuable for prevention! Let’s say that you are in a canoe, enjoying a relaxing, peaceful ride down a calm, scenic river on a beautiful summer day. Meanwhile, I am riding in an airplane, just above the same river, and I can spot you in your canoe. </p>
              <p>However, I can also see that, around the next bend, there is a set of swirling rapids and a very steep, dangerous waterfall. </p>
              <p>You have no idea of what you are headed for, but I can warn you. Fortunately, since we both have cell phones, I can call you immediately, to warn you of the imminent danger. You can decide then to pull onto the shore, and check out the rapids before deciding whether or not to proceed. Or you can decide to turn the canoe around, and head back the other way. You can also choose to ignore me, of course, but, no matter what you choose, you will have been warned!</p>
<p>In Iridology, for instance, if I see that a person has a congested or toxic bowel, I can advise him to do a colon cleanse. <a href="PDf/EYE SPY.pdf" target="_new">More information</a><br />
    <a href="#panel1" class="closepanelbutton" onclick="CollapsiblePanel4.close();MM_goToURL('parent','#panel1');return document.MM_returnValue">Close Panel</a></p>
<p> </p>
            </div>
          </div>
          <div id="CollapsiblePanel5" class="CollapsiblePanel">
            <div class="CollapsiblePanelTab" tabindex="0">
              <p><strong><img src="images/arrow.gif" alt="" width="30" height="23" hspace="8" />How do you combine the different therapies to help patients?</strong></p>
            </div>
            <div class="CollapsiblePanelContent">
              <p><br />
                <br />
                <br />
              That’s certainly part of what makes my approach so effective! I can use Iridology to help pinpoint the specific problems. Homeopathy and nutrition can be used as assessment tools as well. It’s like having more than one tool in your tool kit. The more professional tools one has, the better. </p>
              <p>This allows me to create an individualized health plan that incorporates different resources, including nutritional supplements, essential oils, gemmotherapy formulas and homeopathic remedies, as required. It is ideal to support the body on 3 different levels - at the nutritional level, at the cellular level, and at the energetic level.</p>
              <blockquote>
                <p><a href="#panel1" class="closepanelbutton" onclick="CollapsiblePanel5.close();MM_goToURL('parent','#panel1');return document.MM_returnValue">Close Panel</a></p>
                <p> </p>
              </blockquote>
            </div>
          </div>
          <div id="CollapsiblePanel6" class="CollapsiblePanel">
            <div class="CollapsiblePanelTab" tabindex="0">
              <p><strong><img src="images/arrow.gif" alt="" width="30" height="23" hspace="8" />Can you give me an analogy to compare our health to?</strong></p>
            </div>
            <div class="CollapsiblePanelContent">
              <p><br />
                <br />
              Sure! Think of your car. It won’t get you to your destination if you don’t have enough fuel to get there. And it can’t be polluted fuel or watered down fuel, because that’s just asking for trouble. Your fuel has to have the right octane rating. </p>
              <p>Your body is like a car; it’s your go-mobile! If you don’t supply it with the right fuel (nutrition),you will lose your get-up-and-go! When you nourish your body properly, you will naturally tend to have more energy. </p>
<p>Even so, you can fuel up your car with good quality fuel, but if the fuel pump needs repair, then it’s still not going to work properly for you. If you have a body part that needs repair, homeopathy can help. </p>
              <p>We also give our cars an oil change on a regular basis. Similarly, we can cleanse, regularly, to clear out our organs, such as the liver, the kidneys, the skin and the intestines, of toxins that accumulate over time.</p>
              <p>We can also use homeopathic formulas to clean out the receptors of the cells in our bodies, which is where toxic residues can accumulate. Then, our go-mobiles can run more efficiently! </p>
              <p>There is one difference, though. We can trade in our car, when it gets old and worn out. But, we cannot trade in our bodies! We get one only, and it needs to last us a lifetime! So we need to take care of it the best we can! <br />
                <br />
              <a href="#panel1" class="closepanelbutton" onclick="CollapsiblePanel6.close();MM_goToURL('parent','#panel1');return document.MM_returnValue">Close Panel</a></p>
              <p> </p>
            </div>
            <strong><br />
          </strong></div>
<p><strong>    PATIENT TESTIMONIALS</strong></p>
          <table width="90%" border="0" align="center" cellpadding="10">
            <tr>
              <td><h5><em>...My acquaintance with Dr. Gail Smolinski happened in two ways. First, through her bi-weekly news column, "An Ounce of Prevention" in the News Review Extra: giving information on healthful living and explaining how our amazing bodies work. Dr. Gail's smiling photo also introduced her to me.
                My by-mail purchase of a flu kit from Dr. Gail protected me from contracting any of the flu bugs making the rounds this winter. Thanks, Dr. Gail! <br />
                My second acquaintance with Dr. Gail was a visit to her natural health clinic for treatments. Her smile is sunny and real! She introduced me to homeopathic remedies and the impressive Quantum Biofeedback machine. Dr. Gail is a very encouraging caregiver. I am very pleased to have much-improved Health and I've also gained a new friend! </em></h5>
                <h5><em>Sincerely, Shirley L. </em>              _______________________________________________________________</h5>
<h5><em>...Hi! My name is Carol. I have IBS (Irritable Bowel Syndrome). IBS controlled my life.</em></h5>
                <h5><em>Before I went to Dr. Gail Smolinski, I could not work, go shopping or do things with my family. But I got mad and took control of the IBS!</em></h5>
                <h5><em>I called Dr. Gail Smolinski, DNM. We sat down and we talked about how I felt. She gave me some natural medicine. I have been on this for about 5 months.</em></h5>
                <h5><em>I feel so good about the things I got. The natural medicine has helped me out a lot. I can go to work without looking for the bathrooms. I can do the things I was afraid to do! I feel like I’m alive!</em></h5>
              <h5><em>I went to my doctor, and it seems they couldn’t help. But Dr. Gail Smolinski helped me. Thank you, Dr. Gail! </em></h5></td>
            </tr>
          </table>
          <p> </p>
          <h5 class="fltrt"><a href="#topofpage">Top of Page</a><br />
                  </h5>
        </div>
        <script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false, enableAnimation:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4", {contentIsOpen:false});
var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5", {contentIsOpen:false});
var CollapsiblePanel6 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel6", {contentIsOpen:false, enableAnimation:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false, enableAnimation:false});
var CollapsiblePanel7 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel7", {contentIsOpen:false});
        </script>
        <div class="footer">
          <h5 class="footer">Web Design by<a href="http://www.pixelsandpaper.com"> Pixels & Paper Web Design </a><br />
Copyright © 2011 An Ounce of Prevention Natural Health Center - All rights reserved 
          </h5>
          </div>
        </div>
    </div>
</div>
</div>
<div class="tooltipContent" id="sprytooltip1">Meet Dr. Gail for a mini Iridology Session at the Grain Miller's Harvest Showdown in Yorkton, SK - Gallagher Centre- Flexihall - Nov. 2 (4pm to 7:30 pm), Nov. 3,4,5 (1pm to 7:30 pm) </div>
<script type="text/javascript">
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1");
</script>
</body>
</html>

With the exeption of images, to add external content to a document you will need to make use of either serverside or clientside code.
Have a look at the SpryHTMLPanel here http://labs.adobe.com/technologies/spry/samples/htmlpanel/html_panel_sample.html
Otherwise, please supply a link to your site so that we can come up with alternatives.
Gramps

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

Similar Messages

Maybe you are looking for