Accordion widget content height

I'm using an accordion widget for the navigation of a site. Some of the sections have sub-sections and other do not.
Is it possible to remove the "content area" of an accordion widget but keep the label? I tried to set the height of the content area to "0" so the items below would not shift down but it appears that the minimum height for the content area is 1 pixel.
The page is posted at http://ekagra.com/dev/
If you click the 'Services' or 'Clients/Partners' links, you'll see the other labels shift down.

Thanks for the quick reply. I'm using spry pre-release 1.6 in
CS3 so maybe it's set up different. When I drop the spry accordian
widget into my html it creates a css and js file to go with it. I
found that if I edit the js file to read
FixedPanelHeights = false;
that the panel will resize for the content. If left to the
default, true, the panel will have a scroll bar to the side for
overflow, which I don't like. Then with it set to false, I can
adjust all the rest thru the css file. Again, I'm a newbie when it
comes to this stuff so I'm proable doing something backwards, but
this seems to work. Thanks again.
Tommy

Similar Messages

Need to hide Accordion Widget Content until after pageload

Hi,
I was wondering if anyone had any experience in hiding the
content of the accordion widget panels until after the page loads.
I am fairly new to these libraries so I am fairly inexperienced on
how to go about a fix for this sort of issue. I have the widget
working fine, the only problem that I am having with the accordion
widget is that I do not like the way the accordion widget gets
loaded to the browser while the screen is loading, it looks clunky
and unprofessional.
Would anyone have any good ideas on how I go about correcting
this issue? Any help or suggestion is much appreciated.
Thanks
DB

Have you tried the examples shown at the "Hiding Data
References" page:
http://labs.adobe.com/technologies/spry/samples/data_region/HideDataReferencesSample.html
The .SpryHiddenRegion method seems to work for my
accordion.

Spry Accordion Menu - Content Height

Hey everyone,
I have a (hopefully simple) problem. I have a spry accordion with 3 tabs. Two of them have the same number of lines in them, but the "what" tab only has 2 lines so there's a lot of white space underneath it. I've tried changing
this.useFixedPanelHeights to false in the spry java script... and it does resize the content area properly, but the open and close on mouseover gets really messed up. Things don't open when they should, and close randomly. It makes it impossible to navigate. I've tried several other things as well, but nothing seems to fix the problem
The website:
http://jmb2-arch.com
Thanks in advance for any help!
-Cameron

You might try playing with the height specification as stated in the Spry CSS:
.AccordionPanelTab { -moz-user-select: none; -khtml-user-select: none; height: 76px; border: 2px solid #027dc3; width: 76px; color: #027dc3;
Setting a height is usually not necessary, unless there is a specific design reason (as there is here, with the main tabs and the sub tab area apparently intended to be identically sized).
Chris

Screen wide accordion widget content being shifted

Hi There,
I'm developing a site where screen wide accordions are used to reveal more content. See it here: http://stielendef.businesscatalyst.com/ Problem is that when one clicks the black and white image the content within the accordion itself (the image of the booklet) is moved left. It should just be centered in the accordion, that's also how it looks in design mode. Hope to see a prompt reaction beacuse this is driving me insane!
P.S. There are lot of things not completly right about the website in the link, but for now i'm focusing on solving the problem with the shifting content within the accordeon.

Have you tried the examples shown at the "Hiding Data
References" page:
http://labs.adobe.com/technologies/spry/samples/data_region/HideDataReferencesSample.html
The .SpryHiddenRegion method seems to work for my
accordion.

Accordion in CS3 - content height

I know that changing the appropriate CSS style changes the
height of the first content panel in the Accordion widget.
Setting the height to 'auto' makes the content fit. no
problem.
However, each subsequent content panel is the SAME height as
the first, whatever the amount of content.
How can I change this behaviour so that each panel is
sufficiently hight so that all content fits without
scrolling?

The easiest way to increase your content height quickly is add a text box with your Copyright © notice and drag it down the page.
This notice is usually at the bottom of the page so, anytime you want to lengthen or shorten the page, just click, hold and drag.
To adjust this notice in relation to the bottom of the page, change the "Footer" height.

Accordion widget not pushing content out of way

Hi,
Following a Lynda.com tutorial I added a menu to an accordion widget while designing a mobile site. Expanding the accordion is supposed to push the page's content downwards but it is simply unfurling over it. Does anybody have any idea what might be going wrong?
Thanks,
Peter

Check to make sure "Overlap Items Below" is not marked.

Accordion widget not pushing content down

I followed the instructions for putting the menu inside the accordion widget. It has worked great for me in the past. But now, the menu just shows up behind the content. I've looked at several discussions, and I have everything set up correctly. No scroll effects, etc. I followed the step-by-step instructions on Lynda.com and in an earlier version of Muse it was perfect. Now it isn't. Here is the business catalyst site URL. pitv.businesscatalyst.com. Appreciate your help.
Carole

Hi,
Coud you please try the suggestion provided in the following thread
Re: Accordion Widget is Not Moving Other Page Items Down When Expanded
Do let me know if you have any question.

Accordion widget browser panel height

I am using the accordion widget browser and would like to shorten the height of the
panels - how can I do this...

I found the solution!
Sample of before: www.muohio.edu/lll/studyabroadweek/index2.html
Sampe of after: www.muohio.edu/lll/studyabroadweek.
The solution was at: http://docs.jquery.com/UI/Accordion#options but was a bit difficult for me to figure out how to implement it... after a bit of experiment - I got it!
In your .html document, at the beginning of the widget look for the code in black. Code in bold red is what was needed to solve the issue.
$(function(){
                // Accordion
                $("#jQueryUIAccordion").accordion({ header: "h3",
                                            animated: "slide",
                                            event: "click",
                                            collapsible : "false",
                                            autoHeight: false

Content below Accordion widget not moving?

I want to have content below the accordion widget to slide down when one of the panels is open. Right now the accordion widget slides behind the content when one of the panels is open. I have "Overlap Items Below" checked.
From the Lynda.com site: " The Accordion panel now includes an option to Overlap Items Below. When selected, content below the Accordion panel will move down on the page as an Accordion panel is opened/expanded."
thanks

That seems like a typographical omission on Lynda.com's blog.
You need to uncheck that option to move the content below accordion down upon opening the panel.
Please check below excerpt from Muse Release Notes here: http://helpx.adobe.com/muse/release-note/adobe-muse-release-notes.html
The Accordion panel now includes an option to "Overlap Items Below". When selected content below the Accordion panel will not move down on the page as an Accordion panel is opened/expanded.
Cheers,
Vikas

What happened to Accordion widget 'shifting' content downwards?

With the new CC Muse upgrade, did the feature where the accordion content area would "shift" the entire contents underneath downward disappear? I see now that it only overlays any content on the page... am I missing something?

Hello,
Please check in Accordion Widget properties if the "Overlap Items below" option is checked or not?
If it is checked, please uncheck it and it should resolve the issue.
Screenshot : http://trainingwebcom.worldsecuresystems.com/SachinFTP/2013-06-20_2130.png
Regards,
Sachin

All time Bug! Accordion widget does not retain content position as in design view

I have noticed that content placed inside an accordion widget that is stretched to fill browser width do not retain the position of its elements. This is very annoying as ones layout does not look right and balanced across screen.

That was it KathH --- THANKS!!!
Had created the row w/out <td> cells to carry the top banner (sort of cheating) on spanning the cells i guess ( )
Anyway, re-wrote so that the banner table was independant and did not require span and picked up the data table independantly.
Problem solved and designer picked up the image precisely.
Thanks again!!!
Curious though that the image is dependant on the <td> tag. I would have expected any image called within the page to display in the designer regardless of location in the html.
Oh well, fixed and onto the next challenge.
Once more THANKS!!!

Spry accordion widget - SSI (server side include) as content in the panel

After having inserted the following command <!--# include file = "content2.asp" -> in the accordion Panel Content I get an error in Dreamweaver - every time I open the file. See the error in the attached picture.
Once all files are uploaded to the server it works apparently without problems or script errors.
Is there anyone who can help me to use SSI "server side include" as content in accordion panels?

Thanks for your reply.
The fault lay in the SSI file. This file contained these tag:
</ html>
And of course the tag </ html> generate an error if the tag is inserted in the content of the accordion panel via ssi file.

SPRY accordion widget IE8 ONLY issue

hello everybody,
i noticed a strange "jumpy" behavior while using the spry accordion widget -- this affects IE8 only (currently using 8.0.6001.18882 on vista), other browsers (including IE7 and IE8 forced into IE7 mode) work as expected. this issue seems to be related to the margin property of the accordion container...
not shure whether this behavior is related to IE rendering or the spry javascript code itself... anyway i made NO changes to the spry script (my version is 0.15, 1.6.1, which i believe to be most recent one).
the xhtml (strict) and css are perfectly valid (there might be some MINOR css hacks which are not related to the accordion itself). i do NOT use ANY padding on the inner container of the accordion (which would definetely make the spry js count the tween in odd way). the accordions (especially the main menu on the left) are little more complex, but they were built according to the spry widget document, found on the adobe spry website.
so, here it is -- check the accordion on the left side (the bug seems to happen almost always while opening/closing the last BLUE "section" of the accordion, please play with the accordion for a while to reproduce it -- while the accordion closes, it "loses" it's bottom margin (i guess), what's even more wierd, everything gets back to place after you move a mouse):
http://www.prazskematky.cz/home.php
PLEASE NOTICE: since the website is still under development and i'm using a IE meta tag to force it into IE7 rendering, to reproduce this behavior please be shure to switch IE engine to IE8 standards mode
well, we all now how IE handles css... so it's propably an IE bug -- anyway if you have encountered a similar issue of even better found a fix, please let know. (i don't consider a fix switching to another js library, i would like to use the spry, because of it's DW integration)
many thanks,
p.s.

ross m. greenberg wrote:
> Now however the entire .gif is not appearing in the
accordion panel is expanded. I insert the graphic using a standard
"menu insert/graphic/browse and select"
>
> the graphic file is not showing up properly on such an
insert...
Are you referring to what it looks like in Design view? If
so, that's
correct. Accordion panels have a fixed height. From memory, I
think it's
200px. However, if you test the page in a browser, you should
see a
scrollbar automatically generated on panels that have content
that
exceeds the height of the panel.
If you want flexible-height panels in the accordion, you need
to adjust
both the CSS and the script that initializes the accordion. I
have
covered all the details in my "Essential Guide to Dreamweaver
CS3" (and
the forthcoming CS4 edition). You can probably find online
tutorials as
well. Try a Google search for Spry flexible height accordion.
The accordion widget has been around since CS3, and it hasn't
changed in
CS4, so a Google search should bring up a lot of information.
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

Spry Accordion widget

Have a Dreamweaver question about the Spry Accordion widget.
I am designing a website for a real estate company. I will have different pages set up as a state page with a sub-level of cities within the page. I am using the accordion widget for the cities. As you know, you click on the panel tab and the next panel drops up or down closing/opening the previous panel.
What I would like to do is add an action anchor (view all properties) outside the spry widget to open all the panels at once if a client wanted to see the entire list. However, I would still want the functionality of the panels to be collapsible. Is this possible? Is there a bit of code restructuring I would have to do to the JavaScript?

Try
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
<style>
.openit .AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
</style>
</head>
<body>
<a href="#" class="openAll">open all</a> - <a href="#" class="closeAll">close all</a>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script src="SpryAssets/SpryAccordion.js"></script>
<script src="SpryAssets/SpryDomUtils.js"></script>
<script>
function MyOpenAllEventHandler() {
    Spry.$$("#Accordion1").addClassName("openit");
function MyCloseAllEventHandler() {
    Spry.$$("#Accordion1").removeClassName("openit");
Spry.$$(".openAll").addEventListener("click" , MyOpenAllEventHandler, false);
Spry.$$(".closeAll").addEventListener("click" , MyCloseAllEventHandler, false);
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
The "!important" on these rules is necessary because the Accordion widget places inline styles on the actual AccordionPanelContent elements when opening and closing them. Since inline styles have a higher CSS specificity then CSS class rules, "!important" is necessary to "trump" the inline styles.
Gramps

Spry Accordion Different Panel Heights

I'm building a Spry Accordion Widget as a left nav menu with
25 different panels. Some of my panels contain 10 different links
and others contain only 1 single link. Therefore I would like to
adjust the height of each panel individually according to the
number of links they contain, so I don't end up with huge white
spaces in panels that contain fewer links. My initial idea, in
addition to the .AccordionPanelContent class was to add an "id" to
each panel and control each panels height through CSS. But for some
reason I haven't been successful that way. It looks like all panels
tend to take the height of the first panel, regardless of their
individual set heights. I wonder if I can resolve my problem
uniquely with CSS, or I do I have to go and change something in the
SpryAccordion.js file.
Thanks.

Hi Donald, I inserted <script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", {
useFixedPanelHeights: false });
</script> into my code. It's almost there, but not
quite. I can see that it is trying to re-ajust the panels' height,
but for panels that have a larger content it tends to show the
whole panel's content and then hides the half of it. Also for
panels with fewer content it doesn't seem to have an effect at all.
I don't know if I have to fix something in the CSS or place the
Acc1 ID in a different location within my accordion HTML code.
Thank you.
Here's the URL I'm working on if you want to take a look.
http://64.49.218.100/product_p/00-120-0ll.htm

Accordion widget content height

Similar Messages

Maybe you are looking for