Allow accordion panels to open in more directions.

...to be able to have accordion panels that open upward to push page content down and 'reveal' content that appears to exist above the main load page.
Or have panels also open to the left or right for stylistic choices.

Totally agree...
I am trying to use an accordian to add news stories chronologically... so the latest story has to be on top... currently clicking + at the bottom then dragging the new accordian element to the top... also I would like to facility to "dim" the other stories...
Some issues too in applying format universally... not sure that graphic styles is working right for me

Similar Messages

Accordion Panel Widget - open and close speed.

Hello,
Is there any way to change the speed that an Accordion Panel Widget opens and closes?
I would like it to be slower than it is now.
For my project it would be more relaxed and graceful.
Thanks,
Chris.

HI Chris
With Accordion we cannot setup the speed as of now , but you can try out composition widget where we can define transition, auto play speed.
Thanks,
Sanjit

Link to move to specific accordion panel AND open this panel.

hi
would like to create a list of links at the top of a page,
the accordion is at the bottom.
i would like to be able to click on a link, that will then
move to the appropriate accordion panel (have been able to do this
by adding ID's to each panel.) BUT i would also like the panel to
open as well. at the moment when you click on the link at the top
of the page, you move to the appropriate panel, but then have to
click on the panel to open.
any way to get both actions with the one link?
thanks!
example is here, list of links on the right, accordion at the
bottom.
http://batemansbayosteopathy.com.au/testsite/osteopathy.php

hi diana,
this is very close to what i require, and tried this route
last night. however the situation that i am in is that the links
are further away from the accordion. The code you linked functions
properly, as it opens the correct tabs, but the user does not see
the tab opening (as the accordion is much further down the page!)
what im after is a link that when clicked, opens the correct
tab (as the link you sent does) BUT ALSO moves the page to show the
accordion and the (now) open tab.
i linked to my example site in an earlier post.
hope this is explained clearly enough!
thanks!

Accordion panels open when website launches

All my accordion panels appear open for a second before my page completely loads. I have tried to find fixes in the forum but the only one that I have found is to use SpryAccordion.js - version 0.15 - Spry Pre-Release 1.6.1...I am already using this version and I am still having the issue. It appears to work fine with firefox but I have the issue in IE8. I am quit the novice with web design, any help anyone can give woyld be greatly appreciated.
Here in the link to my site http://www.fcps.edu/southcountyss/

There is a whole heap of stuff between rendering the markup for the accordion and creating an instance of the accordion.
To eliminate the pause between render and instance, move the accordion constructor to just below the table that holds the accordion as in
                
                Student Services (MS):
                703-446-1640<br />
                Student Services (MS):                703-446-1630<br />
                </p>
</div>
            </div>
          </div></td>
      </tr>
    </table>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
Don't forget to remove the constructor from the bottom of the document.
Gramps

Accordion Panels Open During Page Load

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

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

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]]

Anchor links to accordion panels not working properly across browsers

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

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

Accordion panels not operating

I am setting up a page with several spry tabs; each tab has
an accordion panel. On one tab, the accordion panel functions
properly. On the second one, the accordion panel appears open and
the panels don't slide closed. Any clues about where I might look
for the error in panel2? Thanks!

Without seeing your actualy page/markup (got url?), we can
only guess. Perhaps your accordion markup is malformed? The
accordion code expects a strict structure:
--== Kin ==--

Closed Accordion Panels problem

Once I set the Accordion Panels to all be closed at the
start,
the
layout of the page is stretched really long giving me a lot of
blank white space. (In FF, the Accordion stretches outside the size
of the background box) However, if I put the text that appears
above the Accordion in a panel and set it to be the
open
panel when the page is displayed, all works fine.
HELP????? I want text above the Accordion, then I want the
Accordion Panels to open at a fixed height. Is this do-able? If
not, is there a way to make the overall height of the page change
as the height of the panel changes so I don't have a bunch of empty
white space below the Accordion?

Nevermind.... seems to be working now. I moved the css that
was in the file to an outside file. The panel heights vary, but the
empty white space is gone. Good enough!

Opening Accordion Panels w/ MouseOver

I would like to customize an accordion widget so the panel contents open when I move my mouse over the panel tab. The default setting opens only with mouse click. How can I change this? Is it possible to add Dreamweaver behaviors to Spry widgets, or will I need to change the code directly? Thanks.

check this sample here:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#Programatic OpenAndClose
this has been specifically programmed to open and close using onclick, but i guess it would work the same for onmouseover

Is there a widget that allows multiple panels to be open at once

Thanks, Deb

Hi Deb,
You can probably place multiple accordion panels inside a content field of an accordian panel which will all be open by default, however the parent (containing accordion) panel will be closed by default.
You will be able to view content of all the child accordion panels when you open the parent one. However they will keep their state in case you close one or more of them.
Try it out if that helps your setup.
Cheers,
Vikas

Globally open and close all accordion panels

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

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

Using text links to open accordion panel

How do I use text links (from the page's main menu) to
programatically open a particular panel.
here is the page:
http://debrankin.com/tee/SITEDESIGN/
for example: I want to click on "Resumes and Cover Letters"
in the left hand menu to open the first accordion panel (by the
same name). I have this set this page so that all panels are closed
initially.
i know i'm missing something because this obviously does not
work: i've looked for documentation and this issue is inadequately
addressed!

twinflame wrote:
> i know i'm missing something because this obviously does
not work: i've looked
> for documentation and this issue is inadequately
addressed!
Not really. The problem is that you have attempted to create
a
JavaScript object called accordion1 before the accordion HTML
is even
loaded into the browser. Moreover, the script that
initializes the
accordion is already in your HTML where it should be (after
the
accordion), but it uses Accordion1, not accordion1
(JavaScript is
case-sensitive.
Remove this after your menu.
> <script type="text/javascript">
> var accordion1 = new
Spry.Widget.Accordion("Accordion1");
> </script>
Change the links in the menu to Accordion1.openPanel(0),
etc., and it
should work.
David Powers
Adobe Community Expert, Dreamweaver
http://foundationphp.com

Spry accordion panel won't open by default

Here is my code for spry accordion, I am trying to open the 1st inside accordion panel by default, i f not by default, as soon as its parent is opened, but none of them seems to work. Please let me know where I am going wrong.
<div class="Accordion" id="mainAccordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab"> <a id="healthCheckAccordion" onClick=""><img align="left" src="/csm/view/include/images/healthicon.gif">Health Check</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"> <a id="configurationAccordion" onClick="sysAcc.openFirstPanel()"><img align="left" src="/csm/view/include/images/conficon.gif">Configuration</a></div>
<div class="AccordionPanelContent">
<div class="Accordion" id="main2ndAccordion" tabindex="1">
<div class="AccordionPanel">
<div class="AccordionPanelTab">    <a id="systemAccordion" style="color:#ffffff;background-color: #2F5882;">System</a></div>
<div class="AccordionPanelContent">
<a id="kernelParamsAccordion">Kernel Parameters</a><br/>
<a id="diskUsageAccordion">Disk Usage</a><br/>
<a id="fileSystemAccordion">File System Statistics</a><br/>
<a id="osPatchesAccordion">Os Patches</a><br/>
<a id="networkAccordion">Network</a><br/>
<a id="userLimitAccordion">User Limit</a><br/>
<a id="environmentVariablesAccordion">Environment Variables</a><br/>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">    <a id="productName" style="color:#ffffff;background-color: #2F5882;"></a></div>
<div class="AccordionPanelContent">
<a id="odbcAccordion">ODBC</a><br/>
<a id="bitmodeAccordion">Bitmode</a><br/>
<a id="versionAccordion">Version</a><br/>
<a id="licenseInformationAccordion">License Information</a><br/>
<a id="dumpshrAccordion">Dumpshr</a><br/>
<a id="dblistAccordion">DBList</a><br/>
<a id="showtimeAccordion">Showtime</a><br/>
<a id="serverStatusAccordion">Server Status</a><br/>
</div>
</div>
<script type="text/javascript">
var sysAcc = new Spry.Widget.Accordion("main2ndAccordion", {defaultPanel: 0, useFixedPanelHeights: false });
</script>
</div>
</div>
</div>
<script type="text/javascript">
var mainAcc = new Spry.Widget.Accordion("mainAccordion",{ defaultPanel: -1, useFixedPanelHeights: false });
</script>
</div>
Also the System panel, with id="systemAccordion" takes 2 clicks to open, every 1st time the page loads

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
<style>
#Accordion2 .AccordionPanelTab {
     background-color: #CCCCCC;
     color: #FFFFFF;
</style>
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><img src="/csm/view/include/images/healthicon.gif">Health Check</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><img src="/csm/view/include/images/conficon.gif">Configuration</div>
    <div class="AccordionPanelContent">
         <div id="Accordion2" class="Accordion" tabindex="0">
           <div class="AccordionPanel">
             <div class="AccordionPanelTab">System</div>
             <div class="AccordionPanelContent">
            <a href="#" id="kernelParamsAccordion">Kernel Parameters</a><br/>
            <a href="#" id="diskUsageAccordion">Disk Usage</a><br/>
            <a href="#" id="fileSystemAccordion">File System Statistics</a><br/>
            <a href="#" id="osPatchesAccordion">Os Patches</a><br/>
            <a href="#" id="networkAccordion">Network</a><br/>
            <a href="#" id="userLimitAccordion">User Limit</a><br/>
            <a href="#" id="environmentVariablesAccordion">Environment Variables</a><br/>
          </div>
         </div>
           <div class="AccordionPanel">
             <div class="AccordionPanelTab">Product</div>
             <div class="AccordionPanelContent">
            <a href="#" id="odbcAccordion">ODBC</a><br/>
            <a href="#" id="bitmodeAccordion">Bitmode</a><br/>
            <a href="#" id="versionAccordion">Version</a><br/>
            <a href="#" id="licenseInformationAccordion">License Information</a><br/>
            <a href="#" id="dumpshrAccordion">Dumpshr</a><br/>
            <a href="#" id="dblistAccordion">DBList</a><br/>
            <a href="#" id="showtimeAccordion">Showtime</a><br/>
            <a href="#" id="serverStatusAccordion">Server Status</a><br/>
          </div>
         </div>
       </div>
    </div>
</div>
</div>
<script src="SpryAssets/SpryAccordion.js" ></script>
<script>
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: 1, useFixedPanelHeights:false});
var Accordion2 = new Spry.Widget.Accordion("Accordion2", {defaultPanel: 0, useFixedPanelHeights:false});
</script>
</body>
</html>
Gramps

Prevent lower text from moving when accordion panels open

I tried out the Accordion Panel from Project Seven which is
really nice and works well. My only issue right now is that I would
like to prevent the rest of the text outside and below this widget
within the same column from moving. When any panel opens it causes
the contents of the entire column to shift down thus causing the
page to shift down as well.
I have tried using a new div for the content below the panels
and also a new table below but can't seem to figure out how to keep
the content from shifting. Curently I have a table cell nested and
have tried with CSS to keep it from moving but that is not working
either.
Thanks in advance for any help with this.
Here is the code for the column in question:

no takers on this one? Does anyone know how I could fix this
with divs? Is it possible to put this accordion into a separate div
and create another below it that would not move? Like on the new
apple site...They have some really awesome accordion style navs on
the sides that do not throw the rest of the page off when they open
or close.
Thanks.

Allow accordion panels to open in more directions.

Similar Messages

Maybe you are looking for