Collapsible Panel Widget vs. Accordion Widget

The difference between the two types of widgets appears to be that the latter has the structure: tab1/contenta; tab/content2; etc. with only one tab/content open at one time, whereas the former has structure tab/content1,content2 etc though and all are open or closed.
Is this a correct understanding of the difference between the two widgets? Also, how does one add or delete additional content sections to the Collapsible panel widget?
Thanks, CMA

cma cma wrote:
The difference between the two types of widgets appears to be that the latter has the structure: tab1/contenta; tab/content2; etc. with only one tab/content open at one time, whereas the former has structure tab/content1,content2 etc though and all are open or closed.
Is this a correct understanding of the difference between the two widgets? Also, how does one add or delete additional content sections to the Collapsible panel widget?
Thanks, CMA
You might like to consult the following three webpages. The first two will give you a clear idea of what is meant by the terms tabbed and collapsible panels in an Adobe context. The last page is my own implementation of Adobe's SPRY Accordion Panel.
The Tabbed Panel Widget: http://livedocs.adobe.com/en_US/Spry/SDG/help.html?content=WS6FED301A-59A1-45ce-BC1F-11074 3A27FE9.html
The Collapsible Panel Widget: http://livedocs.adobe.com/en_US/Spry/SDG/help.html?content=WS3C6DC7F9-0443-46a4-AC65-D222B BEBAD15.html
The Accordion Widget (Example): http://homepage.mac.com/moogoonghwa/Imagine_Prototype/Content/
Roddy

Similar Messages

Display external html page in (Collapsible Panel widget)

i everybody
is there a way to display external html page in (Collapsible Panel widget)
All the example a seen is with raw text in it
is the panel can display different object instead of simple text
At least a internal designed html page
Thanks

Thanks... surely a easy one for you
But its a great tool and its exatly what i want
even my js button works trough it
Thanks again

SPRY Collapsible Panel widget

Hi.
I've built a page with several collapsible panels and
inserted some flash animations on the tabs. When I click on a part
of the panel tab that is not filled with the animation, it opens
and closes normally. When I click on the animation, however, it
does nothing. Can anyone tell me how to solve this?
Thank you in advance.

Post a link to the page please so we can see what you have
tried to do so far.

Collapsible Panels with one default open

I'm using the collapsible panels widget, I was wondering if
there was a way to have one panel open while the others are closed
by default. I know it's possible with the spry accordion, but is it
possible for the collapsible panels as well?
Thanks!

Yes it is possible and it has a different look and feel to
it.
An accordion panel can only have one panel open at a time
whereas the sliding panel can have more open or closed.
Try something like this:
cpg = new
Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup", {
contentIsOpen: false });
cpg.openPanel(4);

Spry Accordions, Tabbed Panels, and Collapsible Panels: changing colors

I wanted to alert everyone to a great new Community article published by our very own David Powers. The article details the various best practices and methods for changing the colors of Accordion, Tabbed Panels, and Collapsible Panels widgets, including tab backgrounds, borders, and so on.
Here's the article:
http://kb2.adobe.com/community/publishing/504/cpsid_50437.html
Customization questions are pretty frequent in both the Spry and Dreamweaver forums. This new styling guide is sure to answer lots of peoples' questions.
Furthermore, the appearance of such an article is a great example of how Community content can interact and live symbiotically with Adobe Help. We've linked directly to David's piece from our own customization pages for the Spry Accordion, Tabbed Panels, and Collapsible Panels widgets:
Customize the Accordion widget
Customize the Tabbed Panels widget
Customize the Collapsible Panels widget
Thanks a lot to David for hammering out this article.
If you're interested in publishing Community articles of your own, you can download the Community Publishing AIR application and get right to work!

The borders you see, are called outline, its a accesiblity feature of the browsers,
Actually called 'focus' lines :-)
Here's an article about the Bluefocus lines seen in Safari.
http://www.brunobergher.com/blog/2009/01/19/safaris-blue-focus-lines/
Without creating a Spry widget myself right now to test, but I'm sure thata there is a 'focus' rule in the css...
trying the
{outline:none;}
on that rule.

Spry Collapsible Panel Problem in Safari

When check my site in Firefox, there are no problems, but
when I open it in Safari, none of the CSS settings are applied to
the Collapsible Panel widget. Some settings I have make the widget
200 px width and make it have a black background, but Safari
doesn't show these. HERE IS THE CODE OF MY HOMEPAGE:
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<style type="text/css">
body {
background: url(Victorias%20Secret%20models.jpg) fixed
no-repeat center bottom;
</style>
<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"></div>
<div class="CollapsiblePanelContent">
<p>BLOG</p>
<p>LISTEN</p>
<p>WATCH</p>
<p>ABOUT</p>
</div>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel1",
{contentIsOpen:false});
</script>
</body>
</html>
AND HERE IS THE CODE OF MY CSS
@charset "UTF-8";
.CollapsiblePanel {
margin: 0px;
padding: 0px;
width: 200px;
color: #FFFFFF;
background-color: #000000;
.CollapsiblePanelTab {
background-color: #000000;
margin: 0px;
padding: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font-family: sans-serif;
font-size: 0.7em;
font-weight: bold;
color: #FFFFFF;
height: 40px;
.CollapsiblePanelContent {
margin: 0px;
padding: 0px;
background-color: #000;
.CollapsiblePanelTab a {
color: black;
text-decoration: none;
background-color: #000;
height: 40px;
.CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #000;
color: #FFFFFF;
.CollapsiblePanelTabHover, .CollapsiblePanelOpen
.CollapsiblePanelTabHover {
background-color: #000;
.CollapsiblePanelFocused .CollapsiblePanelTab {
background-color: #000;
THANKS FOR YOUR HELP

Can't tell by that code, can you post a URL to the page?
Ken Ford
Adobe Community Expert - Dreamweaver/ColdFusion
Fordwebs, LLC
http://www.fordwebs.com
"kkaiser1" <[email protected]> wrote in
message news:[email protected]...
> When check my site in Firefox, there are no problems,
but when I open it in
> Safari, none of the CSS settings are applied to the
Collapsible Panel widget.
> Some settings I have make the widget 200 px width and
make it have a black
> background, but Safari doesn't show these. HERE IS THE
CODE OF MY HOMEPAGE:
> <!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>
>
> <title>Untitled Document</title>
>
> <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
> <style type="text/css">
>
> body {
> background: url(Victorias%20Secret%20models.jpg) fixed
no-repeat center
> bottom;
> }
>
> </style>
> <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"></div>
> <div class="CollapsiblePanelContent">
> <p>BLOG</p>
> <p>LISTEN</p>
> <p>WATCH</p>
> <p>ABOUT</p>
> </div>
> </div>
> <script type="text/javascript">
>
> var CollapsiblePanel1 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel1",
> {contentIsOpen:false});
>
> </script>
> </body>
> </html>
>
>
> AND HERE IS THE CODE OF MY CSS
>
> @charset "UTF-8";
>
> .CollapsiblePanel {
> margin: 0px;
> padding: 0px;
> width: 200px;
> color: #FFFFFF;
> background-color: #000000;
> }
>
> .CollapsiblePanelTab {
> background-color: #000000;
> margin: 0px;
> padding: 0px;
> cursor: pointer;
> -moz-user-select: none;
> -khtml-user-select: none;
> font-family: sans-serif;
> font-size: 0.7em;
> font-weight: bold;
> color: #FFFFFF;
> height: 40px;
> }
>
> .CollapsiblePanelContent {
> margin: 0px;
> padding: 0px;
> background-color: #000;
> }
>
> .CollapsiblePanelTab a {
> color: black;
> text-decoration: none;
> background-color: #000;
> height: 40px;
> }
>
> .CollapsiblePanelOpen .CollapsiblePanelTab {
> background-color: #000;
> color: #FFFFFF;
> }
>
> .CollapsiblePanelTabHover, .CollapsiblePanelOpen
.CollapsiblePanelTabHover {
> background-color: #000;
> }
>
> .CollapsiblePanelFocused .CollapsiblePanelTab {
> background-color: #000;
> }
>
>
> THANKS FOR YOUR HELP
>

How to fill my collapsible panels with dynamic content from PHP scripts?

Hi people,
I'm trying to generate dynamically generated content in a
Spry collapsible panel. Previously I've generated PHP files that as
an output generates a dynamic table with the data I want to show. I
figured it would be possible to use an php include option to
generate this table in a content section of a Spry collapsible
panel. However, when I do this the collapsible panels appear to
join and when panel1 is clicked all tables close instead of only
panel 1 and all tables are put benath each other without putting it
in each seperate panel. But when i replace the file with only the
text "content" it works fine. Do i maybe have to add some kind of
command at the end of my php file to make it look like the
"content"-text or is this not the problem?
I've been looking for the answer now for a couple of weeks on
various forums and nothing seemed to work for me. Can please
somebody help me out?
Greets,
Damian
The code in its non working form:
<head>

<link href="SpryAssets/SpryCollapsiblePanel.css"
rel="stylesheet"
type="text/css" />

<script src="SpryAssets/SpryCollapsiblePanel.js"
type="text/javascript"></script>
</head>
<body>

<div id="CollapsiblePanel1" class="CollapsiblePanel1">
<div class="CollapsiblePanelTab">Tab</div>
<div class="CollapsiblePanelContent"><?php
include('details_books.php');?></div>
</div>
<div id="CollapsiblePanel2" class="CollapsiblePanel2">
<div class="CollapsiblePanelTab">Tab</div>
<div class="CollapsiblePanelContent"><?php
include('details_authors.php');?></div>
</div>

<script type="text/javascript">
var CollapsiblePanel1 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
</script>
<script type="text/javascript">
var CollapsiblePanel2 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel2");
</script>
</body>

you need to save the page as a php page (.php) It works
fine

Accordion Panel Widget - open and close speed.

Hello,
Is there any way to change the speed that an Accordion Panel Widget opens and closes?
I would like it to be slower than it is now.
For my project it would be more relaxed and graceful.
Thanks,
Chris.

HI Chris
With Accordion we cannot setup the speed as of now , but you can try out composition widget where we can define transition, auto play speed.
Thanks,
Sanjit

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

Problem with Accordion Widget INSIDE Sliding Panel Widget

Hello,
perhaps I should not do this, but I nested an Accordion
Widget inside a Sliding Panels Widget:
- There are eight Panels.
- Each one contains a complete Accordion.
The sliding works fine, and so does the Accordion animation,
but the text inside the Accordion Panel Tabs won't move along, when
a tab is activated. I need to hover the mouse over the accordion to
make the panel texts appear again.
Of course, when I un-nest the widgets and move the Accordion
widget out of the Sliding Panel widget, everything is fine.
My question is:
- am I demanding "too much" by nesting the widgets?
- or should this basically work, and the problem arises from
rivalling scripts?
Here is a link:
Nested
widgets Test
The horizontal top menu will activate the sliding panels, but
as of now only the leftmost menu item contains an Accordion (I know
the CSS does not look nice yet).
Is there anything I can optimise to get this to work?
Thank you so much,
Greetings, Jensen
Edit: The problem does NOT occur in Firefox, but in
Safari.

Hi John,
That is the expected behavior if the "Overlap items below" is unchecked. Please refer to the following link http://screencasteu.worldsecuresystems.com/aish/2013-08-21_1947.png. If you don't want the page to wiggle up and down, please check the box shown in the screenshot.
Regards,
Aish

How can I use the accordion panel widget with a footer?

Hi,
My question is may be not clear. So I'm gonna be more specific. I'm using a menu for my website with the accordion panel widget. The menu is working fine and when I'm opening it, it pushs the items below on the pages.
My problem is with the footer of the page. Because, when the items below the widgets are pushed, they go below the footer and the footer is not pushed.
Is there any way to pushe the footer when I use the accordion widget? I don t want to overlap it.

I assume this is what you want to achieve in the footer....
Make sure in Muse before you export that the panel is closed, and also as Brad suggested, make sure Overlap Items Below is unchecked. I would also check the "Can Close All" button.

Dashed rule between menu items nested inside an accordion panel widget in Muse?

I have a vertical menu widget nested inside an accordion panel widget and I want a dashed rule under each menu item. I already know I can have a solid rule by assigning a stroke to just the bottom of each menu item container.
I manually created dashed rules by "step and repeating" a 1px black square followed by 2px of space to a 380px width. I positioned these dashed rules under each menu item and grouped them with the menu. Then I placed the menu widget with the dashed rules into the content container for the accordion panel. The menu expands and collapses in the Preview mode but the dashed rules don't show up.
Muse CC 2014, iMac OS10.9

The link again is I forgot to add http to the link before, but it should have worked.
http://www.lipowiec.org/test/index.php
a) used Dreamweaver to create new site selected 1 column, elastic, centered, header, and footer
b) used spry to add horizontal menu to header
c) followed instructions from Spry Help
http://livedocs.adobe.com/en_US/Spry/SDG/index.html?lang=en_US ->
working with spry widgets -> working with the menu bar widget -> Customize the dimension of menu items as indicated
To change the dimension of menu items by changing the width properties of the menu item’s li and ul tags.
Locate the ul.MenuBarVertical li or ul.MenuBarHorizontal li rule.
Change the width property to a desired width, or change the property to auto to remove a fixed width, and add the property and value white-space: nowrap; to the rule.
Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.
Change the width property to a desired width (or change the property to auto to remove a fixed width).
Locate the ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li rule.
Add the following properties to the rule: float: none; and background-color: transparent;.
Delete the width: 8.2em; property and value.
Under IE it's broken, under the other browsers it works.
There need to be more IE HACKS added.

Sliding Panels widget

Hi,
I do not know if this is the right place. If not, please tell me where to ask.
I do not know nothing of programing and my use of a program is to "click" on shortuct. I am familiar with using Tabbed panels, Accordion and Collapsible panel.
But I would like to know how to use sliding panels. I have read a lot on this links:
http://livedocs.adobe.com/en_US/Spry/SDG/help.html?content=WS5F39D2B9-A298-472a-8E50-AC4B1 0984EFC.html
but I do not know how to start. I do not understand English very much and do not have computer knowledge.
So, is there a way for me to "click" on a widget or icon of a SPry to make sliding panels?
On this link are samples, but I realy have no idea, how to make this.
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
Thank you

Hi Natasa,
If you go to http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSampl e.html and right click on the page, a popup menu will appear. There you will see an item name 'view source'. By clicking on that item it will open a new window with the source code. Select all and copy the source code to your HTML editor on your own computer. There you can experiment with the code at hearts content.
I hope this helps.
Ben
PS. My apologies, I did not realize that this topic had already been answered.
Message was edited by: vw2ureg

Spry Sliding Panel Widget Template

I have inserted the Spry Tabs and Accordion widgets and
adjusted using CSS. Can I do the same with a Spry Sliding Panel
Widget?, if so where can I access a sliding panel widget to
adjust?.
I have found a tutorial to create a Spry Sliding Panel Widget
inserting code, but my code experience is zero.
Thanks

Also copy the required Javascript file and CSS file to the
correct location..
in the <head></head> of the page u will see
<script src=""> go to the location of the src.. copy and
paste the files to your new location in the same folder, or change
the src to match the new location of the file. Do the same for the
CSS wich is included at the <link href=

Edit JS on spry sliding panels widget to fix auto panel height problem

Hi guys,
Ive been trying for a while to make the sliding panels widget
show each panel in its own height instead of the longest panel's height in the container.
I tried reading all the js file to play with it and find a solution but the truth is i dont know how to do what i want.
I do, however, have a list of things that i believe if implemented should work,
could you help me do these fixes on the js? ( any one you know how to or think will work )
1. edit so that: Panels dont have any height ( or panel content display none ) if it isnt current panel. If current panel is "id:1" the assume class 1 style properties. As soon as it looses focus/"currentpanel" class it looses its class 1 properties. And the new current panel ("id:2") assumes its own class 2 properties. And so on.
2. edit so that: PanelContainer ( the one that holds all the panels ) displays none BUT the current panel. So all panels could be display none unless they assume the "currentpanel" class and so they change to display. Maybe this way the container assumes only the height of the displayed panel and looses it once its no longer displayed assuming the next displayed one.
3. edit so that: Panel container checks for current panel's height and assumes that height instantly ( there is still a panel inside the container that would be longer than the current panel, maybe with overflow hidden this isnt a problem )
4. Using SpryDOMUtils.js I am currently playing with the code pasted below,
the idea came from Gramp's Spry Sliding Panels Group Navigation Buttons cookbook
He addresses a different problem, but since it has to do with identifying the current panel and doing something when the panel is x number, i thought there could be a height property set for each panel when each is the current one, atleast something can be done with this, my problem is i dont know how to set that something. Please check out the following code:
<script>
// The following function - setPanelNavigation() - assumes the following
// 1. Sliding Panels have a class of SlidingPanelsContent AND a unique ID
// 2. The Previous Panel button has an ID of previousPanel
// 3. The Next Panel button has an ID of nextPanel
// 4. SpryDOMUtils.js has been linked
function setPanelNavigation() {
    var current = sp1.getCurrentPanel(); // Get the current panel
    var panelCount = sp1.getContentPanelsCount(); // Get the total number of panels
    var panelNumber=1; // Give a value to the first panel number
    Spry.$$(".SlidingPanelsContent").forEach(function(node) { // Cycle through the panels
                 if (node.id==current.id){ // The current panel now receives a number
         if ( panelNumber==1 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 750); //
           if ( panelNumber==2 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 250); //
        panelNumber++; // Go to next panel after incrementing the count
Spry.Utils.addLoadListener(setPanelNavigation); // Set buttons to initial value
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>
What am i doing wrong in that bit ? I thought i had it there, but it didnt work.
Anyone, please help. Thank you.

wait my bad, the link to my page is:
http://www.pupr.edu/department/industrial/students.asp
** no s on department

Collapsible Panel Widget vs. Accordion Widget

Similar Messages

Maybe you are looking for