The accordion widget
Hello,
I would like to customize the widget Accordion by changing the appropriate CSS.
I am interested in the "Programatically Opening and Closing Panels" http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
We open or close the panels by panel ID, for example...
The following code must be inserted in the SpryAccordion.js... but I don't know where, exactly !
Code :
<p>Open by Panel ID:
<a href="#" onclick="acc1.openPanel('panel1'); return false;">panel1</a> |
<a href="#" onclick="acc1.openPanel('panel2'); return false;">panel2</a> |
<a href="#" onclick="acc1.openPanel('panel3'); return false;">panel3</a> |
<a href="#" onclick="acc1.openPanel('panel4'); return false;">panel4</a>
</p>
I would like to add links to " panel 1 ; Panel 2... ? How can I do that ?
Many thanks for your precious help...
My apologies, the following may help:
<!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>
<a href="#" onclick="Accordion1.openPanel('FIGUELINE'); return false;">FIGUELINE</a> |
<a href="#" onclick="Accordion1.openPanel('GALLERIE'); return false;">GALLERIE</a> |
<a href="#" onclick="Accordion1.openPanel('CONTACT'); return false;">CONTACT</a> |
<p> </p>
<div id="Accordion1" class="Accordion" tabindex="0">
<div id="FIGUELINE" class="AccordionPanel">
<div class="AccordionPanelTab" style="background-color:#F00;">FIGUELINE</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div id="GALLERIE" class="AccordionPanel">
<div class="AccordionPanelTab" style="background-color:#0F0;">GALLERIE</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div id="CONTACT" class="AccordionPanel">
<div class="AccordionPanelTab" style="background-color:#00F;">CONTACT</div>
<div class="AccordionPanelContent">Content 3</div>
</div>
</div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false });
//-->
</script>
</body>
</html>
The red coded parts need to be added. This is called applying inline styles and makes creating classes and their associated style rules redundant. You will need to adjust the colour (eg #F00 = red) to suit your needs
I hope this helps.
Ben
Similar Messages
-
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. -
Customizing/recreating the Accordion widget in Muse
I want to use the accordion widget, but I can't figure out how to flip it to work horizontally. Is there a way to flip or rotate in Muse? If not is there way to recreate an accordion menu that opens horizontally?
Thanks.You sure can, just download the widget from link below and copy and paste into your design then customize as you like.
http://muse.adobe.com/widget/composition-menu-vertical-mcdonald -
Is it possible to make the top tab in the accordion widget remain open constantly?
I'm looking to use the accordion widget as a secondary navigation in my site's sub pages. I've noticed other websites doing this successfully and one site inparticular has their top accordion panel always open.
This allows them to have their three main calls to action always accessible for the visitors to select.
I've tried implementing this but it doesn't seem to be possible?
Is there any way to access the code for the widget to see if I can tweak this to work?hello, you can set "about:newtab" as your homepage:
[[How to set the home page]] -
Problem with phone layout when I insert the Accordion widget ( since iOS8 )
Hello,
The problem appears after I insert the Accordion widget. The phone scales down the entire site, and there are no "lost" or hidden objects in the project. ( screenshot attached ) . This layout worked well before the second October Muse update.
I have tried a totally new basic website and had the same problem. The accordion takes the screen width. I have tried to make it smaller then the phone layout, but it remains small.
Website: www.pronovis.ag
I am very happy for any possible response,
Thanks,
AlexHi jonunes!
I have an article for you that I believe will help you troubleshoot this issue with your iPhone:
iPhone: No sound or distorted sound from speaker
http://support.apple.com/kb/ts5180
Thanks for coming to the Apple Support Communities!
Regards,
Braden -
How to adjust the width of the accordion widget
I'm builting my 2nd wesbite with Muse and cannot find a way to decrease the width size of the accoidion widget to fit my grid. When I try to decrease it it just "jumps" back to its original spot.
I may be going crazy but I can't seem to find any information on this in the forums. I'm sure it's a simple fix I just cannot find it. Any help would be appreciated!Reduce the width of the inner most container which is the usually the Text frame for each of the panels. Then you would be able to resize the width of the overall Accordion. Its just that the width of the Content Area cannot be less than that of the Text Frame inside.
Thanks,
Vinayak -
i have created a page with a very long accordion widget over 70 entries! its a staff list and the accordion rivals each persons bio. but what I need is when some clicks on a link person name on another page I want it to go to that accordion tab and open the accordion to rival the bio
Hi Jryan !
If you wire a 2D array to the input of a "replace element" function, you will see that the function expand to display an additionnal index. The one you are looking for !!
Chilly Charly (aka CC)
E-List Master - Kudos glutton - Press the yellow button on the left... -
Curious about the Accordion widget?
Adobe is looking for participants for a brief (~1 hour) work observation and interview. Participants must meet the following criteria:
Dreamweaver CS4 user (beginner to advanced -- no CS3 users please)
Curious about Spry, but have never used Spry widget features in Dreamweaver
You know what an Accordion widget is from other sites, but have never inserted or edited one in Dreamweaver
Familiar with CSS styling and how it works
We are offering a small incentive to those willing to help us complete this study.
If you meet these requirements and would like to participate, please contact me at [email protected]
In your email, please confirm that you are a Dreamweaver CS4 user, that you have never inserted a Spry Accordion, and that you are comfortable working with and editing CSS.
Thanks!To bad I fail on nearly all the criteria, I'll pass alone the message.
Good luck with the search. -
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,
jligCristian, 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 -
Accordion widget shaking on the page - help!
Why does the accordion widget shake? This is really unprofessional looking.
http://nicoleschepers.businesscatalyst.com/profile.html
Any ideas on how to get it to stop?ok i figured it out. if you make a website and it has a sticky footer, then the widget is going to shake. so uncheck sticky footer when you make a new site. but i don't see how this should matter
-
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. -
Is there a way to force a user to view all of Accordion Widget?
Is there a way to force a user to read, or at least view,
all sections of the Accordion Widget? We want to make sure the learner reads
all of the material before advancing to the next slide. Is there a way to do
this? I have searched all over, but I have been unable to find.No way. This is a static learning interaction, no event that could be used eventually. Personally I prefer offering reading material that is engaging over looking for a way to push the learner to look (reading doesn't mean he understands or grabs it) at all the stuff. But that is my teacher's past, if student doesn't read your stuff, something is wrong with the stuff, not with the student.
If you have to force, you'll have to find another way than the accordion interaction . -
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">
<!--
//var Accordion1 = new Spry.Widget.Accordion("Accordion1", {closedClass:"Accordion"});
//var Accordion1 = new Spry.Widget.Accordion("Accordion1", {closedClass:"AccordionPanel"});
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false });
//-->
</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. -
Mobile Site - Need Accordion Widget to start at top of page upon item selection
I have set up a mobile site. I use the accordion widget for topics. If I select any topic without diving into it and scrolling, it works fine. If I scroll through a topic after selection, the next topic starts in the middle or the bottom. Kind of annoying for the user. Any ideas?
ThanksHi Kevin,
Could you please share the site URL or any screen shot for reference?
Regards,
Neha
Maybe you are looking for
-
SCAN não retorna status do serviço
Bom dia, Desde 14/08/2011 às 08:05:56 o nosso tipo de emissão SCAN não está retornando STATUS de ativo, e também não é realizada a consulta do status do mesmo. Dei uma olhada no GRC/PI/Java/ECC... e aparentemente está tudo ok Quando o SCAN parou pela
-
i'm building a web page with muse,the page consists of many images,how to add facebook share button to each image??
-
I AM NEW TO JAVA...PLEASE HELP ME
Dear friends, I am very much interested in learning Java. But, I am Zero in Java. I don't know where to start, what to do..etc., I just downloaded Java Plug-In for Windows XP. Other than that I don't have anything. Please help me which is the best bo
-
Hi, I was wondering if it is possible to attach the Zen Micro to your PC and have it play FM radio over USB and through the computer speakers. I know it is possible to do so with the mp3's on the Zen. I believe this would be extremely handy, especial
-
Trouble creating an up to dats XP installation disk... I have a Windows SP2 disk What i want to do is download the correct SP3 Identify all updates and fixes since SP3 was released and download them I need to slipstream a single XP installation file