How do I collapse all the accordion panels

The problem that I still have is that I am trying to close all the Accordions when clicking on the last panel.
I have looked at the Accordion.closePanel() , but that throws an error
http://labs.adobe.com/technologies/spry/articles/data_api/apis/accordi on.html
here is a link to the page http://www.antworks.co.uk/mobymemory/menu.html
see the code below. Any help would be greatly appreciated. Thanks
<!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="AccordionPanelTop" onclick="Accordion1.openPanel(0); return false;">memory cards (make)</div>
<div class="AccordionPanelContent">
<img src="images/new/trans.gif" width="7" height="7" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="3" />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(1); return false;">memory cards (brand)</div>
<div class="AccordionPanelContent2">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(2); return false;">mobile accessories</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(3); return false;">gaming</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(4); return false;">computing</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelBot" onclick="Accordion1.openPanel(5); return false;">customer login</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
css
@charset "UTF-8";
/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
/* 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 {
width: 174px;
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.
.AccordionPanelTab {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_blue.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 21px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelTop {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_top.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 22px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelBot {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_bot.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 21px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* 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 {
letter-spacing: -0.05em;
background-image: url(../images/new/spry/meun_grey.gif);
background-repeat: repeat-y;
padding: 0 0 0 12px;
font-family: Arial, Helvetica, sans-serif;
color:#7f879e;
font-size: 14px;
font-weight: bold;
overflow: hidden;
margin: 0px;
.AccordionPanelContent2 {
letter-spacing: -0.05em;
background-image: url(../images/new/spry/meun_grey.gif);
background-repeat: repeat-y;
padding: 0 0 0 12px;
font-family: Arial, Helvetica, sans-serif;
color:#7f879e;
font-size: 14px;
font-weight: bold;
overflow: auto;
margin: 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: #EEEEEE;
/* 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: #555555;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
/* 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 {
background-color: #3399FF;
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #33CCFF;

Just so that you know for the next time, when you give us a URL, there is no need to post your code. This is by far the most preferred method for obtaining our assistance.
Having said that, place the fillowing in the HEAD section of your document, ensuring that you do have the file in that location
<script src="SpryAssets/SpryDOMUtils.js"></script>
Then, near the bottom of the page within the same SCRIPT content as your constructor(s), place the following code
Spry.$$(".AccordionPanelBot").addEventListener("click", function(){
Accordion1.closePanel();
The Spry Element Selector (Spry.$$) requires SpryDOMUtils.js. Here we place an event listener to your last tab with a class name of AccordionPanelBot, which when clicked will close the currently open panel(s).
I hope this helps.

Similar Messages

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

How can I use the accordion panel widget with a footer?

Hi,
My question is may be not clear. So I'm gonna be more specific. I'm using a menu for my website with the accordion panel widget. The menu is working fine and when I'm opening it, it pushs the items below on the pages.
My problem is with the footer of the page. Because, when the items below the widgets are pushed, they go below the footer and the footer is not pushed.
Is there any way to pushe the footer when I use the accordion widget? I don t want to overlap it.

I assume this is what you want to achieve in the footer....
Make sure in Muse before you export that the panel is closed, and also as Brad suggested, make sure Overlap Items Below is unchecked. I would also check the "Can Close All" button.

Script to Close all the collapsible panels on click of one collapsible panel

Hi All,
Please help me with modifying the script or a new script to suffice the following.
I have around 5 to 6 collapsible panels in many html files. There is a huge content under each panel and thats the reason I want to collapse i.e., close all the open panels and open the panel that is clicked on.
that is initially i click on panel 1 - > Panel 1 opens and contents are displayed.
now I click on panel 2 - > panel 1 should close and panel 2 should open.
Please help me acheive this.
Thanks in advance.

To close the remaining panels you can just use the onclick method and however many panels you have just add them to the list spacing them out with a " , "
Here is an example of 3 panels that close and open, upon clicking on one of the panels.
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="CollapsiblePanel2.close(),CollapsiblePanel3.close()">Tab 1</div>
<div class="CollapsiblePanelContent">Long-Sleeve Prices</div></div>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="CollapsiblePanel1.close(),CollapsiblePanel3.close()">Tab 2</div>
<div class="CollapsiblePanelContent">T-Shirt Prices</div>
</div>
<div id="CollapsiblePanel3" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="CollapsiblePanel1.close(),CollapsiblePanel2.close()">Tab 3</div>
<div class="CollapsiblePanelContent">Hat Prices</div>
</div>

How can I delete all the files in the Adobe CS4 Master Collection from my machine?

How can I delete all the files in the Adobe CS4 Master Collection from my machine. I have tried Control Panel but it will not do anything, there are no error messages, it is like as if it is ignoring my instruction. Why should it be so difficult to delete programs one does not want. Any ideas please.

Moved from Cloud forum to Downloading, Installing forum
Try running the Adobe Cleaner Tool
http://helpx.adobe.com/creative-suite/kb/cs5-cleaner-tool-installation-problems.html

How can I exchange all the images in a slide show with new ones

I have 18 slide shows each is a different competition for our camera club. How can I exchange all the images from each slide show with new images as our club competitions commence? I am reluctant to just delete the slide show because I will have set it all back up. I want to leave the size shape and format of the show as is, but just exchange all of the current images with new ones. I am hoping there is a quick way to delete and replace all images for each show? Each slide show has around 40 images and I have 18 shows
thank you for your help

1. Activate "thumbnails" in the configuration panel
2. Select one Thumbnail.
3. Rightclick and choose "Select same"
4. Press "backspace"
5. Open the configuration panel and load the new images.

How can I get all the stuff from my old iPad 2 to my new iPad 2? I have an apple id and have synced and backed up my old iPad 2 regularly.

How can I get all the stuff from my old iPad 2 to my new iPad 2? I have an apple id and have synced and backed up my old iPad 2 regularly.

Sky is right you can restore the old backup and it will not affect the old iPad
To make sure do this:
1. If you have the old one then just turn off wi-fi and the iPad (that's just for your peace of mind)
2. Put new iPad on airplane mode (just for no interruptions )
3. Connect it (while it's on, don't shut it down)
4. Follow prompts and when it asks if you want to setup as new or restore CHOOSE: RESTORE
5. It will make its magic (just wait for it to sync, restarts, and finishes) it might ask you to update software if it does just accept
6. You can rename your new iPad like that you can have a fresh back up
7. ENJOY your new iPad
----------OR-----------
1. Do the above steps 1, 2, 3.
2. On step 4 you can choose to set up as new
3. Then you can choose what to sync on it (click on iPad on the left panel then the tabs on top you choose what you want on it (you can also do that if you restore)
4. Follow steps 5, 6, 7.
****If you don't have your old iPad you can remove it from your account ****
****Also when they sync it to a new computer it will setup as new unless they had an old one then they will restore it their old one****
****if you have it connected with your MobileMe or iCloud and you have the find my _____ you can also wipe it as soon as it comes online****
LET ME KNOW IF YOU HAVE ANY QUESTIONS OR CONCERNS
AGAIN ENJOY YOUR NEW IPAD!!!

Is the Accordion Panel Capable of Holding a Gallery (with multiple pages)?

I'm trying to create a website similar to this: http://www.christianschmidt.com/ using the Accordion Panel. Can the panel's content panel hold javascript? I've tried several types of javascript based galleries and nothing seems to work correctly..
the site I'm working on: www.anhstudio.com/sample
if you have any suggestions on what javascripts I should use/work, let me know - thanks.

I have spent a lot of time on this, mainly because the problems crops up every now and again. Unfortunately it goes above my ancient head and I have only managed to come up with a very partial solution. In the following, I have taken all of the links to JS files and moved them down to the bottom of the document.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="../SpryAssets/SpryAccordion.js"></script>
<script src="../js/jquery.ui.widget.js"></script>
<script src="../SpryAssets/SpryDOMUtils.js"></script>
<script src="../js/jquery.smoothDivScroll-1.1-min.js"></script>
<script>
var nav = new Spry.Widget.Accordion("nav", {defaultPanel: -1});
Spry.$$('.AccordionPanelTab').addEventListener('click',function(){
    Spry.$$(".AccordionPanelOpen").forEach(function() {
        $("div#makeMeScrollable").smoothDivScroll({
            autoScroll: "onstart",
            autoScrollDirection: "backandforth",
            autoScrollStep: 1,
            autoScrollInterval: 12,
            startAtElementId: "startAtMe",
            visibleHotSpots: "always"
</script>
If you click the first tab first, you will see it working. Alas, if you happen to click any other tab first, it will not work.
HELP ARNOUT KAZEMIER!!!
Apology for the outburst. Getting closer though.
Gramps

Expand/Collapse all the Bookmarks in a PDF file

Hi,
This is my first message on the board :-)
I work with very large PDF files (i.e 2000 pages, 700 bookmarks on 5 or 6 levels!) and I'm looking for a script (Acrobat 9 Pro) allowing to expand/collapse all the bookmarks in a PDF file.
Thanks in advance for your valuable help,
Cheers
Antonella

The Acrobat Javascript Scripting reference (http://partners.adobe.com/public/developer/en/acrobat/sdk/AcroJS.pdf) describes how to use scripting to access bookmarks and how to open and close them, which is what you're looking for.
I suggest you read the reference and make a function that will do the job for you.
That's the way I would do it.
I don't think you can access the keyboard shortcuts "/" and "Shift + *" via scripting.
Torben.

How can I change all the fonts at once on labels I downloaded from Avery?

How can I change all the fonts at once on labels I downloaded from Avery?

select all (Edit > Select All), then open the font panel by selecting the menu item "Format > Font Show Fonts". Now select the font you want.
I could only find Templates from Avery for Pages. I think my suggestion in still good but want you to know you posted this question in the forum for Numbers.

Premiere Elements 4.0 - How do I change all the clips from 5 seconds to 2 seconds in length?

Premiere Elements 4.0 - How do I change all the clips from 5 seconds to 2 seconds in length?

Christine,
The Duration of Stills is set with Edit>Preferences to the number of Frames required, where ~ 30 Frames = 01 sec. of Duration.
Unfortunately, the Duration cannot be reset (Edit>Preferences) for material that has already been Imported. The procedure is to Delete those Imported Stills, and make the change, then re-Import them, and you will get the Duration that you have reset.
The only other option at this point is to manually Click-drag on the Head, or Tail of each Still in the Timeline, to adjust the Duration. I do this with the Info Panel open and visible to make it easier. Personally, unless I am well into the editing process, the Delete, change and re-Import option is my choice.
Good luck,
Hunt
PS - the ability to alter the Duration en masse for Imported Stills in the Project Panel has just been added in PrPro CS5. I do not know if it has been added in PrE 9 though.

Is adding easing on the accordion panel possible?

Hello! I am using the accordion panel but I would like to control the speed that the menus drop down and up. Right now it is rather instantaneous. I've searched around and can't find anything on it. Any advice on how to do this?
Thank you!
Larry

At current stage we cannot control the speed directly from Muse , but you want apply some custom code to achieve this.
Thanks,
Sanjit

How can i print all the contect of the code in sapscript window ? ?

how can i print all the contect of the code in sapscript window ? ?

Hi,
Do you mean that you want to print the ABAP code to SAPscrip form ?
Svetlin

How can i print all the tab pages not just the first page (tab)

how can i print all the tab pages not just the first page (tab)

You would need to do this programmatically. Here's one way:
Attachments:
Example_VI_BD6.png ‏3 KB

I am running out of memory on my hard drive and need to delete files. How can I see all the files/applications on my hard drive so I can see what is taking up a lot of room?

I am running out of memory on my hard drive and need to delete files. How can I see all the files/applications on my hard drive so I can see what is taking up a lot of room?
Thanks!
David

Either of these should help.
http://grandperspectiv.sourceforge.net/
http://www.whatsizemac.com/
Or search 'disk size' in the App Store.
Be carefull with what you delete & have a backup BEFORE you start, you may also want to reboot to try to free any memory that may have been written to disk.

How do I collapse all the accordion panels

Similar Messages

Maybe you are looking for