All accordion panels closed on page load?

The default behaviour for a set of accordion panels is for
the first one to open automatically when the page firsts loads.
Is there a way to stop this happening and have them all
closed by default?
regards,
Adrian

Found the solution:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#AllPanelsCl osed

Similar Messages

Accordion Tabs Closed on Page Load

How would I fix this page so all the accordions are closed on page load? I don't want the first tab to be open when a viewer opens the page.
Link is http://thedenovo.worldsecuresystems.com/solutions.html

If you use jQuery UI Accordion Widget, set Active to false.
http://api.jqueryui.com/accordion/
Nancy O.

Start with all Accordion panels closed with variable height panels

I inserted a Spry Accordion on this page: http://www.brucebarrdesign.com/video_new.htm
I want the panels to open to a size depending upon the content within them so I set the height to auto. The problem is that when you go to the page, the first panel is open. I want all of the panels to be closed when you first go to the page. Per the Help docs and some posts I've seen in the forum, I tried inserting this code:
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 });
</script>
However, this only works with fixed height panels. If I use it with the variable height, it opens all of them, so I commented it out for now. How can I get this to work?
Thanks

GPDMTR25 wrote:
I located the answer to my own question (how to get all the accordion panels to remain closed when the browser opens) but I still don't understand the answer. Can someone explain this?
This feature is only supported when using variable height panels, so you must pass a false into the Accordion's constructor for the "useFixedPanelHeights" constructor options, and a -1 for the "defaultPanel" option:
<script type="test/javascript">
var acc1 = new Spry.Widget.Accordion ("Acc1", { useFixPanelHeights: false, defaultPanel: -1});
</script>
Angela
Hi Angela,
You are right, the only way it will work is by setting the fixed height to false. As for the for the default panel option, -1 is not a panel and if you had 3 panels we could have used the number 3 (panel1 = 0) or 99 or whatever as long as there is no panel with that number. If we had used the number 1 for instance, then the 2nd panel would be opened by default.
Hope this helps.
Ben

Accordion Panels Open During Page Load

All my accordion panels appear open for a second before my page completely loads. http://home.comcast.net/~steven.kay/
I found this thread, but am still not clear on the solution given. http://forums.adobe.com/message/22365#22365
Thanks.

Never mind... I downloaded the new js file... (duh)

Close all accordion panels

Hi,
By default when I use spray accordion the first panel is
always open. Is it possible to have all Accordion panels closed?
thank you

this does not work in FireFox for mac. it starts with all
panels closed for sure, BUT when you open one, it opens but (1) not
all the way showing all of the panels content and (2) nor does it
give you a scroll bar to see all of the content and (3) if you open
a panel it pushed lower panels down so low you cannot see them any
longer.
in Safari it opens the panel and 'sometimes' just elongates
your page so no scroll bar needed, but all the content is there IF
you designed a page that can grow. but sometimes it does not grow
and exhibits same above behavior.
so, not so sure this is a solid cross browser method to
achieve.

Globally open and close all accordion panels

Is there a way to globally open and close all accordion
panels? For example, it would be nice to have an "Expand all" and
"Collapse all" link at the top of the page, before the accordion,
that has this functionality.

Hi FM_n_DC,
Accordions can only ever have a single panel open. If you
want individual control over which panels are open you probably
want to use a CollapsiblePanelGroup. This sample shows how to open
all and close all of the panels of the CollapsiblePanelGroup:
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
--== Kin ==--

Can Spy CollapsiblePanel work smoothly and remain closed on page load?

Hi there,
I've seen a lot of discussion on this topic but no solutions still.
- Spy CollapsiblePanel animation is jerky on close (it extends for a split second, and also jumps just as it's about to close).
Only solution I have is to turn off animation.
- On page load in FF and IE all of the panels are open for a split second before closing.
// SpryCollapsiblePanel.js - version 0.8 - Spry Pre-Release 1.6.1

Hi there... your right..!
Well here's an example of my code - no changes to the js:
html:
            <div id="CollapsiblePanel5" class="CollapsiblePanel">
              <div class="CollapsiblePanelTab" tabindex="0">100% finance</div>
              <div class="CollapsiblePanelContent"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque urna in sapien blandit dictum.</div>
            </div>
<script type="text/javascript">
var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5", {contentIsOpen:false});
</script>
css:
.CollapsiblePanel {
margin: 0px;
padding: 0px;
border-bottom: solid 1px #AACCEE;
border-right: solid 1px #AACCEE;
border-left: solid 1px #AACCEE;
.CollapsiblePanelTab {
font-size: 13px;
line-height: 28px;
background-color:#EBF3FB;
border-bottom: solid 1px #AACCEE;
margin-bottom: 0px;
padding-left: 26px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
background: url(../images/sprydown.png) no-repeat 10px 10px;
text-transform:uppercase;
.CollapsiblePanelContent {
margin: 0px;
padding: 10px 15px 10px 15px;

All my content appears on page load - is this Spry related?

I remember having this issue when using Spry in the past. I changed the padding settings I think, and all the Accordions were open on page load - for only a second - and then closed.
I'm working with a new site, and the template seemed fine but when I populate, all tabbed-content and a scroller content appear on page load. Then snap shut. Is it related? or a similar issue... I'm pretty desperate to be posting here but I it looks like the same sort of problem I had with Spry... maybe the template has been built with some of the same technology (?)
http://bit.ly/ptaBVN
Please help!

Try this:
1. Set a class that sets visibiliity to hidden:
.hideGroup{visibility:hidden;}
2. Add this class to your content group:
<div class="SlidingPanelsContentGroup hideGroup">
3. Add a line to sp_unobtrusive.js to remove this new class
after the widget made.
Spry.$$(".SlidingPanelsContentGroup").removeClassName("hideGroup");
Add that right under the addEventListener lines.
That should do it.
Don

Can someone explain the code for having the Accordion panels closed?

I located the answer to my own question (how to get all the accordion panels to remain closed when the browser opens) but I still don't understand the answer. Can someone explain this?
This feature is only supported when using variable height panels, so you must pass a false into the Accordion's constructor for the "useFixedPanelHeights" constructor options, and a -1 for the "defaultPanel" option:
<script type="test/javascript">
var acc1 = new Spry.Widget.Accordion ("Acc1", { useFixPanelHeights: false, defaultPanel: -1});
</script>
Angela

GPDMTR25 wrote:
I located the answer to my own question (how to get all the accordion panels to remain closed when the browser opens) but I still don't understand the answer. Can someone explain this?
This feature is only supported when using variable height panels, so you must pass a false into the Accordion's constructor for the "useFixedPanelHeights" constructor options, and a -1 for the "defaultPanel" option:
<script type="test/javascript">
var acc1 = new Spry.Widget.Accordion ("Acc1", { useFixPanelHeights: false, defaultPanel: -1});
</script>
Angela
Hi Angela,
You are right, the only way it will work is by setting the fixed height to false. As for the for the default panel option, -1 is not a panel and if you had 3 panels we could have used the number 3 (panel1 = 0) or 99 or whatever as long as there is no panel with that number. If we had used the number 1 for instance, then the 2nd panel would be opened by default.
Hope this helps.
Ben

Spry Accordion menu opens on page load then closes

Hello,
I'm having issues with a SPRY Accordion menu loading with all of the tabs open, then closing once the page finishes loading.
Example page is here:
http://thesparkmachine.com/mca2009/academics
(site is still being worked on, so forgive any oddities)
Is this something that is occurring because of the large amount of material loading on the page at once? The site is Joomla!-based, and there are close to a dozen modules on the page, plus an random background image script.
Any advice would be helpful.
Thanks!

I see you have also fixed your menu sections linking..
But i still wanted to give you some advice on why it opens and closes.
If you check out the source of your page, you will see that the constructor for your accordion is at the bottom of the page. When the browser loads the page, it parses from top to bottom, so it has parsed the accordion markup. But not yet the constructor for the accordion, so once it finally done with parsing the rest of the markup it finds the constructor and executes it.
What would have helpt, if you just moved the <script> with the constructor to directly under the accordion. So when the accordion markup has been parsed the brower directly executes the scripts.

Anchor links to accordion panels not working properly across browsers

Hi everyone,
I need some help to figure out why my anchor links to specific accordion panels on another page are not working properly across browsers.
I have a Map page which has tooltips on mouseover on the site markers. 15 of the tooltips have "Click here for information" anchor links (although only 14 are currently linked) which, in theory, would take you to the Nurseries page where the specified accordion panel would be opened with the nursery entry appearing at the top of the new browser window.
Here are the links to the Map page and Nurseries page, respectively:
www.alegriadesignstudio.com/RFRI/map_v6.html
www.alegriadesignstudio.com/RFRI/nurseries_v6.html
I've tested the anchor links on IE, Firefox, Google Chrome, and Safari, and have received varying results. In most cases, the anchor links worked perfectly on two of the browsers, while on the other browsers, the correct accordion panel is opened but the nursery entry does not appear at the top of the new browser window. Anchor links using Safari and Google Chrome fared better (10 out of 14 links worked properly, and 8/14, respectively), whereas when using Firefox and IE, only 3 anchor links worked properly. The target audience for this website will be using IE and Firefox, so I would appreciate any help to figure out how to tweak the code so that the most, if not all, anchor links work properly on these two browsers in particular.
Here's an anchor link which worked perfectly in IE, GC, and Safari, but in FF, the entry did not appear at the top of the new browser window.
www.alegriadesignstudio.com/RFRI/nurseries_v6.html?luzon=9#mangatarem
http://www.alegriadesignstudio.com/RFRI/nurseries_v6.html?luzon=9#mangatarem [To access the anchor link on the Map page, mouseover the third green dot from the top of the map (Tooltip--Location: Mangatarem) and then click on "Click here for information."]
Here's a sample anchor link in which the entry did not appear at the top of the new browser window in any of the 4 browsers:
www.alegriadesignstudio.com/RFRI/nurseries_v6.html?mindanao=4#magpetAmabel
http://http://www.alegriadesignstudio.com/RFRI/nurseries_v6.html?mindanao=4#magpetAmabel [To access the anchor link on the Map page, go to "Mindanao" at the bottom of the map and mouseover the fourth green dot below the word "Mindanao" (Tooltip--LOCATION: Brgys. Amabel, Bongolanon, Imamaling, & Manobisa; Magpet; North Cotabato) and then click on "Click here for information."]
Here's a sample anchor link in which the anchor link worked properly in GC and Safari, but the entry didn't appear at the top of the browser window in IE and FF:
www.alegriadesignstudio.com/RFRI/nurseries_v6.html?visayas=1#bilar
http://http://www.alegriadesignstudio.com/RFRI/nurseries_v6.html?visayas=1#bilar [To access the anchor link on the Map page, go to the small island north and a bit west of "Mindanao" which is called "Bohol" and mouseover the fourth green dot below the word "Mindanao" (Tooltip--LOCATION: Bilar; Bohol) and then click on the first "Click here for information."]
Many thanks in advance for your assistance!
Joy

Hi everyone,
I'm still trying to figure out how to resolve the problem of anchor links to accordion panels not working properly across browsers (see original post for details). I would greatly appreciate any suggestions on how to resolve the problem.
Many thanks in advance.
Joy

Trouble with accordion panel

I'm trying to put an accordion panel in a page of the website i'm creating but i've a weird problem.
First of all, this is the link of the page
http://wwwipiniriolotermeit01.businesscatalyst.com/menù.html
As you can see, when i choose one of the option of the panel, the background begin to shake.
Of course i've tried with other panels, included muse's widget but the results is the same.
Can someone help me to resolve this issue?
Thanks in advance.

Thank you very much again.
Last time i've uncheck only the element of the master page's footer not the
entire "menu" page from the menù.
Now, as you say, the jittering is disappear.
Regards
Luca
2014-03-07 16:18 GMT+01:00 Aishvarya Raj Rastogi <[email protected]>:
Re: Trouble with accordion panel created by Aishvarya Raj Rastogi<http://forums.adobe.com/people/aishvarya+rastogi>in *Help
with using Adobe Muse CC* - View the full discussion<http://forums.adobe.com/message/6188378#6188378

Multiple Accordion Panel Overlapping Each Other

Hi,
I have a few accordion panel in my page. So when I expand one, it covers the one below it. Is there a way to make it pushes the panel below further down, instead of covering it? I hope im making sense, but you can also visit this link to see what I'm talking about
http://billbensley.businesscatalyst.com/untitled-5.html
Thanks in advance for your help
Anh Nguyen

Hi,
I'm looking create multiple box of that, not just 1 box. If you can have a look at this link, ull see that Thailand cover INDIA, however, INDIA doesnt cover INDONESIA, but push it down instead. I'm not sure why it doesnt work for the top one
http://billbensley.businesscatalyst.com/photo-library.html
hopefully you can help me
thanks

Accordion Panel Heights.

Hi,
I am trying yo apply several accordion panels to different pages. Some of them may have 4 tabs, other 6, other 8. I noticed that when I changed the height of the Panel Content, this change affects to the other panels. Even when I change the name to each Accordion Panel, the properties are the same wherever I apply Acc. panel, right?
Could I have one accoerdion panel content with 100px of height and another one with 300px? Could you please help me?
Thx a lot.

Try the following
<!DOCTYPE HTML>
<html>
<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">
<style>
#Accordion1 .AccordionPanelContent { height: 100px;}
#Accordion2 .AccordionPanelContent { height: 200px;}
#Accordion3 .AccordionPanelContent { height: 300px;}
</style>
</head>
<body>
<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>
<div id="Accordion2" 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>
<div id="Accordion3" 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 type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: true });
var Accordion2 = new Spry.Widget.Accordion("Accordion2", { useFixedPanelHeights: true });
var Accordion3 = new Spry.Widget.Accordion("Accordion3", { useFixedPanelHeights: true });
</script>
</body>
</html>

Using Accordion Panel as Menu .... ?

I am trying to use an accordion panel as a menu. I have successfully set up each Tab to flip to the apporpritate page via the hyperlink, but the tabs do not remain active once the page flip is done.

That is the normal result when using accordions as menus.
One work around is when you save each page before you publish make sure the panel is open on the correct accordion panel for each page. It will remember the last state that you publish with.

All accordion panels closed on page load?

Similar Messages

Maybe you are looking for