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

Similar Messages

Dreamweaver Accordion Widget default panel

I'm relatively new to javascript.
I'm using the Spry Accordion widget that comes with dreamweaver.
I want to use it as a menu, so I have tables inside it with links.
I have all the tabs closed for the index page
I am looking for the clicked tab to remain open.
How does one go about doing this?
Thanks in advance for your help.

Check out these samples
http://go.spry-it.com/cookie

Accordion widget open panel

I know I can choose the default panel to be open. Can I make the widget open NO panel on load? Here's the page. I would like all four panels closed upon load.http://shrhabitat.org/HFHSHR_staff.php
Thanks

Sorry to be so dense. I did that on a page with only one panel set, just to remove any complications, but it still opens the first panel. That page (with you variable in it) is http://shrhabitat.org/FAQ09.php. I added that variable near the bottom with the other variable, but can find no reference to it in the page, nor the .js. I changed it to var Accordion1. That didn't work either. I know I'm missing something simple.
I tried a number of permutations. None worked.
Karl

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

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

Setting accordion content panel height with hidden content

Following previous instructions, I set

at the bottom of the content page. However, some of the
accordion panel content is hidden until the user selects a radio
button. The panel height is not dynamically adjusted to the
content. FYI, the content is hidden using
style.visibility = 'hidden
In SpryAccordion.css, I commented out the height attribute.
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
/* height: 200px; */
It appears to me that the panel height is still fixed, but by
what I am not sure. Any clues would be appreciated. Here's the demo
page:
http://www.phelpstek.com/cr/wildflower_wedding_favors/index.html
Thanks for any input/ideas.
Brian Phelps
www.phelpstek.com

graylensman wrote:
|| I'm working on a website with two column layout. The left
column
|| contains a list of site navigation links, the right column
contains
|| actual content for any given page. I'm using CSS to set a
left-hand
|| rule that runs the height of the right-hand column. On
some pages,
|| there's a lot of content; on others, very little. When
there's
|| little content, my rule doesn't run as long as the links
list,
|| because the rule is applied to the right column.
||
|| So, I want this rule to run at least as long as that left
column,
|| but run as long as the content in the right column when
needed. Here
|| are links to a couple of pages, so you can see what's
going on:
||
|| Good:
||
http://www.hillphoenix.com/web_redesign/techInfo/techInfo.html
||
|| Not so good:
||
http://www.hillphoenix.com/web_redesign/communications/whatsNew.html
||
||
|| Thanks for your help, in advance!
hello,
apply this to your right column div and change 430px to
whatever you want
min-height: 430px;
height:auto;
_height: 430px;
regards
bretz

How do I add a new panel to the accordion widget in-between two others (NOT at the end)

In the accordion widget, the + button at the bottom adds a new panel to the end. I have a series of panels that are in alpha-sort and need to add a new panel in the middle... I can't figure out how to do it without re-doing the whole thing. is there a way to do this?

Gah! Thanks Mac.
That was the first thing I tried! I must not have had the right level selected. It's been driving me batty, but I've got it now.

Spry Accordion and jQuery UI Accordion for Widget Browser

I have Dreamweaver CS5 and used the spry accordion for a left menu. I then used the widget browser and added jQuery UI accordion. But there appears to be a conflict in that the spry accordion is not displaying the white font on hover, instead using the gray font from the jQuery UI accordion.
This may be a duplicate post, I asked this question on another section of this site, if so, I do apologize. Any help is greatly appreciated.
The page sample is
http://www.sbcvote.us/registrar/2006_form460.htm
Thanks to all,

In SpryAccordion.css you are telling the Spry Accordion to do exactly that.
Have a look at lines 97 and 100 where the colour is set to #555555
Gramps

Accordion widget - Toggling the Panel?

I know this is probably simple but...
1) How do I make the Accordion widget Panels "Open &
Close" by clicking on the same Panel twice?
What I mean is that my Accordion Panel works fine &
"Opens" when clicked once, but will not "Close" when clicked again?
(I want to be able to quickly open & close selected
panels at ease)
2) How do I apply a CSS to the Accordion without affecting
the original CSS style?
Earlier when went in to the Accodion.css file & started
making changes, it messed up the Accordion itself & I could not
get back to it's original look?
Thanks for the help,
jlig

Cristian, Thanks for the update.
In regards to using Accordions & Panels, it would really
help to see a video tutorial on the workshop site that shows how to
use ADDT Forms & Lists with SPRY widgets like the Collapsible
Panel. Many of us are a bit unclear on how to target links between
the two and general integration of the two.
For example:
- What is the sequence?
1. Create a Blank DW page
2. Add the SPRY Panel
3. then ADDT records/Forms?
Or
1. Create a Blank DW page
2. Add the ADDT records/Forms
3. Add the SPRY panels, etc?
Also, From an RIA point of view it seems like the purpose of
AJAX is to get rid of all the "screen/page changes". Can you help
us understand for example, the process of converting regular
dynamic forms (via ADDT or otherwise) that have many pages, to AJAX
enabled links that point to Panels, Tabs & Accordions instead?
Thanks for all your expertise,
jlig

Accordion widget - Toggling the Panels Up & Down?

What do I change in the Accordion widget to make the panels
Open & Close?
I want the Panel to Open by clicking on Panel A, and then
have Panel A close if Panel A again. (Basically a Toggle
effect)

Cristian, Thanks for the update.
In regards to using Accordions & Panels, it would really
help to see a video tutorial on the workshop site that shows how to
use ADDT Forms & Lists with SPRY widgets like the Collapsible
Panel. Many of us are a bit unclear on how to target links between
the two and general integration of the two.
For example:
- What is the sequence?
1. Create a Blank DW page
2. Add the SPRY Panel
3. then ADDT records/Forms?
Or
1. Create a Blank DW page
2. Add the ADDT records/Forms
3. Add the SPRY panels, etc?
Also, From an RIA point of view it seems like the purpose of
AJAX is to get rid of all the "screen/page changes". Can you help
us understand for example, the process of converting regular
dynamic forms (via ADDT or otherwise) that have many pages, to AJAX
enabled links that point to Panels, Tabs & Accordions instead?
Thanks for all your expertise,
jlig

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

Re-Size Each Panel of Accordion Widget Independently

I would like to have varying widths on the panels listed below my Accordion Widget tabs. For example. I have a lot of content in one tab so I need it to expand farther left than other tabs that have less information.
Thank you in advance for your help!

Take a look at this thread in regards to adjusting the width of the Accordion widget - http://forums.adobe.com/message/5140254.
The width of the Content Area within an Accordion panel would dictate the overall width of the Accordion and would remain consistent for each tab within the Accordion.
Thanks,
Vinayak

Variable accordion panel height

Hello,
I just started playing around with spry accordion today, and am not a javascript/css expert by any means :-)
I see that it is possible, from examples online, to have varying panel heights, depending on the contents of an accordion, but can't see how to make it happen. I see how to specify a fixed height for a panel, or how to have all panel heights be the same size as the panel with the most content, using the height specification in SpryAccordion.css under .AccordionPanelContent.
Any pointers much appreciated!
cheers,
Joan

See http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#VariablePan elHeights

Accordion Panel Height

At the beginning of the SpryAccordion.js there is code
commented-out that hints at the ability to dynamically define
accordionPanel heights (rather than the default "200"). I am not a
master javascripter and I've been banging my head against this all
day long. The animation of the accordion destroys the rendered
height information.
I was wondering if anyone had a quick-fix for this.
Thanks.

Thanks for the response. I understand that this isn't a
production release...I was just hoping there was an easy workaround
that I wasn't skilled enough to see yet.
My problem isn't setting the accordion panel to another
value. What I was hoping to do is have the accordion behave the
same way it does with animation set to false: each panel is as big
as the content. Right now, with animation turned on, every panel in
the accordion is the same height (200, 400, whatever you set it at)
regardless of how much content is in there. The animator sets the
height of elements to 200 or to zero, which destroys the original
height information. I understand why it needs to do this.
I was trying to have the panel animator store the height in a
variable, run the animation that kills the height, set the display
for the hidden panel to "hidden" (the way it achieves things in the
non-animated version), and then reapply the original height.
Unfortunately, I am not handy enough with javascript to make this
happen.
I don't expect a solution (I know you have many other,
important things on your hands)...but if there is an answer, it
would be greatly appreciated.

Accordion variable panel height got stuck

Hi,
I've a couple of collapsible (dynamically generated) panels
in a accordionpanel (the accordion has three panels in total). When
the page opens all is oké. When i open one of the collapsible
panels, the accordionpanel auto change its height.
But when i switch to an other accordion panel and then switch
back to my first accordionpanel, which has all the collapsible
panels, and i then open one or more collapsible panels, the conten
in that accordionpanel is partly hidden, because the accordion
panel doesn't change its height anymore.
Has anyone a clue???
I can't show you the page, it's stull on my localwebserver
Thanx
hans

See http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#VariablePan elHeights

Accordion widget browser panel height

Similar Messages

Maybe you are looking for