Accordion Scrolling

I'm super new to Flex as in I started using it last night.
I've done fairly well between Google and the Programming Flex 2
book. I have an Accordion with 6 headers. The 5th header's child
and another Accordion. It will be dynamic and may contain anywhere
from 5 to 20 children. Currently, if the child accordion exceeds
the vertical limit it begins to scroll. However, I need to force
the parent accordion to scroll and not allow the child accordion to
scroll at all. Any tips are appreciated.
Gregg

Hi,
You are setting yourself up for a difficult time with this
requirement. The Accordion won't scroll and it doesn't have
scrollbars. The container parent of the Accordion may get
scrollbars if the Accordion becomes larger than its parent. So what
you'd have to do is have one of those large components tell its
parent Accordion to become large enough to show that child wholly
and then tell that Accordion's parent to become larger which should
get you scrollbars.
But I have to tell you, what you describe sounds like an
awfully hard to use interface.

Similar Messages

Accordion scroll bar missing in IE6

As soon as I specify a width for an accordion- .Accordion {
width:275px;} -, the vertical scroll bars disappear. Why is
that and
what can be done about it?

I was able to find the problem, which I believe is an IE6
overflow
issue. By default, SpryAccordion.css sets the Accordion
container to
overflow:hidden; and in IE6 as soon as you specify a width,
scrollbars
are also hidden. So to overcome this problem I needed to
remove
overflow:hidden; from the Accordion container but leave
overflow:auto;
on for AccordionPanelContent.
That solved the problem of not seeing the scrollbars and I
was now able
to control the width of the accordion. However, because IE6
places the
scrollbar outside of the container it is scrolling, the
scrollbar was
hanging out to the right of the accordion and the panel tabs
ended
abruptly at the scrollbar left edge. This meant that the
background
color of the panel tabs stopped before reaching the edge of
the
accordion div. I solved this issue by setting the right
margin of the
AccordionPanelTab to -16px only for IE6 and below using the
underscore
hack. Here's an excerpt of my AccordionPanelTab declarations:
margin: 0; /* for compliant browsers */
_margin: 0 -16px 0 0; /* to fix for ie6 & below */
Of course this is not a perfect solution because the
accordions have
different widths depending on whether or not they have
scrollbars, but
this is the best solution given the shortcomings of IE6. I
hope this
helps others.

Spry Accordion gains scroll bars in IE7

Can anyone suggest a fix for a problem I've encountered on a
spry accordion? The accordion has eight panels, each containing an
image. Each image has a hot spot linking the image on that
particular accordion panel to another web page. When I view in
different browsers, FF and IE6 look fine and work fine. When viewed
in IE7, each of the panels has scroll bars on the bottom and right
side, as if the image is too large.
What is causing the scroll bars to appear only in IE7?
Thanks!

Same problem here too. Also, I can't get a Spry horizontal
menu bar to center within the accordion. As with the extra spacing
glitch, it looks fine in everything except IE7. Is IE still the
browser of choice these days? I don't use it, but I do try to get
things to look correct in it.
Thanks

Accordion Widget not saving current scroll position

Accordion widget saves scroll position in Firefox, however in
IE7 the position gets reset to the center of Accordion Widget.
Example. Select Alabama and then select Wisconsin to see
effect.
See www.Qualite1.com/contactUs.html

Hi ghaug,
This is due to the tabindex attribute that is on the
top-level element of the accordion. Apparently when an element is
focused in IE, it tries to make sure the top of that element is in
view, so it is "conveniently" scrolling it into view for you.
To prevent this behavior for accordions like yours that don't
fit neatly into a single screen, you are going to have to remove
the tabindex attribute from the top-level accordion element. If you
still want/need keyboard navigation of your accordion, then you
have to switch to using links in your accordion tabs. You can find
an example here:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#EnablingKey boardNavigationWithLinks
--== Kin ==--

How do I make my Spry Accordion menu scroll *with* my webpage?

Afternoon,
I'm a newbie designer, just helping a friend build a website that will incorporate her blog and other stuff, but what I'm trying to do is set up my Spry Menu (set as a vertical accordion style) to scroll with the page.
I want it to scroll within the confines on my div class="contentright"
CSS for div class:
.contentright {
    padding-top: 410px;
    float: left;
    width: 210px;
HTML of same div class:
<div class="contentright">
                            <div id="SpryAccordion1" class="Accordion" tabindex="0">
                            <div class="AccordionPanel">
                                <div class="AccordionPanelTab tabTop">
My webpage has a set width and is set to expand based on what I have in my main content area. I'm just not sure what to code and where to code it (in my HTML or in the CSS), to set my Spry to scroll. I'm assuming it's something with a .float functionality, maybe? I just need it to stay beneath my top padding so that it doesn't get overlapped by my main header logo that I had to set to position: absolute;
Any ideas?

Here is my HTML Coding
<html>
    <head>
        <title>BetsyMarvin.com</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="description" content="" />
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />
        <script type="text/javascript" src="SpryAssets/SpryAccordion.js"></script>
        <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
    <body>
        <div class="container">
            <div class="bannerArea">
                <div class="bannernav"><a href="#" >Privacy Policy</a> | <a href="mailto:[email protected]" >Contact Us</a> | <a href="#" >Site Map</a></div>
                <span class="toplogo"></span>
                <div class="toplogo"><a href="#"><img src="images/3 Words Buildup without BG.png" width="550" height="565" align="right" /></a></div>
            </div>
            <div class="contentArea">
                <ul class="leftnavigation">
                    <li><a href="theme_02_design.html">Home Page</a></li>
                    <li><a href="blog_design.html">Blog</a></li>
                    <li><a href="lessons_design.html">Lessons</a></li>
                </ul>
                <div class="content">
                    <div class="contentleft">
                        <h1>Welcome to my Website</h1>
                        <img class="imageright" src="images/faith reason.jpg" border="0" />
                        <p>text</p>
                    </div>
                    <div class="contentright">
<div id="SpryAccordion1" class="Accordion" tabindex="0">
                            <div class="AccordionPanel">
                                <div class="AccordionPanelTab tabTop">
                                    <div class="accordion_340_tab">CONTACT ME</div>
                                </div>
                                <div class="AccordionPanelContent">
                                    <div class="acontent">
                                      <p> <a href "mailto:[email protected]"> Email</a></p>
                                      <p> <a href="http://www.cornerstonemi.org">Church Website</a></p>
                                      <p> <a href="http://www.facebook.com/betsy.marvin.32">Facebook</a></p>
                                      <p> <a href "www.twitter.com/betsymarvin"> Twitter</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="AccordionPanel">
                                <div class="AccordionPanelTab middleTab">
                                    <div class="accordion_340_tab">ABOUT ME</div>
                                </div>
                                <div class="AccordionPanelContent">
                                    <div class="acontent">
                                        <p>text</p>
                                    </div>
                                </div>
                            </div>
                            <div class="AccordionPanel">
                                <div class="AccordionPanelTab middleTab">
                                    <div class="accordion_340_tab">PASSIONS</div>
                                </div>
                                <div class="AccordionPanelContent">
                                    <div class="acontent">
                                        <img class ="imageright" src="images/love.jpg" width="130" height="64" />
                                             <p>text</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="AccordionBottom"></div>
                    </div>
                    <div style="clear:both;"></div>
                </div>
                <div style="clear:both;"></div>
            </div>
            <div class="footerArea">
                <div class="copyright">© 2013 Betsymarvin.com | All rights reserved.</div>
            </div>
        </div>
<script type="text/javascript">

        </script>
    </body>
CSS Style Sheet
body {
    margin: 0px;
    color: #666;
    font-size: 12px;
    font-family: Arial;
    font-family: Arial, Verdana, Univers;
    background-color: #545454;
    background-image: url(images/page_bkgd.jpg);
    background-repeat: repeat-x;
h1 {
    color: #4F6179;
    font-size: 24px;
    font-weight: normal;
    margin: 3px 0px 25px 0px;
h2 { color: #333333; font-size: 14px; font-weight: normal; margin: 0px 0px 15px 0px; }
a          { color: #ba7007; }
a:visited { color: #ba7007; }
a:hover    { color: black; }
.container {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(images/content_bkgd_tile.jpg);
    background-repeat: repeat-y;
/* BANNER AREA */
.bannerArea {
    width: 980px;height: 145px;
    background-color: #4971a2;
    background-image: url(images/banner_bkgd.jpg);
    background-repeat: no-repeat;
.bannernav {
    padding-top: 10px;
    padding-left: 10px;
    float: left;
    color: white;
    font-size: 10px;
    font-family: Arial, Helvetica, Verdana, sans-serif;
.bannernav a {
    color: white;
    text-decoration: none;
.bannernav a:visited {
    color: white;
.bannernav a:hover {
    color: #ECBB7B;
.toplogo {
    position: absolute;
    z-index: 100;
    padding-right: 0px;
    float: right; margin-left: 675px;
    padding-top: 10px;
.content {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 25px;
    padding-right: 10px;
    background-image: url(images/content_bkgd.jpg);
    background-repeat: no-repeat;
    z-index: 100;
/* LEFT NAVIGATION */
.leftnavigation {
    width: 192px;
    margin: 70px 0px 0px 0px;
    padding-left: 8px;
    float: left;
    list-style-type: none;
.leftnavigation a{
    margin-left: 0px;
    width: 156px;
    padding-left: 15px;
    padding-top: 5px;
    padding-right: 20px;
    padding-bottom: 5px;
    float: left;
    color: #CCA72F;
    font-size: 10px;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    background-image: url(images/nav_normal.jpg);
    background-repeat: repeat-x;
    background-position: 0px 0px;
    border-bottom: 1px solid #999;
.leftnavigation a:visited{
    color: #5C4C17;
.leftnavigation a:hover{
    color: #ffffff;
    background-image: url(images/nav_down.jpg);
/* CONTENT AREA */
.contentleft {
    width: 400px;
    padding-left: 30px;
    padding-right: 20px;
    float: left;
.contentright {
    padding-top: 410px;
    float: left;
    width: 210px;
.imageright {
    margin-top: 10px;
    margin-left: 10px;
    float: right;
.imageleft {
    margin-right: 10px;
    float: left;
/* FOOTER AREA */
.footerArea {
    width: 980px;height: 88px;
    background-color: #cfcfcf;
    background-image: url(images/footer_bkgd.jpg);
    background-repeat: no-repeat;
.copyright {
    border-top: solid;
    border-color: #737a90;
    border-width: 2px;
    margin-left: 240px;
    margin-right: 30px;
    padding-top: 12px;
    color: #666666;
    font-size: 10px;
    font-family: Verdana,Arial, Helvetica, sans-serif;
CSS for the SPRY Accordion
.Accordion {
    overflow: hidden;
    width: 255px;
.AccordionPanel {
    margin: 0px;
    padding: 0px;
.AccordionPanelTab {
    color: #CCA72F;
    margin: 0px;
    cursor: pointer;
    padding: 10px 30px 10px 20px;
    font-weight: bold;
    -moz-user-select: none;
    -khtml-user-select: none;
    background-repeat: no-repeat;
    background-image: url(../images/accordion_255_tab_normal.gif);
.AccordionPanelContent {
    overflow: auto;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background-image: url(../images/accordion_255_tile.gif);
.AccordionPanelOpen .AccordionPanelTab {
    color: #d88a37;
    background-image: url(../images/accordion_255_tab_down.gif);
.AccordionPanelTabHover {
    background-image: url(../images/accordion_255_tab_over.gif);
.AccordionFocused .AccordionPanelTab {
    background-color: #000000;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
    background-color: #000000;
/* Custom AUC classes */
#accordion_255 {
    background-image: url(../images/accordion_255_tile.gif);
    background-repeat: repeat-y;
    background-position: 0px 0px;
.tabTop {
    background-position: 0px 0px;
    padding-top: 15px;
.middleTab {
    background-position: 0px -151px;
.accordion_255_tab {
    margin: 0px;
    font-weight: bold;
.acontent {
    height:200px;
    width:220px;
    overflow: auto;
    padding: 5px 10px 10px 20px;
    useFixedPanelHeights = null;
.AccordionBottom {
    width: 255px;
    height: 33px;
    background-repeat: no-repeat;
    background-position: 0px bottom;
    background-image: url(../images/accordion_255_bottom.gif);

Parallax scrolling + accordion - sliding in images on click?

Hey guys
I was wondering if there was anyway to combine elements of parallax scrolling to an accordion widget? I have different catagories of information, and when a particular accordion is clicked I'd like an image to appear with the text at a slightly slower speed than the accordion opening.
Is there a way to do this tidily? Thanks for any help.

Hi Nate and welcome!
One idea: you may accidentally have turned on zooming. Try pressing the control key as you use the scroll wheel on your mouse. Zoom out as far as it will go and release the control key.
Any better?

Scrolling within Accordion panel

Hi, I have an Accordion panel with a lot of text within one of the panels. The panel is pinned and the text flows below the browser baseline when opened on smaller screen sizes. Would be great to have a mini scroll bar included as an option in future to get around this problem. Thanks!

Hi kundalani,
If you are using Spry.Utils.updateContent() to load the
contents of the panel, you can pass in a callback that sets the
height of the AccordionPanelContent to "auto" after the new content
has loaded:
function LoadContent(ele, url)
ele = Spry.$(ele);
Spry.Utils.updateContent(ele, url, function() {
ele.style.height = "auto"; });
<a href="#" onclick="LoadContent('e1p2',
'../../data/frag1.html'); return false;">Frag 1</a> |
<a href="#" onclick="LoadContent('e1p2',
'../../data/frag2.html'); return false;">Frag
2</a></p>
<p> </p>
<div id="example1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Panel 1
</div>
<div id="e1p1" class="AccordionPanelContent">
<p>Panel 1</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Panel 2
</div>
<div id="e1p2" class="AccordionPanelContent">
<p>Panel 2</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Panel 3
</div>
<div id="e1p3" class="AccordionPanelContent">
<p>Panel 3</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Panel 4
</div>
<div id="e1p4" class="AccordionPanelContent">
<p>Panel 4</p>
</div>
</div>
</div>
<script type="text/javascript">
var example1 = new Spry.Widget.Accordion("example1", {
useFixedPanelHeights: false });
</script>
--== Kin ==--

Spry accordion page scrolling

Hi,
Whenever I click on an accordion tab it scrolls the webpage to the first tab in the accordion. Why does it do this and is there any way I can control this scrolling.
See www.thehmc.co.uk/events4.html to see what I mean.
Cheers
Phil

instead of editing your Spry files it might be wiser to use the
options constructor for it. This option object will automatically
replace all "this" variables inside the Spry Widget without having to
edit the files.
So your constructor should become something similar like this:
var acc1 = new Spry.Widget.Accordion("Acc1", {useFixedPanelHeights: true, enableKeyboardNavigation: false })

How can I stick an accordion navigation MENU on top of a mobile scrolling page and make it work properly? As I can't pin it, I keep it on top of the page with scroll effect 0. It collapse, shows the menu buttons but doesn't close back once it reaches the

How can I stick an accordion navigation MENU on top of a mobile scrolling page and make it work properly?
As I can't pin it, I keep it on top of the page with scroll effect 0.
It collapse, shows the menu buttons but doesn't close back once it reaches the anchorpoint.

Muse won't let you, at least not that I know of. You could find the class in the code that muse gives it position: fixed…I think. You could paste it into the head area of your page properties to override the class. I believe something like this would give you persistent nav bar, pinned at the very top, on mobile:
#youmuseclass {position: fixed;}
I wouldn't use any parallax on mobile either, the performance is terrible.

Maintain vertical scroll position on long Accordion

Hi,
I've got a accordion with five tabs. The content exists of lists with links to different pages, so basically a menu ;-). Some tabs are quite long, when the list exceeds 450 px I got a scrollbar appearing other wise the list is just to long. Now what I want is to maintain the exact vertical scroll position after clicking on items from page to page.
I had this sorted with a javascript but I had to add an "onscroll" attribute to the accordion div which doesn't validate (xhtml 1.0 transitional).
Not validating attribute onscroll: <div id="Accordion1" class="Accordion" style="height: 450px"; onscroll="setScrollPos();">
Can somebody help me with a validating alternative?
I googled endless for this one ...

If you have any extensions installed in Safari > Preferences > Extensions, turn that OFF, quit relaunch Safari to test.
hit the back button
By the way, the Delete button feature to go back a page has been omitted in Safari 6.
Try Command and the back and forward arrows.

Removing Scroll Bars on the Spry accordion

When I use the accordion widget it shows the scroll bars when
you click on the panels. Is there a way to remove or hide
them?

I tried your change, but when the panels are moving it still
shows the scroll bar, then after it goes away
Here is an example of my code
<!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>
<script src="SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">
<p>hfghfghfgdhfgdhglk;dfgsklmgfhk;lm'bgm;l'kcxvbm;l'kcvxb';klmcvbx;l</p>
<p>fgdl</p>
<p>hgfhl</p>
<p>gfl</p>
</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Delete scroll in Accordion's containers

Hy,
i have an Accordion like this:
<mx:Accordion id="accordion" bottom="30" left="20" openDuration="200" borderSkin="{null}" verticalGap="7" resizeToContent="true">
            
            <mx:VBox label="Le rappel du jour" >
                <mx:Text htmlText="xx" />
            </mx:VBox>
            <mx:VBox label="Les promotions">
                <mx:Text htmlText="one" />
               <mx:Text htmlText="one" />
               <mx:Text htmlText="one" />
               <mx:Text htmlText="one" />
            </mx:VBox>
     </mx:Accordion>
The problem is that i have a scroll on all Vbox.... how to delete it and make Vobox has height of the content ?

hi,
You can't do it through style, Probably the best way is to have a custom component that has the scrollpolicies off then always use that component. You can always iterate through the application and set every vbox at runtime but thats not really efficient.
so if you have a component noScrollVBox.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" verticalScrollPolicy="off" horizontalScrollPolicy="off"/>
set a namespace in the application header
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" xmlns:local="*">
then do a global replace mx:VBox with local:noScrollVBox
David.

How do I make my accordion spry not "jump" or "hiccup" in IE??

Ok, sorry you guys, I'm a newbie.
It seems that no matter what I do, I can't get the accordion to co-operate with Internet Explorer. It has always jumped when tabs are clicked and then settles down. It's rather irritating and I would like to fix it. I've run out of things to try. Can anyone help?
In addition, with attempts to make keep the accordion and background centered I used a div with the position centered, which worked, but only in FF and Chrome. In IE it stays far left. When I had it in a table, I could set a left: px in the class, but never figured out how to center it with a table so it would change position based on the monitor resolution. If there's a better way to do this that IE and other browsers like, please help me. If it's just IE that has the problem is there any way to make it like my code?
If you can help me change the height of the accordion, that would be great. It seems it doesn't want to stretch out, but maybe I'm writing it in the wrong section or the wrong way.
Another minor issue is the IE not doing the transparency I set on the tabs. I heard that they took that feature out. Is that true or is there a way to set it for IE?
Here's what I have so far:
+<!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>Bonnie Praymayer</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<table id="big">
    <tr>
     <td><table width="200" border="1" id="table" name="table">
       <tr>
         <td><div id="Accordion1" class="Accordion" tabindex="0">
           <div class="AccordionPanel">
             <div class="AccordionPanelTab">
             <span class="tabContent">Benefiting People Like You
             </span>
             </div>
             <div class="AccordionPanelContent">
                   <div class="panelContent">
                 <p >I specialize in deep tissue massage. As you may know already, massage therapy is the manipulation of soft tissue with the goal to improve well-being and heal injuries. It can involve just about any part of the body, but generally most people have stiffness and injuries in the back and neck. I enjoy using this type of health maintenance to assist people like you. Massage therapy can be used to improve many ailments such as:</p>
                 <p >Muscle Strains, Sprains, Headaches, Migraines, Fibromyalgia, Edema, and High Blood Pressure</p>
                 <p >Beyond "ailments" massage is excellent for treating sore muscles in pregnant women as well as reducing stress in everyone.</p>
                 <p > </p>
               </div>
             </div>
           </div>
           <div class="AccordionPanel">
             <div class="AccordionPanelTab">
                 <span class="tabContent"> Reflexology - An Added Benefit
                 </span>
             </div>
             <div class="AccordionPanelContent">
               <div class="panelContent"><p >In addition to massage therapy, I am certified to practice Reflexology of the feet. This is a therapy wherein pressure is applied to the feet to encourage the body to heal itself. It's as if the feet are a map to the body with the spine being the edge of what is known as the arch. There are key points such as the heart and lungs, sinuses, kidneys, and intestinal tract. </p>
               <p> </p>Reflexology has been known to also be an indicator to hidden health issues. Many reflexologists can attest to the fact that upon finding sore areas in the feet, the corresponding organ(s) have later been discovered by a physician to be injured or diseased. It is not a replacement for healthcare, but for some, reflexology has proven to be an asset to gain knowledge of the workings of their body.<p></p>
               <p >One thing to note: if you do receive a reflexology treatment it is normal to feel a little dizzy, fatigued, or flu-like if you don't hydrate yourself before and after.</p>
            </div>
             </div>
           </div>
           <div class="AccordionPanel">
             <div class="AccordionPanelTab">
                     <span class="tabContent"> How to Choose a Therapist
                     </span>
             </div>
             <div class="AccordionPanelContent">
               <div class="panelContent"><p >To be honest, everyone has preferences for what he or she like in a massage, so there is no hard and fast rule. What I recommend is that you decide what you need treated whether it be muscle strain, stiff muscles, stress, poor circulation etc. You can decide what kind of massage you need based on what you decide you want massage to do for you.</p>
               <p >If you need to de-stress, relax and do not have many sore stiff muscles then simple relaxation massage would be good for you. If you have a constant sore shoulder or neck then you really need a therapist that is capable of effectively loosening those fibres.</p>
               <p >You may be able to determine if a therapist is right for you by talking with someone who has had a massage from that person. Otherwise, you can sometimes judge by the type of facility in which they are practicing. Typically a spa is going to give you strictly relaxation, although many therapists are capable of more if you request it. A chiropractor's clinic will often focus on rehabilitation of injured patients; more often than not they have massage therapists that are more than capable of working deep enough to affect injured tissue.></p>
               <p > Communication is the key when it comes to during the treatment in order to customize and optimize your massage experience. Don't be afraid to speak up if you need to adjust the technique or pressure. After all, the massage is all about you!</p></div><p></p>
             </div>
           </div>
           <div class="AccordionPanel">
             <div class="AccordionPanelTab"><span class="tabContent">My Practice</span></div>
             <div class="AccordionPanelContent">
                 <div class="panelContent">
               <p>My interest in massage therapy began at a very early age. Although I didn't know it was an actual profession, I started massaging at the age of 8 as I did my best to alievinate my mother's chronic pain from fibromyalgia. I, through time gained a natrual feel for detecting prolblem areas in the muscle and I learned what pressure is appropriate. </p>
               <p>I took my training in 2006 at the Alberta Insitute of Massage for six months to earn a certificate for a 1100 hour program. Though short, it was intensive in the anatomy and physiology portion and very hands-on in the massage classes. It was my privilege to learn from three instructors who had more than 10 years experience as massage therapists and many years teaching it.</p>
               <p>Since my training, I have had the opporutinty to work as a massage therapist for 3 years. I have treated people from all walks of life for countless ailments and injuries. It is my pleasure to do my utmost to see to it that each paitent recieves the treament they deserve and expect.</p>
               </div>
             </div>
           </div>
         </div></td>
       </tr>
     </table></td>
    </tr>
</table>
<script type="text/javascript">

</script>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body {
    background-image:url(../Images/WaterLeaf_Exp.png);
    background-repeat: no-repeat;
    background-position:center;
    background-attachment:scroll;
    background-color:#222222;
.panelContent {
    color: #dcd2d2;
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
    margin-left: 15px;
    margin-top: 20px;
.tabContent {
    color: #333;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    padding: 15px;
#big {
    /*background-image*/
    background-repeat:no-repeat;
    border: none;
    top: 0px;
    margin-left: 23.5%;
    position: static;
    height: 800px;
    width: 955px;
#table {
    width: 700px;
    height: 290px;
    /*margin-top: 1%;
    margin-left: 125px;*/
    border: none;
    position: relative;
    z-index: 2;
@charset "UTF-8";
/* SpryAccordion.css - version 0.4 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
    border-left: solid 1px gray;
    border-right: solid 1px black;
    border-bottom: solid 1px gray;
    overflow: hidden;
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
.AccordionPanel {
    margin: 0px;
    padding: 0px;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
* NOTE:
* This rule uses -moz-user-select and -khtml-user-select properties to prevent the
* user from selecting the text in the AccordionPanelTab. These are proprietary browser
* properties that only work in Mozilla based browsers (like FireFox) and KHTML based
* browsers (like Safari), so they will not pass W3C validation. If you want your documents to
* validate, and don't care if the user can select the text within an AccordionPanelTab,
* you can safely remove those properties without affecting the functionality of the widget.
.AccordionPanelTab {
    background-color: #FFF;
    /*border-top: solid 1px black;*/
    border-bottom: solid 1px gray;
    margin: 0px;
    padding: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    filter:alpha(opacity= 30);
    opacity: 0.3;
    -moz-opacity:0.3;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
    overflow: auto;
    margin: 0px;
    padding: 0px;
    height: 200px;
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
    /*background-color: #cccccc;*/
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
    color: #93C;
    filter:alpha(opacity= 50);
    opacity: 0.5;
    -moz-opacity:0.5;
.AccordionPanelOpen .AccordionPanelTabHover {
    color: #cccccc;
    filter:alpha(opacity= 30);
    opacity: 0.3;
    -moz-opacity:0.3;
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab:hover {
    background-color: #FFF;
    filter:alpha(opacity= 20);
    opacity: 0.2;
    -moz-opacity:0.2;
.AccorrdionPanelOpen:hover {
    filter:alpha(opacity= 90);
    opacity: 0.9;
    -moz-opacity:0.9;
    color:#F00
.AccordionPanelOpen .AccordionPanelTab {
    background-color: #390;
    filter:alpha(opacity= 30);
    opacity: 0.3;
    -moz-opacity:0.3;

You would make this a little easier if you posted a link to the page.
Most of the jump seems to be some extra padding or margin between the tabs when you rollover, but I am not able to find it. Is there any other css that is governing this page? I did remove a couple of <p></p> set of tags you had and it improved the jump, but it is still there.
If the page is live, run it through the validator http://validator.w3.org/ , fix whatever errors it finds, if you still have the jump, post a link to the page and the issue might get found.
Gary

Is it possible to make/get a scrolling list in Muse?

So I have been trying all types of built in widget combining and online searching and am unable to find out how to make a scrollable content area. I want to make a a content area that is 300X600px and has 3 Tabs or something similar at the top. Inside each tab I need to put around 70 300X100px content areas for text/pictures. Obviously I can't put all 70 in there and have it fit in the 600px area, so I need them to be behind everything and simply scroll into view with a scroll bar or scrolling motion on a touch pad. Anyone know how to do this or where to get a widget that could accomplish this?
Something similar to the one found here Rental Listings - All 166003 Rentals - Zillow
Thanks

You can use tabbed panel for this , where the container will include the content listed and users can scroll the content on page. The tabs can be used to list different contents and categories like the example you have provided.
https://helpx.adobe.com/muse/how-to/organize-content-with-tabbed-panel.html
Adobe Muse Help | Working with Tabbed and Accordion Panel widgets
https://www.youtube.com/watch?v=orlSdVAaY_Y
Thanks,
Sanjit

Mobile Site - Need Accordion Widget to start at top of page upon item selection

I have set up a mobile site. I use the accordion widget for topics. If I select any topic without diving into it and scrolling, it works fine. If I scroll through a topic after selection, the next topic starts in the middle or the bottom. Kind of annoying for the user. Any ideas?
Thanks

Hi Kevin,
Could you please share the site URL or any screen shot for reference?
Regards,
Neha

Accordion Scrolling

Similar Messages

Maybe you are looking for