Dreamweaver Spry Accordion

[rachjm]

Has anyone tried one of these?

Most people use accordions for menus, but I am trying to put content into one. Trouble is, the content that I want to put in each panel is of varying heights, and I don't want the panels to scroll.

At the moment, the only (unsatisfactory) way that I can make this work is to put my longest content in the top pane, and then all of the rest of the panes have white space underneath.

I know accordions aren't meant for this - hence my trouble. Any suggestions for how to get around this, if I want to use one anyway?

[rangana]

Where's your code?..There might be errors on it
This is a accordion menu

[rachjm]

I am not using an accordion for a menu. Don't actually have the code on me at the moment because it's at work, but I'm certain it's error free. All I've actually done is clicked "Insert Spry" in my Dreamweaver menu and then added more text to the panel.

This page shows an example of the problem that I'm trying to solve: http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#EnablingKeyboardNavigation

Notice that the top panel in the accordion has a scrollbar... I'm trying to get rid of this. I want the height of the accordion panel to always expand to fit the content exactly.

[rangana]

It's div p1

What happens is that there is a scrollbar on that div since the there is a specific height. You could also hide the scrollbar by adding overflow:hidden; in your CSS

..Note that this won't show all the text if the div's height is smaller than what the contents is.

If you want to set it automatically, you can have a height:100%; in your p1 div.

Note that height:100% does'nt work unless it's parent container's div is set

Hope it helps

[rachjm]

You could also hide the scrollbar by adding overflow:hidden; in your CSS

This will get rid of the scrollbar, but if I have too much text for the height of the div, overflowing text will vanish.

If you want to set it automatically, you can have a height:100%; in your p1 div.

Yes, I thought that would work too - it was the first thing I tried. What happens is that the browser uses the first panel as it's 'measurement' for 100%. Content fits perfectly into the first panel. But subsequent panels are all exactly the same size as the first, regardless of how much or little text they have. Once again I get scrollbars or large amounts of white space.

The only way I can see to get around this is to put the largest amount of content in my top/default panel and have white space in subsequent panels...

It's frustrating - it's like the spry accordion was made for one purpose only. I'm starting to think maybe it's not worth the trouble...

I'm also thinking I might have searchability issues. Like, if a search returns a keyword that is relevant to the second panel only, the page will still default to the first panel, and the searcher won't realise that the relevant content is even on the page...

[rangana]

Searchability issues?..Don't get it

Anyway, yes you're right, setting it a height of 100% affects all the panels, because they contain in one div.

Could you wrap your codes on how far you have been sorting this issue out...It's good to have the same baseling...(your code)

[rachjm]

Sorry, my bad. I wasn't being clear. By 'searchability' I'm talking about search engines. I'm wondering whether the search engines will direct people to the right 'panel' of my accordion, or whether they will always link to the default one.

For example:
Panel 1 - default open panel + contains info about dogs
Panel 2 - contains info about cats
Panel 3 - contains info about mice

So if Google indexes my site, and then someone types 'mice' in as a Google search term, what happens? I know Google will find my page, because all of the information is there in the code. But the panel containing information about mice is actually 'hidden' when that page is loaded, because Panel 1 defaults to open. The searcher would have to open Panel 3 to find the information that they searched for.

Does that make sense?

BTW I'm afraid you've lost me on the phrase 'wrap your codes'.

[rangana]

Yup...makes sense now..and I don't know how google would do it on that instance

Wrap your codes means to put your codes here in the forum..inside the [ code] [/ code]

...but it seem no need to wrap your codes,,as I already understand what you mean...which honestly,,,i'm not certain of on how google or other search engines consider that hiddne panel

[Archie]

I found the answer you were looking for, had me boggled for ages too, its not any CSS or HTML its in the Javascipt at the end of your source code, So for example change this :

<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1"});
</script>

to this:

<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false });
</script>

the function useFixedPanelHeights to false will immediately put everything to auto, Hope this helps and works,

Archie