Spry Accordion- all panels closed by default
1) Can I have an accordion so that none of the panels are open by default?
2) Changing the height of the panels: Can it be set determined by the amount of content inb a panel? I have 5 panels, and each is populated with data from a database. some may need much more room than others.
Thx,
You can add it immediately after the Accordion if you want to - but then you end up with scripts scattered throughout your page(s).
Most of the time I see it added to the bottom of the page. I also do this as I've had several SPRY Elements doing stuff at one time and you can simply combine them into a single list.
Add adri_grace's Code in a Script Tag to the same page that the Accordion is located on.
At the very bottom - just before the Closing for the BODY and HTML Tags.
So you end up with something like:
<script>
var Accordion1 = new Spry.Widget.Accordion("Accordion1",.....
.....{ useFixedPanelHeights: false, defaultPanel: -1 });
var Accordion2 = new Spry.Widget.Accordion("Accordion2",.....
.....{ useFixedPanelHeights: true, defaultPanel: 3 });
var Accordion3 = new Spry.Widget.Accordion("Accordion3",.....
.....{useFixedPanelHeights:false, enableAnimation:false});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1",.....
.....{defaultTab:7});
</script>
</body>
</html>
Go here:
http://labs.adobe.com/technologies/spry/samples/
Click on the Widgets Tab.
*the dots for each example above are for continuity in the word-wrap - don't include in code.
Similar Messages
-
Accordion all panels closed and SpryURLUtils
http://www.adelantedesign.co.uk/websites/adelante/Packaging/Packaging_Samples01.asp?panel= 0#Accordion1
The above does not open panel 0, change it to panel=1 or
panel=2 etc opens fine.
I am using this to keep all panel closed:
var Accordion1 = new Spry.Widget.Accordion("Accordion1",
{useFixedPanelHeights: false, defaultPanel:(params.panel ?
params.panel : -1)});
I've read a few posts but not seen a solution. Any ideas.
RichCan I use this same method to jump to another pages'
Collapsible panel, versus accordian panels, or tabbed panels ( i
asssume I can use the following, added on the first collapsible
panel contructor on the target page (or do I have to add it to all
my contructors including creating a default params for the html
panels, also existing on the same page as the collapsible panels):
var cp1 = new
Spry.Widget.CollapsiblePanel("cp1",{contentIsOpen:false,
CollapsiblePanel: params.Panel !=undefined ? params.Panel : -1});?
I want to jump to other pages' Collapsible panels' and then load
specifc HTML fragments in the SpryHTMLpanel, existing inside the
targeted collapsible panel. The link is coming from another pages,
SpryHTMLPanel, from inside a collapsible Panel. I have added the
appropriate <script> src and initalized the var params in the
head on the target page. -
Accordion Spry default all panels closed
How do I setup the Accordion Spry to have all panels closed
when my page initially loads? I don't want any of the panels to be
set as the default opened panel and for the browser to select the
panel they want open first.I have installed Spry 1.6.1.
Here is my code:
var Accordion1 = new Spry.Widget.Accordion("Accordion1",{
defaultpanel: -1 });
Still opens the first panel upon loading my page with the
Accordion spry. There must be something else to be
configured? -
Spry Accordion Widget Init Closed, Without Snap?
(This is a topic discussed in
another
thread, but I didn't want to hijack the thread with my own
question, so I started a new one...)
I want to start my Accordion widget in a closed state. I
figured out the trick of setting the default panel to '-1' and
turning fixed heights by altering the code in the footer of the
page to:
var Accordion1 = new Spry.Widget.Accordion("Accordion1",
{defaultPanel: -1,
useFixedPanelHeights: false});
When you do this, however, the page loads with the first
accordion panel open and visible for a split second until the page
is loaded, at which point the widget snaps the panel shut. This is
very ugly and undesirable, especially given that this accordion is
on a page element common to every page on the site.
I've tried setting an initial class that is hidden, however
the Spry Accordion widget is written in such a way that it
preserves whatever classes you have rather than replacing them.
Does anyone know a way to load the page with the accordion
panels shut without this initial flash of the first panel snapping
shut?
Thanks,
SteveHey Al,
Nice plug for your own application! Here is another one,
since I am one of your happy customers.
I used the Spry widgets in the new DW CS3 and spent a couple
of days trying to tweak things to get them to work the way I
wanted. After getting input from my brother (his site that I am
working on) he really wanted some more style than what I was coming
up with using the basic DW widget. I smacked my dollar on the
barrel head and tried out PVII Accordion instead.
I can't tell you how fast and easy it was to insert and
customize this plugin. Not to mention they had some nice little
themed styles, one of which (the cobalt blue) was a real close
match to the color scheme I originally was using! (PS - any chance
of getting more theme styles down the road for this plugin or
matching styles for the other ones???)
Changing the open or closed state of the panels - it was so
simple!!! I simply went into the modify option and chose the number
that corresponded to my different panels in the menu list. My buddy
used an expression about DW CS3 that fits nicely with using tools
like PVII Accordion Magic. You can use a screwdriver with some
precision and a lot of hand strength to build what you want but it
will take you alot of time...or you can plugin a power drill and be
done with it!
To see it in action on my current work in progress go to:
http://www.dvdflashbacks.com/williamsburghealth/index.php
As for sstringer's original question - how to do this in DW's
Spry widget...
I think you are onto the right track with the -1 setting. If
I am not mistaken though, Spry uses 0 for the first panel, so I
think you would need to use an option like {defaultTab: 1} to open
the 2nd panel and so on.
PS - Just so everyone knows - I am not a sales person for
PVII - just a very satisfied customer! -
Spry Accordion Different Panel Heights
I'm building a Spry Accordion Widget as a left nav menu with
25 different panels. Some of my panels contain 10 different links
and others contain only 1 single link. Therefore I would like to
adjust the height of each panel individually according to the
number of links they contain, so I don't end up with huge white
spaces in panels that contain fewer links. My initial idea, in
addition to the .AccordionPanelContent class was to add an "id" to
each panel and control each panels height through CSS. But for some
reason I haven't been successful that way. It looks like all panels
tend to take the height of the first panel, regardless of their
individual set heights. I wonder if I can resolve my problem
uniquely with CSS, or I do I have to go and change something in the
SpryAccordion.js file.
Thanks.Hi Donald, I inserted <script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", {
useFixedPanelHeights: false });
</script> into my code. It's almost there, but not
quite. I can see that it is trying to re-ajust the panels' height,
but for panels that have a larger content it tends to show the
whole panel's content and then hides the half of it. Also for
panels with fewer content it doesn't seem to have an effect at all.
I don't know if I have to fix something in the CSS or place the
Acc1 ID in a different location within my accordion HTML code.
Thank you.
Here's the URL I'm working on if you want to take a look.
http://64.49.218.100/product_p/00-120-0ll.htm -
Spry Accordion letztes Panel speichern
Hi,
ich habe auf der Seite www.hittfeld-sharks.de das Spry Accordion verwendet.
Wenn man sich dort allerdings links durch die Mannschaften klickt ist es ziemlich nervig, dass sich immer wieder das defaultPanel öffnet. Kann man das umstellen, dass sich "beim ersten Öffnen" das default Panel öffnet, aber dann immer das, welches als letztes offen war ?
GreetsPHP, being a serverside code, will refresh the page each time there is a request made to the server. JavaScript (and Spry), being a client side code, does not have to send requests to the server and therefore allows you to change the data without a page refresh.
Having said that, you need to have a Spry dataset in your Accordion panel.
By following these steps, you will be well on your way to achieving what you want.
Retrieve your data using PHP and place it in an HTML-table or similar outside of the Accordion panel
Create a SpryHTMLDataSet based on the HTML-table
Use the data from the Spry dataset to create a master/detail region in your Accordion panel
Just a few questions before I go into details.
Have you set up a connection to a database, thus be able to retrieve the data?
Why do you need an Accordion panel to show your data?
Have you got an online URL so that we can follow your code? Otherwise please include your code in your post.
Please come back here with your answers and we shall try to help you on your way
Ben -
How to make Spry Accordion Content Panel with a variable content fit
I have a problem. The content panel has a fixed length so I changed it to auto so I can view all the content of each panel. The problem is that the content panel takes the dimensions of the longest content and applies that to ALL the panels. So as you click from one to the other, some are practically empty with all the space, while others seem full.
The question is, is there a way to vary the size of the content panel so on one that has not a lot of content stays to that size. This is the way I have the CSS for that. How can I achieve the variable heights?
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 5px 4px 6px 15px;
height: auto;
background: url(../images/backgrcolor0033.png);
color: #FFF;
Thank you.<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false });</script>
</body>
</html>
Gramps -
Hello,
is there a way, that if I have a page without the accordion, and I click on that page a link, that link goes to the accordion panel page, and when it goes, specifically opens one of the pannels.
THank youYes. But you need the SpryURLUtils.js files. And you won't find them on Adobe Labs anymore because Adobe abandoned Spry last year. The files have been moved to GitHub.
Tutorial:
http://foundationphp.com/tutorials/spry_url_utils.php
Spry Files:
Adobe GitHub account
Nancy O. -
Spry Accordion Navigation Panel Behavior in Dreamweaver eLearning Template
I am trying to create an eLearning course using the "SoftSkills" eLearning Template provided by Dreamweaver. I have created several extra div tags to set up extra titles on the tabbed accordion, however, regardless of how I set the variable "AccOpenPanel" here:
<!-- TemplateParam name="accOpenPanel" type="number" value="0" -->
all of the panels are displaying as open. I would like to have panel 2 open and all others closer. I'm sure there's a simple fix for this, but I can't find it. Actually I can't find any help for using this template, which I'm sure exists. Any suggestions? Below is a sample of my accordion code:
<div id="sidebar">
<h1>Table of Contents</h1>
<div class="contentArea">
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Welcome</div>
<div class="AccordionPanelContent">
<ul>
<!-- Add the .current class to the <a> tag for the current page -->
<li><a href="../index.html">Introduction</a></li>
<li><a href="../organization.html">Organization</a></li>
</ul>
</div>
</div>
<div id="Accordion2" class="Accordion" tabindex="1">
<div class="AccordionPanel">
<div class="AccordionPanelTab">4</div>
<div class="AccordionPanelContent">
<ul>
<li><a href="../s1_001.html" class="current">Process Presentation</a></li>
<li><a href="../s1_002.html">Scenario 1</a></li>
<li><a href="../s1_003.html">Additional Information</a></li>
<li><a href="../s1_004.html">Scenario 2</a></li>
<li><a href="../s1_005.html">Self-check</a></li>
</ul>
</div>
</div>
</div>
<div id="Accordion3" class="Accordion" tabindex="2">
<div class="AccordionPanel">
<div class="AccordionPanelTab">2</div>
<div class="AccordionPanelContent">
<ul>
<li><a href="../s2_001.html">Introduction</a></li>
<li><a href="../s2_002.html">Real Life Video</a></li>
<li><a href="../s2_003.html">Key Points</a></li>
<li><a href="../s2_004.html">Interactive Presentation</a></li>
<li><a href="../s2_005.html">Self-check</a></li>
</ul>
</div>
</div>
</div>
<div id="Accordion4" class="Accordion" tabindex="3">
<div class="AccordionPanel">
<div class="AccordionPanelTab">3</div>
<div class="AccordionPanelContent">
<ul>
<li><a href="../s3_001.html">Introduction</a></li>
<li><a href="../s3_002.html">Real Life Video</a></li>
<li><a href="../s3_003.html">Key Points</a></li>
<li><a href="../s3_004.html">Interactive Presentation</a></li>
<li><a href="../s3_005.html">Self-check</a></li>
</ul>
</div>
</div>
</div>
<div id="Accordion5" class="Accordion" tabindex="4">
<div class="AccordionPanel">
<div class="AccordionPanelTab">4</div>
<div class="AccordionPanelContent">
<ul>
<li><a href="../s4_001.html">Introduction</a></li>
<li><a href="../s4_002.html">Real Life Video</a></li>
<li><a href="../s4_003.html">Key Points</a></li>
<li><a href="../s4_004.html">Interactive Presentation</a></li>
<li><a href="../s4_005.html">Self-check</a></li>
</ul>
</div>
</div>
</div>The code that you have shown is not the problem, despite my wondering why you have created a new accordion for each panel. Also you have not shown the links to the support files (JS and CSS) nor have you shown the constructor for each of the accordions, but I assume that you have attended to these matters and did not think it worthwhile to show the code.
Personally, I would have created one accordion with four panels, but this is a matter of choice.
Gramps -
Spry Accordion Panel Default State All Closed?
Is it possible to set a group of Spry accordion panels so
that all are closed by default?Steven_K wrote:
> Is it possible to set a group of Spry accordion panels
so that all are closed by default?
Yes, a Google search for "Spry accordion all closed" brings
up this as
the first result:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/ -
How to make no panels on Spry accordion open by default?
I have a Spry Accordion with several panels. I want the default behavior for none of the panels to be opened until one is clicked. Currently the default behavior is for the first panel to be automatically expanded when the page is first visited. How do I correct this?
It's here:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
Under the sub heading "starting with all panels closed".
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 });
</script>
Martin -
Spry panel - the first panel opens by default on entering the site
The first panel is open on default, I can close it, and access the others, but whenever i go there for the first time, its open. I want vistors to see the front page with all three panels closed. http://www.diocesanministriesfund.org
Also, not a big deal, but when you close one of the panels and return to the index page, it seems like the whole page gets stuck for a second and then renders.
Any help is appreciated, as always, MaryHi Mary
In this line near the bottom of your document you have
var SpryAccordion1 = new Spry.Widget.Accordion("SpryAccordion1", {useFixedPanelHeights:false, defaultPanel:0});
This is where you have told the accordion to open the first panel. If you want all panel closed then make the default panel a non-existing panel as in
var SpryAccordion1 = new Spry.Widget.Accordion("SpryAccordion1", {useFixedPanelHeights:false, defaultPanel:-1});
Gramps -
I am putting in an accordion and want all panels to start as closed. All the info I can find is about setting the default open panel. I don't want a default open panel; I want all panels closed to start. Can this be done?
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#AllPanelsCl osed
-
First time using Spry. Anyone know why my accordion panels
wont close after a second click. Below is the html. I used the
Starting with All Panels Closed code.
<!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>
<style type="text/css">
<!--
.style12 {
color: #FFFFFF;
font-size: 12px;
padding-left: 35px;
font-family: Arial, Helvetica, sans-serif;
padding-right: 30px;
font-weight: normal;
text-transform: none;
.style13 { font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: normal;
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFFFFF;
background-position: 0px;
padding-top: 10px;
body {
background-color: #999999;
a:link {
color: #FFFFFF;
text-decoration: none;
a:visited {
text-decoration: none;
a:hover {
text-decoration: none;
color: #999999;
a:active {
text-decoration: none;
-->
</style>
<script src="SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<table width="1023" height="951" border="0"
align="center" background="bg/Picture 2.jpg">
<tr>
<th colspan="5" rowspan="2"
scope="col"> </th>
<th width="61" height="70"
scope="col"> </th>
<th colspan="3" scope="col"> </th>
</tr>
<tr>
<th width="61" height="28" class="style13"
scope="col">ENGLISH</th>
<th width="1" scope="col"> </th>
<th width="62" scope="col"><span
class="style13">SPANISH</span></th>
<th width="11" scope="col"> </th>
</tr>
<tr>
<th height="32" colspan="5"
scope="col"> </th>
<th width="61" scope="col"> </th>
<th colspan="3" scope="col"> </th>
</tr>
<tr>
<td height="46" colspan="9"><div align="left"
class="style12">
<div align="left">This site has been created to
download 2009 Honda Pilot files in high / low resolution. If you
need any further assistance, please contact your Honda
representative.</div>
</div></td>
</tr>
<tr>
<td width="200" height="23"> </td>
<td width="189"> </td>
<td width="201"> </td>
<td width="193"> </td>
<td colspan="5"> </td>
</tr>
<tr>
<td height="133" nowrap="nowrap"><div
id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">
<div align="right"><strong>AD
CAMPAIGN</strong></div>
</div>
<div class="AccordionPanelContent">
<ul>
<li>Color</li>
<li>Black & White</li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">
<div
align="right"><strong>FLYERS</strong></div>
</div>
<div class="AccordionPanelContent">
<ul>
<li>HI-Res</li>
<li>Low-Res</li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">
<div
align="right"><strong>BANNERS</strong></div>
</div>
<div class="AccordionPanelContent">
<ul>
<li>Night Version
<ul>
<li>Hi-Res</li>
<li>Low-Res</li>
</ul>
</li>
<li>Day Version
<ul>
<li>HI-Res</li>
<li>Low-Res</li>
</ul>
</li>
</ul>
</div>
</div>
</div></td>
<td width="189" rowspan="2"> </td>
<td rowspan="2"> </td>
<td width="193" rowspan="2"> </td>
<td colspan="5" rowspan="2"> </td>
</tr>
<tr>
<td nowrap="nowrap"> </td>
</tr>
<tr>
<td nowrap="nowrap"> </td>
<td width="189"> </td>
<td> </td>
<td width="193"> </td>
<td colspan="5"> </td>
</tr>
<tr>
<td nowrap="nowrap"> </td>
<td width="189"> </td>
<td> </td>
<td width="193"> </td>
<td colspan="5"> </td>
</tr>
</table>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {
useFixedPanelHeights: false, defaultPanel: -1 });
//-->
</script>
</body>
</html>You need to update to the latest version of SpryAccordion.js.
You can find it here:
http://labs.adobe.com/technologies/spry/widgets/accordion/SpryAccordion.js
If you are a Dreamweaver user, use the Spry 1.6.1 Updater
which you can get from here:
http://labs.adobe.com/technologies/spry/home.html
--== Kin ==-- -
How can you get the spry accordion to open and close on a
mouse click? Also, we do not want the first tab to be opened. We
would like the user to click on the tab first then it should
open.shawnBerger wrote:
> How can you get the spry accordion to open and close on
a mouse click? Also, we do not want the first tab to be opened. We
would like the user to click on the tab first then it should open.
You can set which panel to open in the code that creates the
Accordion panel:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
If you do not want any panel to be opened when the page
loads, take a look at the "Starting with All Panels Closed" sample.
If you want a panel to open and close with a click, rather
than having to click on another panel in the accordion, then take a
look at the "Programatically Opening and Closing Panels" sample.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert
Maybe you are looking for
-
ITunes bought on iPhone won't show up in iTunes Library on laptop
if I buy a song from iTunes while on my phone, shouldn't it be in my iTunes library after I sync? I have a total of 53 songs on my phone, but only want 41 of them, but iTunes on my laptop is showing that I have only purchased 23 songs. none of the mu
-
Firefox is not responding at all. Would like to delete it and reinstall, however when trying to uninstall a message appears that I first have to close firefox! In short: cannot delete firefox, cannot reinstall, cannot use it. Operating system Windows
-
Why won't it (simple dataset) work!
I'm trying to use spry to open a simple xml file. But all I get are the table headings. This is the xml: <xml version="1.0" encoding="UTF-8"> <dtable name='table1'> <datum> <name>Robby</name> </datum> <datum> <name>Bob</name> </datum> </dtable> </xml
-
hi, can we use bdc in WDA? if yes please tell me how to do?
-
Screen Pixelation after Mountain Lion upgrade
I upgraded to Mountain Lion on my Mac Pro recently. For the first week or so it worked great, but a few days ago I woke the computer from screen saver and the screen was covered with these random pixels all over. Here is a link to a screen shot I t