Question of SPRY accordion

Sorry, it's well buried in him is no longer supported SPRY forum 2 months so I'm reposting here.

I'm trying to ensure that the Panel at the bottom (last) is opened by default when the page is loaded. Please see my notes below. Thanks in advance!

----------------------------------------

I know that I can put the Panel open by default either by editing the SpryAccordian.js file as follows:
this.defaultPanel = 0;

Or by using the script like this:

< script type = "text/javascript" >

var acc8 = new Spry.Widget.Accordion ("Accordion8", {defaultPanel: 2});

< /script >

I also know that I can open the panels programmically like this:

< input type = "button" onclick = "acc10.openLastPanel ()" > open the last Panel < / input > "

< script type = "text/javascript" >

The problem with the first option is that I have dynamically add panels using a repeat so that the number of panels varies. I can't very well use a number here because it is not the last Panel or the number may be too high if it is not enough signs to all be closed. I tried to use 99 knowing that I will never have that many panels and of course all the panels are closed which is not desired.

I've failed with the onclick method to be able to play with him, I think that the openLastPanel is what I need. However, I do not want a button/link that must be clicked in order for this place. I guess I can use it instead of onload sort.

I hope someone could provide me with the code and the location to where you want to insert so that when the page opens, the last Panel is opened rather than the top.

Here is a link if you need to see it in action.

http://www.onlinetoyshow.com/figure_lines_Detail.php?Line_Id=30 (a result of the research shows 4 panels - this example is not really a problem)

This is another result of the research which has two panels.

http://www.onlinetoyshow.com/figure_lines_Detail.php?Line_Id=31 (this is where it would be nice to have the last Panel open instead of the first. The first Panel has only one point in it, but the height is set so that the next panel is easy to miss and all the way down)

I hope that all makes sense. Thanks in advance.

There are various samples on behalf of Git from Adobe, now that Spry is is longer supported directly.

You might want to take a look at a few examples given here to see if one of them works for you: http://adobe.github.com/Spry/samples/ - click "Widgets" on the top and you will see the various sets of examples of the accordion.

Tags: Dreamweaver

Similar Questions

Question of Spry Accordion Hover/active

I developed a widget spry Accordion for a page in the FAQ and in Dreamweaver CS6, it is fully functional. The color I chose does not occur with a hover or active tab once EVERYTHING is transferred. Here's a direct link to the page of problem, my CSS Spry and CSS layout as well as a screenshot of the correct functionality that occur in Dreamweaver. Thoughts?
The problem page:
http://pauldhart.com/RideTTF_website/FAQ.html
Spry CSS
@charset "UTF-8";
/ * SpryAccordion.css - version 0.5 - Pre - Release Spry 1.6.1 * /.
/ * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/ * This is the selector for the main container of the accordion. For our style by default.
* draw us left, right and bottom borders. The upper edge of the accordion
* is made by the first AccordionPanelTab which never moves.
*
* If you want to limit the width of the Accordion widget, set a width
* the accordion container. By default, our accordion expands horizontally to fill
* a space available.
*
* The name of the class ("accordion") used in this switch is not necessary
* make the widget function. You can use any class name you want to style the
* Accordion container.
*/
. Accordion {}
overflow: hidden;
}
/ * This is the selector for the AccordionPanel container which houses the
* tab panel and panel content area. It is not make it visually, but we
* ensure that it has zero margin and padding.
*
* The name of the class ("AccordionPanel") used in this switch is not necessary
* make the widget function. You can use any class name you want to style a
the container of accordion panel.
*/
. {AccordionPanel}
margin: 0px;
padding: 0px;
}
/ * This is the selector for the AccordionPanelTab. This container houses
the Panel personnel. It is also the container where the user clicks
* to open a specific panel.
*
* The name of the class ("AccordionPanelTab") used in this switch is not necessary
* make the widget function. You can use any class name you want to style a
the container of Accordion Panel tab.
*
* NOTE:
* This rule uses the - moz-user-select and - khtml-user-select properties to prevent the
* the user to select the text in the AccordionPanelTab. Here is the browser owner
properties that only work in Mozilla browsers (such as FireFox) and KHTML
* browsers (such as Safari), so they will not pass the W3C validation. If you want your documents to
* validate and don't care if the user can select text in an AccordionPanelTab.
* You can remove these properties without affecting the functionality of the widget.
*/
. {AccordionPanelTab}
border-top: 1px solid black;
border-bottom: 1px solid gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
background-image: url(/content-opaque.png);
background-attachment: fixed;
background-repeat: repeat;
do-family: Verdana, Geneva, without serif.
color: #FFF;
background-color: #300;
do-size: 12px;
}
/ * This is the selector for the content area of a Panel. It is important to note that
* You should never put any padding on the content area of the group if you plan to
* use the animations of accordion panel. Place padding non-zero on the content
* area can cause accordion suddenly increase in height, while signs alive.
*
* Anyone who styles an accordion * MUST * specify a height on the Accordion Panel
* Content container.
*
* The name of the class ("AccordionPanelContent") used in this switch is not necessary
* make the widget function. You can use any class name you want to style a
the container of the accordion panel content.
*/
. {AccordionPanelContent}
margin: 0px;
padding: 2px;
background-image: url (.. / infobkgd.png);
background-attachment: fixed;
background-repeat: repeat;
do-family: Verdana, Geneva, without serif.
do-size: 12px;
color: #FFF;
overflow: hidden;
height: 40
XxX
height: 100%;
}
/ * This is an example of how to change the appearance of the tab of the Panel which is
* currently open. The "AccordionPanelOpen" class is added and removed programmatically
* to panels as long as the user clicks on the tabs in the accordion.
*/
. AccordionPanelOpen. {AccordionPanelTab}
background-color: #000033;
}
/ * This is an example of how to change the appearance of the tab of the Panel as the
* mouse passes over it. The "AccordionPanelTabHover" class is added programmatically
* and removed containers tab panel as the mouse enters and leaves the tab container.
*/
. {AccordionPanelTabHover}
color: #FFFFFF;
background-color: #003;
}
. AccordionPanelOpen. {AccordionPanelTabHover}
color: #FFFFFF;
}
/ * This is an example of how to change the appearance of all the Panel tabs when the
* Accordion has focus. The class "AccordionFocused" is programmatically added and removed
* whenever the accordion wins or loses the keyboard focus.
*/
. AccordionFocused. {AccordionPanelTab}
background-color: #003;
}
/ * This is an example of how to change the appearance of the tab of the Panel which is
* currently open when the accordion is in focus.
*/
. AccordionFocused. AccordionPanelOpen. {AccordionPanelTab}
background-color: #000033;
}
/ * Printing rules * /.
@media print {}
. Accordion {}
overflow: visible! important;
}
. {AccordionPanelContent}
display: block! important;
overflow: visible! important;
height: auto! important;
}
}
CSS layout
<! doctype html >
<!-[if lt IE 7] > < class = "oldie ie6" html > <! [endif]-->
<!-[if IE 7] > < class = "ie7 oldie" html > <! [endif]-->
<!-[if IE 8] > < class = "ie8 oldie" html > <! [endif]-->
<!-[if gt IE 8] > 
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width = device-width, original scale = 1" >
< title > donate today! < /title >
< link href = "boilerplate.css" rel = "stylesheet" type = "text/css" > "
< link href = "_css/donatepage.css" rel = "stylesheet" type = "text/css" > "
< link href = "SpryAssets/SpryMenuBarDonate.css" rel = "stylesheet" type = "text/css" > "
< link href = "SpryAssets/SpryAccordion.css" rel = "stylesheet" type = "text/css" > "

< script src = "respond.min.js" > < / script >
< script src = "SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script > "
< script src = "SpryAssets/SpryAccordion.js" type = "text/javascript" > < / script > "
< / head >
< body >
< div class = "gridContainer clearfix" >
< div id = "header" > < img src = "RTTF - features ' alt = ' Ride to the flags VI" > < / div >
< div id = "navigation" >
< ul id = "donatemenu" class = "MenuBarHorizontal" >
< li > < a href = "profile.html" > home < /a > < /li >
< li > < a href = "theride.html" > the path < /a > < /li >
< li > < a href = "donate.html" > donate < /a > < /li >
< li > < a href = "#" class = "MenuBarItemSubmenu" > Gallery < /a >
< ul >
< li > < a href = "photo - gallery.html" > photo < /a > < /li >
< li > < a href = "gallery.html" - video > video < /a > < /li >
< /ul >
< /li >
< li > < a href = "faq.html" > FAQS < /a > < /li > ""
< li > < a href = "contact.html" > contact < /a > < /li >
< /ul >
< / div >
< span class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < / div >
</span >
< div id = "faq-content" >
< div id = "faq-accordion" class = "Accordion" tabindex = "0" >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: is this still ongoing? < / div >
< div class = "AccordionPanelContent" > a: Yes < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what is the date for this year's race? < / div >
< div class = "AccordionPanelContent" > Saturday, September 7 A:. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what time is the check-in/registration open? < / div >
< div class = "AccordionPanelContent" > was: online registration will begin in May. Check-in at 08:00 on 7 September. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: where is here? < / div >
< div class = "AccordionPanelContent" > has: Check-in will be just south of PCH on Las Posas Rd (just before the Gate 3 of the Naval Base). < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: the course will be the same? < / div >
< div class = "AccordionPanelContent" > was: we changed the road this year a few a few reasons. You can visit the roadmap to see. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: we do not race but we would like to come out and watch the bikes as they drive by. What time you will be on our street? < / div >
< div class = "AccordionPanelContent" > A: given our 10:30 departure, us will be sent the following streets in these moments here: < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what is the minimum amount to give up in this ride? < / div >
< div class = "AccordionPanelContent" > A: $20 to $35 per driver/passenger < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what does that give me? < / div >
< div class = "AccordionPanelContent" > was: Patch, ticket for the food and drink ticket < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: why do we need to raise/give a minimum this year? < / div >
< div class = "AccordionPanelContent" > r: as you know, during the first five years, the trip to the flags ran on a basis of everything-don-goes. However, as we got the biggest, costs related to reconstitute the journey grew enormously. The minimum donation allows for the costs for the ride. However, we do our best to bring about the authors as much as possible to help cover our costs so that we can ensure that your donation goes to good use. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: if I can give more money than the registration fee? < / div >
< div class = "AccordionPanelContent" > r: of course. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what happens if we raise a lot of money for the cause? < / div >
< div class = "AccordionPanelContent" > was: The White Heart Foundation is to give some small prizes for our major donors. Those who will be announced at a later date. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: arrival how will be different now that he is pre-registration? < / div >
< div class = "AccordionPanelContent" > was: there will be a pre-registered registration line and another line for those who seek to introduce yourself the day of. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what types of payments are accepted? < / div >
< div class = "AccordionPanelContent" > was: we prefer you use our fundraising Razoo.com online application that you will find on this site for your pre-registration. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: I ride a trike, can I participate? < / div >
< div class = "AccordionPanelContent" > a: Yes < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: are authorized scooters? < / div >
< div class = "AccordionPanelContent" > was: well, sure, why not? < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: will there be present celebrities? < / div >
< div class = "AccordionPanelContent" > was: probably. We don't usually know advance appearance. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: are you tired of all my questions? < / div >
< div class = "AccordionPanelContent" > A: a little < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what is happening on the basis, now that the celebration of freedom is at the end of the race? < / div >
< div class = "AccordionPanelContent" > A: memorial service and wreath laying and perhaps a special guest. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: will there be concerts at the celebration of freedom? < / div >
< div class = "AccordionPanelContent" > A: There will. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: I do not ride a motorcycle but I can still come to the celebration of freedom? < / div >
< div class = "AccordionPanelContent" > A: Yes. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what's my price? < / div >
< div class = "AccordionPanelContent" > A: General Public $40. Student $20. Bikers the day of $40. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: if I go for the ride and decided to simply come to the celebration of freedom at the end of the race, will I get my free patch, ticket to food and drink ticket? < / div >
< div class = "AccordionPanelContent" > a: No. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what are the costs of food & Drinks tickets? < / div >
< div class = "AccordionPanelContent" > was: food - $5 drink - $2, $5 beer - < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: WAIT? IT'S GOING TO BE BEER? < / div >
< div class = "AccordionPanelContent" > A: Yes. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: it's great. I love you. < / div >
< div class = "AccordionPanelContent" > A: control yourself. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: will there be sellers during the celebration of freedom? < / div >
< div class = "AccordionPanelContent" > was: Yes! For the first time, we give you... bike sellers. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: I am a vendor, how do I book a place? < / div >
< div class = "AccordionPanelContent" > was: click here and fill out our application. It is much easier to take the S.A.T. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: can I sponsor the celebration of freedom? < / div >
< div class = "AccordionPanelContent" > a: certainly! Click here to see our sponsorship package. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: can you my hiking club together? < / div >
< div class = "AccordionPanelContent" > was: If you come together, connect together, hold hands. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: are we make large flags from the start this year? < / div >
< div class = "AccordionPanelContent" > was: Yup < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: last year, the riders will split, how do you set this year? < / div >
< div class = "AccordionPanelContent" > A: we deposit certain permits and pay astronomical fees to stop traffic for 30 minutes Saturday while we do not get split up. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: last year the race ended up being really slow, it will slow down this year? < / div >
< div class = "AccordionPanelContent" > A: we admit it was slow. We know, we know. Now that we close the roads that we all pass, we will be able to pick up the pace a little. The new route allows also go faster through town. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: I'm a policeman will be conducted as a civilian. Can I bring my firearm on base? < / div >
< div class = "AccordionPanelContent" > A: base won't allow that. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: I want to create a team donation, where should I start? < / div >
< div class = "AccordionPanelContent" > 34 content < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: can I start a team making a donation for my group of motorcycle cover all our registration fees? < / div >
< div class = "AccordionPanelContent" > was: Negatory. Each individual is his own team. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: I don't have a motorcycle, can I still attend? < / div >
< div class = "AccordionPanelContent" > r: Yes, you can attend two event at the Naval Base and the celebration of freedom in Malibu. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: what is the WHF? < / div >
< div class = "AccordionPanelContent" > was: The White Heart Foundation was created to help support our military community, police and firefighters. < / div >
< / div >
< / div >
< / div >
< div id = "footer" > This is the content of the div layout 'footer' < / div >
< / div >
< script type = "text/javascript" >
var MenuBar1 = new Spry.Widget.MenuBar ("donatemenu", {imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});})
var Accordion1 = new Spry.Widget.Accordion ("faq-accordion");
< /script >
< / body >
< / html >
Screenshot of how it looks locally in Dreamweaver:

SpryAccordion.css

You have an error that kills the rest of your code below in red. Remove it.

. {AccordionPanelContent}

margin: 0px;

padding: 2px; / * suggest using 12px or more * /.

background-image: url (.. / infobkgd.png);

background-attachment: fixed;

background-repeat: repeat;

do-family: Verdana, Geneva, without serif.

do-size: 12px; / * suggest using 16px or more * /.

color: #FFF;

overflow: hidden;

height: 40

[x;

height: 100%;

}

Nancy O.

Spry Accordion and #wrapper question

Hello
I'm trying to set up a portfolio site as part of a course of the Custom Installation Wizard. If you look at the course site www.jmacphot.com you will see on the page of the equipment, I tried adding a spry accordion, then a spry menu tabs inside the accordion. However, you will see that when I insert a large amount of information in the content area, he pushes the tab on the footer and keep the footer at the bottom of the page... I'm puzzled because I did not put any specific height on my CSS to keep moving forward.
Please can anyone advise where I could go wrong here. Sorry if this question was asked several times, but I am very new to web design.
Your help it is much appreciated!
Concerning
John

Normally, it is better to not have a height in a layout constraint, especially how responsive Web design (RWD). Because you set the height of the content to 400px, you will need to limit the height of the accordion as in

. {AccordionPanelContent}

height: 320px;

}

Question of the accordion Spry tabs

Hello
I am trying to create a menu accordion spry for a navigation bar and have some difficulty.
This is the first time I tried it, so I'd appreciate any help.
The customer wants the tabs to be:
Home
Students
The high school students
College students
Professionals of the
Parents/carers
Seminars
Bio
Q & a Blog
Testimonials
So what they want high school students and college students in child tabs under the parent tabs and all the other tabs parent.
They asked a spry accordion.
They want the navigation bar on the left.
Here is the link to the online site:
http://www.elynncohen.com/index2spry2.html#
and here are my questions:
1. the spry accordion has a box around it on the mouse down, but I can't understand how get rid of it. I checked all of the CSS rules for the spry accordion and none of them seem to have rules that surround them.
2. all tabs have an area of content under them, and we want only the content tab of the student areas. You see what happens when you click on one of the tabs, you get a little thing that says content 1, 2, etc. I tried to delete them in the code and the page becomes completely crazy when I do and nav bar areas stretching all the way across the page.
3. I can't figure out how to get the child tabs (which would be the tabs under the students who say high school and college) to have two tabs. You will see that there no tab high school here now. When I try to cut and paste the code to try to get two tabs, it doesn't. The spry malaccaaccordian framework only creates a content under each tab area.
4. I would like the tabs of the child to be narrower than the parent tabs height and be indented so that they clearly will switch off and different than parent tabs.
Any help would be appreciated!
Thank you!!!
Here is my code:
<! DOCTYPE HTML >
< html >
< head >
< meta charset = "UTF-8" >
< title > your career guidance and college Counseling < /title >
< meta name = "Keywords" content = "career guidance, College orientation, job search, career choices, College options, options career, work, jobs, opportunities, change career, new career, new job" / >
< name meta = "Description" content = "" your career guidance: career and College Counseling ""Given your choice of college & career options"'Preparation for the world of work after College' 'Looking for a new job to pursue your career'"
'In transition, and taking into account new opportunities '.
"Search for a career important and significant change" / >
< meta content = "Publisher" name = "Your career orientation, LLC" / >
< name meta = 'Copyright' content = 'Copyright 2012, your career guidance, LLC. All rights reserved. "/ >
< meta content = "Author" name = "Lisa Mark" / >
< name meta = "Language" content = "en-US" / >
< name meta = 'distribution' content = 'global' / >
< meta content = "revisit-after" name = 'ten days' / >
< name meta = "Robots" content = "All" / >
< link rel = "Index" href = "index.html" / > "
< link rel = "Site map" href = "sitemap.html" / > "
"< script type =" text/javascript"src="//use.typekit.net/ifb2bte.js "> < / script >
< script src = "SpryAssets/SpryAccordion.js" type = "text/javascript" > < / script > "
< script type = "text/javascript" > try {Typekit.load () ;} catch (e) {} < /script >}
< style type = "text/css" >

< link href = "SpryAssets/SpryAccordion.css" rel = "stylesheet" type = "text/css" > "
< / head >
< body > < script type = "text/javascript" >
function pageWidth() {}
return window.innerWidth! = null? window.innerWidth: document.documentElement & & document.documentElement.clientWidth? document.documentElement.clientWidth: document.body! = null? document.body.clientWidth: null;
}
function pageHeight() {}
return window.innerHeight! = null? window.innerHeight: document.documentElement & & document.documentElement.clientHeight? document.documentElement.clientHeight: document.body! = null? document.body.clientHeight: null;
}
< /script >
< div class = "container" >
< div class = "header" > <! - end .header - >
< class p = 'clearfloat' > < a href = "" #index.html ' id = 'Insert_logo2' "> < img src="images/YCD-logo-tag-RGB-web-SM.gif "alt ="Logo of your career branch"name ="Insert_logo"width ="50% "id ="Insert_logo2"style =" background: #FFF ""
; Display: block; "/ > < /a > < /p >
< div id = "Quote" > < img src = "images/quote.gif" alt = "choose a job you love" width = "355" height = "81" > < / div > "
< class p = 'clearfloat' > < / p >
< / div >
< div class = "sidebar1″" >
< ul class = "nav" >
< li >
< div id = "Accordion1" class = "Accordion" tabindex = "0" >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < a href = "#" > home < /a > < / div >
< div class = "AccordionPanelContent" > content 1 < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < a href = "#" > students < /a > < / div >
< div class = "AccordionPanelContent" > < a href = "#" > school < /a > < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < a href = "#" > Professional < /a > < / div >
< div class = "AccordionPanelContent" > 3 content < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < a href = "#" > Parent/educator < /a > < / div >
< div class = "AccordionPanelContent" > 4 content < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < a href = "#" > seminars < /a > < / div >
< div class = "AccordionPanelContent" > content 5 < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < a href = "#" > Bio < /a > < / div >
< div class = "AccordionPanelContent" > 6 content < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < a href = "#" > Q & amp; A Blog < /a > < / div >
< div class = "AccordionPanelContent" > 7 content < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < a href = "#" > stories < /a > < / div >
< div class = "AccordionPanelContent" > 8 content < / div >
< / div >
< / div >
< /li >
< /ul >
< / div >
< div class = "content" >
< p > given today's competitive job market, the global economy and has changed the corporate culture.
is no longer, we rely on others to ensure our professional future. Choose or
change your career guidance requires personal reflection, career education and an action plan. < /p >
< img src = "images/if-you-are-.gif" alt = "If you consider your choice of college and career options" width = "197" height = "31" align = "left" >
< ul >
< br > < br > < li > < strong > given your choice of college & amp; career < facilities > options < /li >
< li > < strong > preparation for the world of work after College < facilities > < /li >
< li > < strong > looking for a new job to pursue your career < / strong > < /li >
< li > < strong > transition and given opportunities < facilities > < /li >
< li > < strong > seeking to make an important and significant career < facilities > < strong change > < / strong > < /li >
< /ul >
< img src = "images/Onethingisforsureraster.gif" width = "352" height = "49" alt = "one thing is sure, we all run our own careers, our own lives!" > "
< Br > < p > building a successful and rewarding career requires linking your interests, education and experience of the trends in employment, growth industries and a career choice. It takes smart decisions on your college major, professional training and training options. With enthusiasm, persistence and unparalleled job search techniques, you can succeed in finding a path to the career that suits you. < /p >
< p > we are your lawyer. We listen, assess, strategize, inspire, counsel and network on your behalf. With a personalized and comprehensive approach, we will work with you to help you create a plan of action; a path designed for you to get where you want to go and become what you want to be. < /p >
< img src = "images/yourcareerourpassionraster.gif" width = "441" height = "20" alt = "Your career guidance, YOUR career is our passion!" > < / div > "
< div class = 'sidebar2' >
< p > < img src = "images/Counselingastudent.gif" width = "100%" alt = 'Lisa Mark advising a student' > < / p > "
< p > our mission is to help you to discover, choose and create your direction for a challenging and rewarding career path < /p >
< p > integrate us our experience with the work force today and advice expertise with your passions and career interests. We will introduce new career ideas yourself, target companies and generate opportunities for job and internship for you. < /p >
< p > guide us step by step to ensure your success when applying for college, job interview
and decision making process.
< /p >
< / div >
< div class = "footer" >
< div id = "footer" >
< h6 align = "left" > your career guidance, LLC • 96 Harvard Avenue, Maplewood, New Jersey 07040 • (973) 996-0207 • [email protected] < / h6 >
< / div >
< p > < / p >
<! - end .footer - > < / div >
<! - end .container - > < / div >
< script type = "text/javascript" >
var Accordion1 = new Spry.Widget.Accordion ("Accordion1");
< /script >
< / body >
< / html >

1. the spry accordion has a box around it on the mouse down, but I can't understand how get rid of it. I checked all of the CSS rules for the spry accordion and none of them seem to have rules that surround them.

2. all tabs have an area of content under them, and we want only the content tab of the student areas. You see what happens when you click on one of the tabs, you get a little thing that says content 1, 2, etc. I tried to delete them in the code and the page becomes completely crazy when I do and nav bar areas stretching all the way across the page.

3. I can't figure out how to get the child tabs (which would be the tabs under the students who say high school and college) to have two tabs. You will see that there no tab high school here now. When I try to cut and paste the code to try to get two tabs, it doesn't. The spry malaccaaccordian framework only creates a content under each tab area.

4. I would like the tabs of the child to be narrower than the parent tabs height and be indented so that they clearly will switch off and different than parent tabs.

1 line 454

style = "" outline: none; " " >

2 & 3. Change your line code 455-491:

#"> Home".

#"> Students.

#"> High school.
College

#"> Professional.

#"> Parent/educator.

#"> Seminars»

#">Bio

#"> Q & a Blog.

#"> Testimonials»

4. Add your HTML code for tabs child like this:

ID 'submenu' =>#"> high school.

Create a new css #submenu rule in your CSS document and set the style as you wish.

Spry Accordion has failed in all open tabs. What's wrong?

Hello
I had my spry accordion works perfectly a week ago. Then I tried to add another panel at the top, and all of a sudden all the tabs opened by default. I would like that they go back to all be closed in case of default. I've been on my new coding for a week and may not know what I did wrong. I can get the first Panel to close in case of default by changing the Panel by default-1, but that fact that the other panels look weird to be open. Here is my code short for important parts:
< div id = "Accordion1" class = "Accordion" tabindex = "0" >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > create your own Art path < / div >
< div class = "AccordionPanelContent" >
< p > would you like to...
(the rest of the content + 5 tabs more)
< / div > < script type = "text/javascript" >
<!--
var Accordion1 = new Spry.Widget.Accordion ("Accordion1", {useFixedPanelHeights: false, defaultPanel:-1});
->
< /script >
My url is: http://www.7elementsBR.com/courses
Can someone help me understand this riddle? Thank you.

C F McBlob says:

There are SEVERAL paragraph tags that are "open". Who can shake the whole Spry function.

No, he can't. The closing of a paragraph tag is optional. The reason that it is trigger error in the W3C validator is because a XHTML doctype is used. Many other "errors" are caused by JavaScript is read by the validator as if it was HTML.

However, you are right about the non closed tags. The problem with the accordion is in question by incorrectly nested divs.

This is how the content div should look like:

Courses (fall 2013)

Create your own art classes

Would you like to be in a class with your friends and family learn exactly what you learn on your schedule? You can customize which materials use you, how many times you come, the time that you come, studying only the summary or realism, perhaps a bit of everything? Price is determined by your selections.

Form of personalized courses

Basic art (6-12 years)

Monday 04:30 - 18:00 (no longer accepting registrations fall.)

Students will get to enjoy these different mediums: pencil, charcoal, pastel sweet pastel oil, engraving, watercolor, and acrylic paint. We will explore all the 7 elements of art in order to create a good basis for our young artists. Students are invited to bring documents or do not hesitate to visit the Shopof canvas to create on. All media can be used and are included in the price. Course begins August 12.

16 sessions, 4 free punched cards, $55 / month

Drawing (6 years and older)

Thursday 04:30 - 18:00 (no longer accepting registrations fall.)

Students will learn the 7 elements of art through various drawing tools including: pencil, pastel, charcoal, soft and oil pastel. It is a class based on realism first and find your own style as an artist later. Students are invited to bring the papers to draw, or do not hesitate to visit the store. All media can be used and are included in the price. Course begins August 15.

16 sessions, 4 free punched cards, $55 / month

Open Studio

Monday - Friday, 12-16:00 (call advance @ 225.366.7442)

This course is all about the artist as an individual. Not teaching, and artists can come and go as happy. Weekly reviews are Friday 3-4 hours and are not mandatory, but allow comments from several artists and provide answers for your development as an artist. Artists can work with any medium and may choose to rent media for $5 / hour. The studio is not open the Friday 1, holiday, Easter, Halloween week, the week of Thanksgiving or Christmas week.

Price: $5 / hour or FREE for current students

Paragraph tags not closed must also be laid down, but what is the cause of the problem with the accordion is incorrectly nested divs.

Default Spry Accordion Panel
CONTEXT: I inserted a Spry Accordion with six different panels. Each Panel has its own set of links. Each link corresponds to a page in a long series of linked pages which together form a single document. Each panel of links represents a contiguous set of linked pages and a section of the document. In addition, I created a model for the entire document which includes the Spry Accordion just described.

GOAL: create an editable region in the template that will allow me to control the default Panel for each page of the document.

FAILURE of ATTEMPT: documentation Adobe to set the default for the Spry Accordion Panel suggests the following JavaScpript:

< script type = "text/javascript" >
var acc8 = new Spry.Widget.Accordion ("Accordion8", {defaultPanel: [someNumber]});
< /script >

where someNumber is an integer that is greater or equal to zero. When this code is entered into the model error.

DISCUSSION: continued research in the JavaScript file that controls the accordion, I was able to find the function that controls the default Panel. It appears like this:

Spry.Widget.Accordion = function (element, opts)
{
This.Element = this.getElement (element);
this.defaultPanel = 0;
this.hoverClass = "AccordionPanelTabHover";
this.openClass = "AccordionPanelOpen";
this.closedClass = "AccordionPanelClosed";
this.focusedClass = "AccordionFocused;
this.enableAnimation = true;
this.enableKeyboardNavigation = true;
this.currentPanel = null;
This.Animator = null;
this.hasFocus = null;
This.Duration = 500;

this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;

this.useFixedPanelHeights = true;
this.fixedPanelHeight = 0;

Spry.Widget.Accordion.setOptions (, opts, true);

Unfortunately, some browsers like Safari, style sheets in our
page depends may not have been loaded at the time, we are called.
This means that we must postpone attaching our behavior until after the
OnLoad event is triggered, because some of our behaviors are based on dimensions
specified in the CSS.

If (Spry.Widget.Accordion.onloadDidFire)
this.attachBehaviors ();
on the other
Spry.Widget.Accordion.loadQueue.push (this);
};

QUESTION: How can I access this feature of in my template to change the setting for this.defaultPanel?
Quote:
The main JavaScript file for the accordion can be controlled by a
model, since he lives in a separate .js file.

I do not use templates myself, but it looks like the correct way to approach
the problem is the one used on your 'ATTEMPT failed. You can try it
again and report message the exact error you get and at what stage. Maybe
you get help on that.

EXPRESSION OF GRATITUDE
Thank you for your encouragement. Indeed, part of the solution to my problem was discovered through a reconsideration of my attempt failed. The other part came from the information provided me while helping another person with a related, but different problem. It turns out that the line of code in my failed ATTEMPT is automatically placed in the model when the SPRY accordion is inserted. Unaware of his presence and the right place I am he entered by mistake a second time. This triggers not only an error message, but it renders unusable, various other parts of my document.

THE SOLUTION
First step: find the line of code that is similar to that given by the following text:

In my model, this code was found at the bottom of the HTML body tag.

Second step: understand that the name of the variable 'acc8' and the name of the "Accordion8" parameter provided in the sample code above are arbitrary, and that the two are automatically defined when then a SPRY accordion is inserted. Important is that these names are likely to be different from what you see in the sample code above, and that you need and probably should not edit them in your document.

Step 3: change the number in the name pair: value indicated as defaultPanel:2 to a number between 0 and one less than the number of panels that you create in your accordion. It is this number that allows you to determine the Panel that appears when the document is opened.

Step four: Save and test in your favorite browser. Enjoy!

CAUTION:
This experience taught me a crucial lesson on the use of Dreamweaver. Dreamweaver has a mind of its own and can easily ruin you in seeking to correct your own mistakes for you. The solution is to save your document with a second copy before attempting any innovation that is not already integrated in the Dreamweaver program.

FURTHER EXAMINATION:
As I created a template to use with other documents, I will now try to make this area of my template editable, so that I can change the default setting of every other page that I create from my template. As I still do this, understand that the steps above, even if it is valid for a document template, may or may not be valid for pages created from the template. I hope they are and it will keep experimenting.

Dreamweaver will not insert a Spry Accordion with css

I'm working on an accordion Spry in Dreamweaver and get into trouble, so I have deleted all its css in the css Panel. Now, when I say Insert > Spry Accordion, it is not all css.
Uh-oh, I did?

Make a new page. Insert the Spry Accordion and save the page folder in the root of your site.

DW should save active Spry to your folder of active Spry. If not, see below for the default CSS file.

@charset "UTF-8";

/ * SpryAccordion.css - version 0.5 - Pre - Release Spry 1.6.1 * /.

/ * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/ * This is the selector for the main container of the accordion. For our style by default.

* draw us left, right and bottom borders. The upper edge of the accordion

* is made by the first AccordionPanelTab which never moves.

*

* If you want to limit the width of the Accordion widget, set a width

* the accordion container. By default, our accordion expands horizontally to fill

* a space available.

*

* The name of the class ("accordion") used in this switch is not necessary

* make the widget function. You can use any class name you want to style the

* Accordion container.

*/

. Accordion {}

border-left: 1px solid gray;

border-right: 1px solid black;

border-bottom: 1px solid gray;

overflow: hidden;

}

/ * This is the selector for the AccordionPanel container which houses the

* tab panel and panel content area. It is not make it visually, but we

* ensure that it has zero margin and padding.

*

* The name of the class ("AccordionPanel") used in this switch is not necessary

* make the widget function. You can use any class name you want to style a

the container of accordion panel.

*/

. {AccordionPanel}

margin: 0px;

padding: 0px;

}

/ * This is the selector for the AccordionPanelTab. This container houses

the Panel personnel. It is also the container where the user clicks

* to open a specific panel.

*

* The name of the class ("AccordionPanelTab") used in this switch is not necessary

* make the widget function. You can use any class name you want to style a

the container of Accordion Panel tab.

*

* NOTE:

* This rule uses the - moz-user-select and - khtml-user-select properties to prevent the

* the user to select the text in the AccordionPanelTab. Here is the browser owner

properties that only work in Mozilla browsers (such as FireFox) and KHTML

* browsers (such as Safari), so they will not pass the W3C validation. If you want your documents to

* validate and don't care if the user can select text in an AccordionPanelTab.

* You can remove these properties without affecting the functionality of the widget.

*/

. {AccordionPanelTab}

background-color: #CCCCCC;

border-top: 1px solid black;

border-bottom: 1px solid gray;

margin: 0px;

padding: 2px;

cursor: pointer;

-moz-user-select: none;

-khtml-user-select: none;

}

/ * This is the selector for the content area of a Panel. It is important to note that

* You should never put any padding on the content area of the group if you plan to

* use the animations of accordion panel. Place padding non-zero on the content

* area can cause accordion suddenly increase in height, while signs alive.

*

* Anyone who styles an accordion * MUST * specify a height on the Accordion Panel

* Content container.

*

* The name of the class ("AccordionPanelContent") used in this switch is not necessary

* make the widget function. You can use any class name you want to style a

the container of the accordion panel content.

*/

. {AccordionPanelContent}

overflow: auto;

margin: 0px;

padding: 0px;

height: 200px;

}

/ * This is an example of how to change the appearance of the tab of the Panel which is

* currently open. The "AccordionPanelOpen" class is added and removed programmatically

* to panels as long as the user clicks on the tabs in the accordion.

*/

. AccordionPanelOpen. {AccordionPanelTab}

background-color: #EEEEEE;

}

/ * This is an example of how to change the appearance of the tab of the Panel as the

* mouse passes over it. The "AccordionPanelTabHover" class is added programmatically

* and removed containers tab panel as the mouse enters and leaves 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 class "AccordionFocused" is programmatically added and removed

* whenever the accordion wins or loses the keyboard focus.

*/

. AccordionFocused. {AccordionPanelTab}

background-color: #3399FF;

}

/ * This is an example of how to change the appearance of the tab of the Panel which is

* currently open when the accordion is in focus.

*/

. AccordionFocused. AccordionPanelOpen. {AccordionPanelTab}

background-color: #33CCFF;

}

/ * Printing rules * /.

@media print {}

. Accordion {}

overflow: visible! important;

}

. {AccordionPanelContent}

display: block! important;

overflow: visible! important;

height: auto! important;

}

}

Copy & paste into a new CSS file empty. Save in the Spry Assets like SpryAccordion.css file

Nancy O.

A question on the accordion in Muse on the positioning

A question on the accordion in Muse - for example, I put an accordion, a web page with an anchor position and use a menu button to point to the location. However, when I resize the browser, as it is closer to that before, the accordion actually moves to the left side when I use the menu button to go to the accordion. I don't want that, in fact, I would like to the accordion keeps a certain distance from the left of the edge of the browser, instead of from the right. Could you please help?
Maybe, I'm not decsribAn example is on the Site of the day: http://corlessmason.com/#portfolio , when I resize the closest browser, the photo panel maintains its position and it is only be trimmed rather than be pushed to the left - which is pretty much I would achieve.
Thank you.

in fact, I found the solution:

The Vertical shift muse Web site

It works perfectly now!

Spry Accordion with iFrames

I have a Spry Accordion which I use on the same page as an installer of the iFrame. I want the AccordionPanelTab a link to iFrame linking.
In order to get the iFrame to work I need a link like this:
```
<a href="iframepage.php" onclick="return changeIframeSrc('iframe', this.href);" target="iframe"> 
```
This works for links within the AccordionPanelContent but is not if I connect the AccordionPanelTab.
I can get the AccordionPanelTab to post a link to
```
<a href="iframepage.php" onclick="window.location=this.href;return false;"> 
```
but not in the iFrame. Is there a way to combine these two do their job or another way to make the AccordionPanelTab link?
Thank you very much.

Function added as in

Changed the link as in

Puts life

Not sure if it's metlife.html or metlife.php, as the two are mentioned in your document. ' Ensure that there is no bar oblique after fake '

Using Spry Accordion menu problem

I use the Spry Accordion widget as a menu/table of contents in a Web site and have encountered a problem that requires customization that I can't find anywhere.
Here is the link: http://2ndlookgraphics.com/slProfile/index.html
I placed the menu links pointing to 'parent', which seems to be working in an iframe.
My problem is that whenever you click on a link in any other first round table, the menu returns to the opening position with you first Panel opened.
I would like if possible to have the Panel which is being accessed to stay open until another tab is open.
If this is not possible, it would be best if the first Panel was closed initially and the accordion effect to learn hovering rather that click.
I use a 'fluid' responsive checkered but who does not seem to have an impact on this issue.
I would like some advice on this please.

All the panels closed-

More details here:

http://Adobe.github.IO/Spry/articles/data_api/APIs/accordion.html

Want to get spry accordion panel will remain open while a page to this article

Is there a way to get an accordion spry tab remain open while on a page in a section? For example, if I am in the Panel "information section" and I click on a link (references.html) I want the menu accordion will stay open until I go to a new menu panel. Is this possible with this Spry Accordion widget?

In documents (pages) at the bottom of the document, you will see a line similar to

acc1 var = new Spry.Widget.Accordion ("acc1", {useFixedPanelHeights: false, defaultPanel:-1 });

For each document in the Panel "ABOUT LSNY" - PUBLICATIONS, change the value to 1

For each document in the "MEMBERSHIP - CONTACT" panel, set the value to 2

And so on for each Panel

How to apply different styles to several spry accordion panels?

Hi all
I have a site I'm building that has several functions that spry accordion.
I try to apply different styles to each accordion. A problem arises when I try to place an accordion in an another accordion.
I have style two images of different background for both of the accordians for styles (AccordionPanelTab, AccordionPanelTabHover and AccordionPanelOpen AccordionPanelTabHover) that work very well.
When I try and place an accordion in an another accordion background image for this Accordion for styles (AccordionPanelTab and AccordionPanelOpen AccordionPanelTabHover) has different style applied that I said in the accordion.css folder, however the style (AccordionPanelTabHover) has the same style as the accordion, it's breast, even if I said a background image in the accordion.css file different.
I hope this makes sence, below is my source and the CSS Code.
I appriciate any help that can be given to help solve this issue I'm running too.
Source code
< div id = "content" >
< p > < span class = "first_header_word_packages" > welcome </span > < span class = "header_word_packages" > on our page of packages </span > < / p >
< class p = "content_txt" > here you can build the package Web site that meets your needs while being able to determine the cost of your site without having to worry about the scary hidden costs at a later date. < /p >
< class p = "content_txt" > we have two packages available for our clients; < /p >
< div id = "Accordion1" class = "Accordion" tabindex = "0" >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < / div >
< div class = "AccordionPanelContent" >
Here the text < p > < /p >
< div id = "Accordion2" class = "Accordion" tabindex = "0" >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < / div >
< div class = "AccordionPanelContent" >
Here the text < p > < /p >
< / div > <! - end #Accordion2 content - >
< / div > <!-end #AccordionPanel->
< / div > <!-end #Accordion2->
< / div > <! - end #Accordion1 content - >
< / div > <!-end #AccordionPanel->
< / div > <!-end #Accordion1->
< div id = "Accordion3" class = "Accordion" tabindex = "0" >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < / div >
< div class = "AccordionPanelContent" >
Here the text < p > < /p >
< div id = "Accordion4" class = "Accordion" tabindex = "0" >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < / div >
< div class = "AccordionPanelContent" >
Here the text < p > < /p >
< / div > <! - end #Accordion4 content - >
< / div > <!-end #AccordionPanel->
< / div > <!-end #Accordion4->
< / div > <! - end #Accordion3 content - >
< / div > <!-end #AccordionPanel->
< / div > <!-end #Accordion3->
< / div > <!-end #content->
CSS
@charset "UTF-8";
/ * SpryAccordion.css - version 0.5 - Pre - Release Spry 1.6.1 * /.
/ * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/ * This is the selector for the main container of the accordion. For our style by default.
* draw us left, right and bottom borders. The upper edge of the accordion
* is made by the first AccordionPanelTab which never moves.
*
* If you want to limit the width of the Accordion widget, set a width
* the accordion container. By default, our accordion expands horizontally to fill
* a space available.
*
* The name of the class ("accordion") used in this switch is not necessary
* make the widget function. You can use any class name you want to style the
* Accordion container.
*/
. Accordion {}
border-left: 1px solid gray;
border-right: 1px solid black;
border-bottom: 1px solid gray;
overflow: hidden;
}
/ * This is the selector for the AccordionPanel container which houses the
* tab panel and panel content area. It is not make it visually, but we
* ensure that it has zero margin and padding.
*
* The name of the class ("AccordionPanel") used in this switch is not necessary
* make the widget function. You can use any class name you want to style a
the container of accordion panel.
*/
. {AccordionPanel}
margin: 0px;
padding: 0px;
}
/ * This is the selector for the AccordionPanelTab. This container houses
the Panel personnel. It is also the container where the user clicks
* to open a specific panel.
*
* The name of the class ("AccordionPanelTab") used in this switch is not necessary
* make the widget function. You can use any class name you want to style a
the container of Accordion Panel tab.
*
* NOTE:
* This rule uses the - moz-user-select and - khtml-user-select properties to prevent the
* the user to select the text in the AccordionPanelTab. Here is the browser owner
properties that only work in Mozilla browsers (such as FireFox) and KHTML
* browsers (such as Safari), so they will not pass the W3C validation. If you want your documents to
* validate and don't care if the user can select text in an AccordionPanelTab.
* You can remove these properties without affecting the functionality of the widget.
*/
. {AccordionPanelTab}
background-color: #CCCCCC;
border-top: 1px solid black;
border-bottom: 1px solid gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
}
/ * This is the selector for the content area of a Panel. It is important to note that
* You should never put any padding on the content area of the group if you plan to
* use the animations of accordion panel. Place padding non-zero on the content
* area can cause accordion suddenly increase in height, while signs alive.
*
* Anyone who styles an accordion * MUST * specify a height on the Accordion Panel
* Content container.
*
* The name of the class ("AccordionPanelContent") used in this switch is not necessary
* make the widget function. You can use any class name you want to style a
the container of the accordion panel content.
*/
. {AccordionPanelContent}
overflow: auto;
margin: 0px;
padding: 0px;
}
/ * This is an example of how to change the appearance of the tab of the Panel which is
* currently open. The "AccordionPanelOpen" class is added and removed programmatically
* to panels as long as the user clicks on the tabs in the accordion.
*/
. AccordionPanelOpen. {AccordionPanelTab}
background-color: #EEEEEE;
}
/ * This is an example of how to change the appearance of the tab of the Panel as the
* mouse passes over it. The "AccordionPanelTabHover" class is added programmatically
* and removed containers tab panel as the mouse enters and leaves 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 class "AccordionFocused" is programmatically added and removed
* whenever the accordion wins or loses the keyboard focus.
*/
. AccordionFocused. {AccordionPanelTab}
background-color: #3399FF;
}
/ * This is an example of how to change the appearance of the tab of the Panel which is
* currently open when the accordion is in focus.
*/
. AccordionFocused. AccordionPanelOpen. {AccordionPanelTab}
background-color: #33CCFF;
}
/ * Printing rules * /.
@media print {}
. Accordion {}
overflow: visible! important;
}
. {AccordionPanelContent}
display: block! important;
overflow: visible! important;
height: auto! important;
}
}
#Accordion1. {AccordionPanelTab}
height: 75px;
Width: 285px;
Background: url (.. /images/package_spry_tab_bg1.png) ;}
#Accordion1. AccordionPanelTabHover,
#Accordion1. AccordionPanelOpen. {AccordionPanelTabHover}
Background: url (.. /images/package_spry_tab_bg1_RO.png) ;}
#Accordion2. {AccordionPanelTab}
height: 44px;
Width: 469px;
Background: url (.. /images/packages_spry1.png) ;}
#Accordion2. AccordionPanelTabHover,
#Accordion2. AccordionPanelOpen. {AccordionPanelTabHover}
Background: url (.. /images/packages_spry1_ro.png) ;}
#Accordion3. {AccordionPanelTab}
height: 75px;
Width: 285px;
Background: url (.. /images/package_spry_tab_bg2.png) ;}
#Accordion3. AccordionPanelTabHover,
#Accordion3. AccordionPanelOpen. {AccordionPanelTabHover}
Background: url (.. /images/package_spry_tab_bg2_RO.png) ;}
#Accordion4. {AccordionPanelTab}
height: 44px;
Width: 469px;
Background: url (.. /images/packages_spry2.png) ;}
#Accordion4. AccordionPanelTabHover,
#Accordion4. AccordionPanelOpen. {AccordionPanelTabHover}
Background: url (.. /images/packages_spry2_ro.png) ;}

Good guys.

I thought about it, if someone had the same problem as me and a look at this thread for the answer, here it is.

Firstly if you are wanting to separately style two or more Spry accordions that are not on the other example

Label 1

Insert content here

Label 1

Insert content here

Do not do this, as long as you have separate ID's for the div (which dreamweaver automatically anyway), you will be fine.

However if for some reason, you want to put one accordion inside another like I did for example

Label 1

Insert content here

Label 1

Insert content here

Too style accordion 1 and 2 so their tabs have different origins and Hover background when the content panel is open and closed you need to style it in CSS that they follow the path;

CSS

#Accordion1. {AccordionPanelTab}

height: 75px;

Width: 285px;

Background: url (.. /images/package_spry_tab_bg.png) ;}

#Accordion1. AccordionPanelTabHover,

#Accordion1. AccordionPanelOpen. {AccordionPanelTabHover}

height: 75px;

Width: 285px;

Background: url (.. /images/package_spry_tab_bg_RO.png) ;}

#Accordion2. {AccordionPanelTab}

height: 44px;

Width: 469px;

Background: url (.. /images/packages_spry.png) ;}

#Accordion2. AccordionPanelClosed. AccordionPanelTabHover,

#Accordion2. AccordionPanelOpen. {AccordionPanelTabHover}

height: 44px;

Width: 469px;

Background: url (.. /images/packages_spry_ro.png) ;}

Normally in styling two separate spry accordions, you can simply use the following code

#Accordion1. {AccordionPanelTab}

height: 75px;

Width: 285px;

Background: url (.. /images/package_spry_tab_bg.png) ;}

#Accordion1. AccordionPanelTabHover,

#Accordion1. AccordionPanelOpen. {AccordionPanelTabHover}

height: 75px;

Width: 285px;

Background: url (.. /images/package_spry_tab_bg_RO.png) ;}

The only difference with the style one Spry Accordion in another so that they have different horizons stationary when the content panel is open and closed ".» AccordionPanelClosed ".

Hope this has helped someone who had the same problem, I was.

Spry Accordion in Firefox content error

Hello, I'm new here and trying to solve this problem, looked in other threads and couldn t find the solution.
Spry Accordion works well in IE and Safari, not in FireFox (10.2.0). The content was not displayed.
I use Dreamweaver CS5.
Initially the content paint so I changed the fixed height to false:
< / div >
< script type = "text/javascript" >
acc1 var = new Spry.Widget.Accordion ("Accordion1", {useFixedPanelHeights: false, defaultPanel:-1});
< /script >
I also added a new "min-height" in the Spryaccordion.css:
min-height: 200px;
_height: 200px;
The web page is: http://www.gsekura.com/fianzas_tipos.html
Thank you.
Ana.

Add/Edit the following

. Accordion {}

overflow: hidden;

}

. {AccordionPanelContent}

overflow: auto;

margin: 0px;

padding: 0px;

height: 200px;

}

GRAMPS

Help put links on the spry accordion graphics

I have a sidebar with a spry accordion. Each content area has a picture inside. I want users to be able to click on the image (after the accordion is opened to her) and a link to another page. But I can't find anyway to attach a link to the image inside the accordion. Help, please!
Thank you.

But I can't find anyway to attach a link to the image inside the accordion. Help, please!

Click on in the tag in Code view, and add the link using the property inspector.

Dreamweaver cs4 funny acting spry accordion

, I've created a spry accordion and customize it to fit the section of page for our Web site. It works great except for one hitch with the last tab? I check the css and everything seems normal not so sure of the JS. I have no JS knowledge or experience. Here is the page: http://vireomarketing.com/social.html
Need help, does anyone have the same experience or a problem with this.
Thanks in advance for your help.

That's the problem

. AccordionPanelContent {margin-bottom: 25px; margin-top: 5px ;}}

Change the values to 0 (zero) and all is well.

To give the upper and lower part of the space, either insert

or give the paragraph a style rule.

GRAMPS

Question of SPRY accordion

Similar Questions

Courses (fall 2013)

Maybe you are looking for