Help with spry collapsible panel

I have several spry collapsible panels that I am using for
navigation and want an open panel to close automatically when a new
one is opened. Can this be done? I checked the "customuze this
widget" in the property inspector but does not give any info on the
behavior of them. I am sure it is in the java code but I am not a
Java expert by any means.

Have a look at the last example http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
Gramps

Similar Messages

Need help with spry collapsible panel (menu)

I learn as I go when I created my website http://www.invitation-fascination.com/shapes.html and so far I've created a page with 13 spry collapsible panels- I think it came out pretty well. Now this is what I want to add to the page:
I want to create a selector (drop down) menu above the panels with the option to select any one of the 13 panels.
Once selected it will move directly to that panel and open it.
I've tried the piselect thing and with the "open" and "close" button that will programatically open the panels, but what I want is for the panel to be selected from the menu and then the page goes directly to that panel and it then opens.
Is there a way this can be done? Please help
I'm really not that good at this stuff- please be easy with your response- thank you

Have a look at the last example http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
Gramps

Need help with Spry Collapsible panels

I'm fairly inexperienced with Dreamweaver (CS4) and especially new to the Spry feature, so bear with me... I need all the help I can get! I've inserted six Spry collapsible panels to an HTML page and uploaded everything (including SpryCollapsiblePanel.css and SpryCollapsiblePanel.js), but they're automatically displaying as open and I can't click on them or close them. I'd like them to be closed until selected and opened.
What am I doing wrong?
Here's the URL: http://www.nicolegriffith.com/trustm.html
Thank you!

I just looked at your code, and your SpryAssets content is not there. This is the extent of your SpryCollapsablePanel.js
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="en" lang="en">
<head>
<title>404 - Not Found</title>
</head>
<body>
<h1>404 - Not Found</h1>
</body>
</html>
Make sure your spry assests folder is in your root directory and upload the files once you know they are where they should be.
Gary

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.

HELP WITH SPRY TABBED PANEL -

On one page I created a spry-tabbed panel with a distinctive look.
On another page, same website, I created another spry tabbed panel with its own distinctive look, its own color scheme.
On doing the second page I discovered I was also inadvertantly changing the color, boarders etc to the spry tabbed panel on my first page.
Don't want to do that.
How do I create a spry panel on 2 different pages within the same web site and let each have its own independent spry set of attributes
Howard Blume
[email protected]
max os x system10.6.6
dreamweaver 5

Hi Ken:
When I insert a new spry panel it appears with all the css from the other page.
When I began to make changes the other page reflexs those changes.
Don't know how to get a separate SpryCss sheet. Do you?

Need help to modify Spry Collapsible Panel js settings

I posted this in the DW forum, but then found this which seems to be more appropriate....sorry if I'm screwing things up....
I would very much appreciate if some could help me get rid of the light blue (cyan?) colored blurred 4-6 px frame that appears around the tabs when they're in focus. Or is this a behaviour built into the browsers?
TIA
Dan

Hi Dan,
I am sorry putting you in the same class as the majority.
In your case you will probably already know that the CSS file contains everything necessary for styling the widget, and the JavaScript file gives the widget its functionality.
That is why I give Newbies the advice to definately not touch the JavaScript files.
In your case you are looking at an unwanted border around the selected panel tab. This sounded like a styling matter and, until I have seen an online page containing the problem to prove otherwise, I am staying with my resolution that it is a styling problem. I am even more convinced when I look at a Spry Collapsible Panel that uses the original unadultorated JavaScript and Stylesheets which does not have that problem.
I hope this helps.
Ben
BTW, I enjoy these discussions because I learn from them. So please give it back to me and prove me wrong.

Spry collapsible panel with spry data

I have created a spry collapsible panel and wanted to put
srpy data in it, to dynamically load.
i also want to hide the entire panel if no data is available.
It will show the data, but the click to open/close does not
work.
here is the code.

I have made some progress, thanks, however im still getting
some odd formatting issues, for example, the 1st panel shows with
different design to the rest of the panels.
this is my code;
<div id="region" spry:region="ds1">
<div id="repeat" spry:repeat="ds1">
<div id="CollapsiblePanel{ds_RowID}"
class="CollapsiblePanel">
<div class="CollapsiblePanelTab"
tabindex="{ds1::ds_RowID}"> <h1>{title} - last amended
{amended}</h1></div>
<div
class="CollapsiblePanelContent"><strong>{message}</strong>
Added by <strong>{owner}</strong> on
<strong>{added} </strong>(REF:
<strong>{id}</strong>) <a href="/service/index.asp"
target="_self">View full details</a></div>
</div>
<script type="text/javascript">

</script>
As you can see, I am inserting {ds_RowID} in the variable
name, in order for the panels to operate independantly, however
have I coded it correctly?

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.

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

Dynamic data in Spry Collapsible Panel

Hi guys,
Am trying to get data from a Data Set into the Spry
Collapsible Panel, with little luck. Have tried the following and
was wondering if i am doing something wrong?
<div spry:region="dsProduct">
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab"
tabindex="0">{product_name}</div>
<div
class="CollapsiblePanelContent">">{product_details}</div>
</div>
</div>
This example displays the field i want from the data set
{product_name}, but will not collapse open the panel containing
{product_details}.
Any suggestions?

hi Jay,
will this help you?
Forum
thread

Make a spry collapsible panel open on hover??

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

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

Spry Collapsible Panels - Way to set them open only once per visit?

I'm wondering if there is a way to set a Spry Collapsible
Panel to be automatically open on the initial loading of the site,
but as people navigate around the site and back and forth from the
home page, to be able to have it closed on subsequent visits to the
home page.
Right now I have a collapsible panel set to OPEN by default
when someone first hits the home page, but if they navigate around
the site and then click to the home page again, they get the panel
open again. Naturally, that will end up annoying people.
Any suggestions?
Thanks in advance!
Sara

Flash local shared object can help with this. Here is some info:
http://www.bestflashanimationsite.com/tutorials/4/
http://www.permadi.com/tutorial/flashSharedObject/index.html
http://www.kirupa.com/developer/mx/sharedobjects.htm
Best wishes,
Adninjastrator

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

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

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

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

How to apply different styles to multiple spry collapsible panels?

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

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

Help with spry collapsible panel

Similar Messages

Maybe you are looking for