Hide Accordion Panels whilst loading

Hi All,
The default behaviour of the Accordion is to show all panels
as open
until the script kicks in and hides them (if defaultPanel:
-1) or just
shows one, which ever is set as default.
In my test:
http://www.ac-et.com/bargains/request.asp
I have enabled the
page to use a link to open specific panels (thanks to David
Powers'
website) but I have also set display: none on the
panelcontent via css,
so the panels really don't display when loading.
My concern is accessibility. With JS turned off, the panels
won't show,
as they are hidden via css. But without this, all 4 panels
show when the
page is loading, something I am trying to avoid.
Is there another technique I can use to hide the content, but
still be
shown to those with JS turned off?
Dooza
Posting Guidelines
http://www.adobe.com/support/forums/guidelines.html
How To Ask Smart Questions
http://www.catb.org/esr/faqs/smart-questions.html

.V1 wrote:
> A small "hack" that I always use is:
>
> document.getElementsByTagName('html')[0].className =
'js';
>
> in one of my scripts that are loaded in the <head>
section. This will add the
> class js to the <html> tag. So you can target
elements depending on javascript
> enabled.
>
> for example javascript enabled would be:
> .js .AccordionPanelContent {display:none;}
Perfect, just what I needed, very clever!
> Anyways why don't you just place your constructor right
under your accordion
> so it will get rendered when the accordion has been
parsed by the browser.
I am using the unobtrusive method, and when I did as you
suggested it
made no difference. Your "hack" works just fine.
Now, back to getting my effect shrink effect to work :)
Dooza
Posting Guidelines
http://www.adobe.com/support/forums/guidelines.html
How To Ask Smart Questions
http://www.catb.org/esr/faqs/smart-questions.html

Similar Messages

Opened accordion panels in load

I've got 5 panels with links inside the panel content; on
initially loading the page, all panels appear opened for a second
ot two, then collapse, leaving panel 0 open.
Revisiting the page, they appear collapsed withe panel 0
open.
How can I make sure they are collapsed when the page
initially loads?
Frustrated, to say the least.

Its probably the coding of your page that is messed up.
Place the <script> element containing your constructor
right under your accordion. and se the defaultpanel to -1

All accordion panels closed on page load?

The default behaviour for a set of accordion panels is for
the first one to open automatically when the page firsts loads.
Is there a way to stop this happening and have them all
closed by default?
regards,
Adrian

Found the solution:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#AllPanelsCl osed

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)

How do I Hide open accordion panels, tooltips, etc. in Design view in Muse

I am adding tooltips and accordion panels in Muse. The problem is that, when I am editting the site in Design view, I cannot get the tooltips and panels to close... and so any other objects, text, etc is hidden by the open tooltip / accordion panel... I worked around this somewhat by creating another element in the accordion panel that contains no text, and so shrinks the whole accordion when that element is active, but this is cumberson, and I can find no comparable work-around for tooltips...

AppleScripts can be saved as run-only, which will keep a casual user from seeing the code, but there isn't a way to keep plain text from being seen. You should never place sensitive information in plain text in your script/application, or even use them with global variables, since those are also saved with the script.
The security shell utility can be used to get a password from the system keychain, for example:
getKeychainPass("Apple") -- example
on getKeychainPass(itemName)
return text 2 thru -2 of (do shell script "security 2>&1 >/dev/null find-generic-password -gl " & quoted form of itemName & " | awk '{print $2}'")
end getKeychainPass

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

.js update of spry accordion panel tab data for countdown functionality

Hi,
First off I must say I really love the work done on CS3 and
the Spry Framework - loads of examples and nicely implemented!
Questions in a nutshell:
Can I change spry generated data on the fly so I can run a
.js counter function to dynamically update accordion panel data?
What event do I look for to fire a .js init function to see my new
spry widget (onPostLoad isn't working for me, but I'm a newbie!)?
* spry accordion
* {expire} dataset data is SQL DATETIME
* js countdown function CD_Init() searches DOM for specific
element IDs 'countdownN' and uses innerHTML to update counter at
specific interval
* observer onPostLoad seems to be calling CD_Init before
accordion DOM is loaded.
Verbose questions:
I am trying to tweek the output of a Spry Acoordion and
wanted to add a third party js counter to my accordion panel tab
and am having a bit of difficulty. The js code uses an innerHTML
statement to keep the counter going and supports multiple counters
(which I need to use one counter per tab). I build the multiple
counter id from the ds_RowID field which is where the parent div
element where the js changes the innerHTML. Can I do this? The .js
searches for elements w/ an ID of "countdownN", N = instance # and
a date format of '2007-09-08 00:00:00 GMT+00:00' and updates the
div's text with the countdown time. My {expire} record below is an
SQL DATETIME which is the correct format for this countdown.js
function (with the GMT-05:00 appended).
The relavant code is:
<div id="specialDisplay" spry:region="dsSpecials">
<h3>Click on a special below from our <em>LIVE
FEED</em> to see all the up-to-the-moment
exciting packages available!</h3>
<div id="AccordionSpecials" class="Accordion">
<div class="AccordionPanel" spry:repeat="dsSpecials">
<div class="AccordionPanelTab"
onclick="dsSpecials.setCurrentRowNumber('{dsSpecials::ds_RowID}')"
spry:hover="AccordionPanelLabelHover"><?php echo '<div
id="countdown' .'{ds_RowID}'. '">';?>{expire}
GMT-05:00</div>{dsSpecials::name}</div> 
<div class="AccordionPanelContent">
<div spry:state="loading"><img
src="./i/ajax-loader.gif"/></div> 
<div spry:state="error"><span spry:content="Error
loading data..."></span></div> 
<div id="details" spry:state="ready"
spry:content="{detail}"></div> 
</div> 
</div> 
<script type="text/javascript">

</script>
</div> 
</div> 
I got the nice countdown.js script from
http://andrewu.co.uk/clj/countdown/
which allows N # of counters/page. I have updated this code to
start checking for a zero based index that I generate utilizing the
spry ds_RowID.
I have added an observer to run the countdown's
initialization function (to hopefully find all the "countdownN"
element instances) under my dataset declarations:
var observer = { onPostUpdate: function(notifier, data) {
CD_Init() ; } };
Spry.Data.Region.addObserver("AccordionSpecials", observer);
Also tried to add the observer to a div surrounding the
according w/ the "spry:region" specified.
But, alas, I see the correct expire instance in my tab, but
it looks like the counter is only firing before the actual data is
loaded (i.e. I used FF's webdeveloper and set a break on the
CD_Init function and it's breaking before the actual accordion is
there - I see the dataset placeholders in my window for the
accordion. When I continue, the accordion is generated, but my
countdown isn't working because it looks to be firing before the
DOM is updated w/ the accordion elements.
Sorry for the long speil; I'm really a .js neophyte and just
starting w/ spry - so I'm not even sure if I can/should change the
HTML generated from spry. If not, is there anyway that I can have a
countdown timer for each accordion's tab panel's associated
{expire} data field? Any ideas and suggestions are greatly
appreciated!!
Thank you also for this forum - some great gems for
development here!

Sorry - the previous post is way too long.
Is it possible to tie in a javascript update function (a
counter update) to an element generated by a spry widget (a dataset
value that generates spry accordion tab text) so that the accordion
tab gets updated by the javascript function running under a
setinterval?
I've tried firing the javascript init function with an
observer on the accordion's onPostUpdate event, but it's getting
fired before the spry data is loaded. Is this something that's
possible? Sorry for my lack of javascript expertise! Relying on the
real experts here!
Thanks for any advice/pointers.

Need to hide Accordion Widget Content until after pageload

Hi,
I was wondering if anyone had any experience in hiding the
content of the accordion widget panels until after the page loads.
I am fairly new to these libraries so I am fairly inexperienced on
how to go about a fix for this sort of issue. I have the widget
working fine, the only problem that I am having with the accordion
widget is that I do not like the way the accordion widget gets
loaded to the browser while the screen is loading, it looks clunky
and unprofessional.
Would anyone have any good ideas on how I go about correcting
this issue? Any help or suggestion is much appreciated.
Thanks
DB

Have you tried the examples shown at the "Hiding Data
References" page:
http://labs.adobe.com/technologies/spry/samples/data_region/HideDataReferencesSample.html
The .SpryHiddenRegion method seems to work for my
accordion.

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

Scrolling within Accordion panel

Hi, I have an Accordion panel with a lot of text within one of the panels. The panel is pinned and the text flows below the browser baseline when opened on smaller screen sizes. Would be great to have a mini scroll bar included as an option in future to get around this problem. Thanks!

Hi kundalani,
If you are using Spry.Utils.updateContent() to load the
contents of the panel, you can pass in a callback that sets the
height of the AccordionPanelContent to "auto" after the new content
has loaded:
function LoadContent(ele, url)
ele = Spry.$(ele);
Spry.Utils.updateContent(ele, url, function() {
ele.style.height = "auto"; });
<a href="#" onclick="LoadContent('e1p2',
'../../data/frag1.html'); return false;">Frag 1</a> |
<a href="#" onclick="LoadContent('e1p2',
'../../data/frag2.html'); return false;">Frag
2</a></p>
<p> </p>
<div id="example1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Panel 1
</div>
<div id="e1p1" class="AccordionPanelContent">
<p>Panel 1</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Panel 2
</div>
<div id="e1p2" class="AccordionPanelContent">
<p>Panel 2</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Panel 3
</div>
<div id="e1p3" class="AccordionPanelContent">
<p>Panel 3</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Panel 4
</div>
<div id="e1p4" class="AccordionPanelContent">
<p>Panel 4</p>
</div>
</div>
</div>
<script type="text/javascript">
var example1 = new Spry.Widget.Accordion("example1", {
useFixedPanelHeights: false });
</script>
--== Kin ==--

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

Help tweaking Spry accordion panel code!

Hello all,
I'm currently working on an information portal for a client and am having trouble with creating code to open a specific accordion panel on another html page without messing up the code so that the accordion panels have adjustable heights based on content.
The website has an Interactive Map page, which has some tooltips that have links to the Nurseries page. The Nurseries page has accordion panels with nursery entries ordered by province; anchor links were added to nursery entries that are linked to the Map page. In theory, when a user clicks on a "Click here for information" link on the Map page, the Nurseries page will load and automatically open the exact panel where the entry is housed with the exact entry showing at the top of the browser window. So I tested it out and it works exactly as I want it to, HOWEVER, the adjustable height feature that I added to the accordion panels on the Nurseries page now no longer works (now there are scrollbars on the right if the height exceeds the default height), AND all the panels by default are open instead of closed!
Here is the pertinent code that I am using on the NURSERIES page:
<script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></ script>
<link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="SpryAssets/SpryURLUtils.js"></ script>
<script type="text/javascript"> var params = Spry.Utils.getLocationParamsAsObject(); </script>
<script type="text/javascript"> var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: params.panel ? params.panel: 0 });
</script>
This is the code I added to one of the tooltips on the MAP page:
<a href="nurseries.html?panel=9#mangatarem" title="Go to native species nursery listing" target="_blank">
What do I need to do in order for this to work? I tried reordering the code to read { defaultPanel: params.panel ? params.panel:
0, useFixedPanelHeights: false } and even tried combining the two { useFixedPanelHeights: params.panel ? true: false } but nothing worked. Any suggestions?
Many thanks in advance for your assistance!!
Joy

Hi Joy,
Without going to a lot of trouble in writing an onload event, the following method is feasable
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" />
<style>
.region {
    color: #090;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 2em;
</style>
<script src="SpryAssets/SpryAccordion.js"></script>
<script src="SpryAssets/SpryURLUtils.js"></script>
<script> var params = Spry.Utils.getLocationParamsAsObject(); </script>
</head>
<body>
<div id="acc" class="Accordion" tabindex="0">
<span class="region">Luzon</span>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1.1</div>
    <div class="AccordionPanelContent">
      <div class="nurseryProfile">
        <table border="0" >
          <tr>
            <th width="122" class="nurseryCategory" scope="row" >Location:</th>
            <td width="422">Morong; Bataan</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Institution:</th>
            <td>Center for Biomolecular Science</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Contact Person:</th>
            <td>Dr. Lourdes J Cruz <br />
              [email protected]</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Species Available:</th>
            <td> </td>
          </tr>
        </table>
      </div>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1.2</div>
    <div class="AccordionPanelContent">Content 1.2</div>
</div>
<span class="region">Visayas</span>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2.1</div>
    <div class="AccordionPanelContent">Content 2.1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2.2</div>
    <div class="AccordionPanelContent">Content 2.2</div>
</div>
<span class="region">Mindanao</span>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Bukidnon Province</div>
    <div class="AccordionPanelContent">
      <div class="nurseryProfile">
        <table border="0" >
          <tr>
            <th width="122" class="nurseryCategory" scope="row" >Location:</th>
            <td width="422">San Vincente; Baungon; Bukidnon</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Institution:</th>
            <td>Kalangan San Vincente Farmer’s Association</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Contact Person:</th>
            <td>Mr. Nonito Antoque <br />
            0926 904 7336</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Species Available:</th>
            <td> </td>
          </tr>
        </table>
      </div>
      <hr width="565" align="center"/>
      <div class="nurseryProfile">
        <table border="0" >
            <tr>
              <th width="122" class="nurseryCategory" scope="row" >Location:</th>
              <td width="422">Brgy. Imbayao; Malaybalay City; Bukidnon</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Institution:</th>
              <td>DENR Community-Based Rainforestation Project</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Contact Person:</th>
              <td>Mr. Felix Mirasol (CENRO & PASU)<br />
              [email protected]</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Species Available:</th>
              <td> </td>
            </tr>
        </table>
      </div>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Compostela Valley Province</div>
    <div class="AccordionPanelContent">
        <div class="nurseryProfile">
        <table border="0" >
            <tr>
              <th width="122" class="nurseryCategory" scope="row" >Location:</th>
              <td width="422">Maragusan; Compostela Valley</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Institution:</th>
              <td>Kasilak Development Foundation</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Contact Person:</th>
              <td>Joemil Montebon<br />[email protected]</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Species Available:</th>
              <td> </td>
            </tr>
        </table>
      </div>
    </div>
</div>
</div>
<script>
    var acc = new Spry.Widget.Accordion("acc", { defaultPanel: params.panel ? params.panel: 0 });
</script>
</body>
</html>
Notes:
Apart from the 14 errors created by the table elements and their style rules, the above document is HTML5 validated.
The panels count include the <span>'s so that panel 0 is Luzon and panel 1 is the first accordion panel
Because the <span>'s are part of the accordion, they take on the accordion style rules so that you will have to tweak them.
I hope this helps.
Ben

Accordion panels as navigation

Hi i want to use the accordion panels as navigation problem is when I load a new page the widget defaults to open on the first panel. I would like it to stay open on the panel which the link was made from also I can't figure the css to target the "AccordionPanelContent" and adjust :active.
Thanks dan

sorry ben don't know what you mean code below
cheers Dan
<!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>DDI</title>

<link href="ddi.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script>
var params = Spry.Utils.getLocationParamsAsObject();
</script>

<link href="ddi.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script>
var params = Spry.Utils.getLocationParamsAsObject();
</script>

</head>
<body>
<div id="wrapper">
<div id="big_holder">
<div id="wrapper">
<div id="big_holder">
<div id="main_holder">
    <?php include "logo_topnav.php" ?><div id="main_pic"><?php include "gallery_print_1.php" ?><br />
hover on image to control</div>
    <div id="left_holder">
      <div id="copyheader">
       <a href="images/our-work_TV.gif"><img src="images/our-work_TV.gif" width="150" height="49" /></a>
</div>
    <div id="left_nav">
        <?php include "nav.php" ?>
</div>
    </div>    <div id="main_text">
DDI's close association with the print media, especially the glossies, has given rise to a number of special opportunities from inverting imagery to capture attention, to stitching sealed envelopes into the editorial sections and taking over entire covers!
    </div>
    <br class="clearfloat" />
</div>
<div id=footer>
    <?php include "footer.php" ?>
    </div>
</div>
</div>
<script>var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false });
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: params.panel ? params.panel: 0});
</script>

</div>
</body>
</html>

Nested Sliding Panel in an Accordion Panel

I have a nested Sliding Panel inside an Accordion Panel.
The Sliding panel will show until the Accordion panel is
completely closed then it abruptly hides itself.
It does this only in IE of course.
Not sure if a sliding panel can be properly nested inside an
Accordion panel so if anybody could please tell me I would really
appreciate it.
Thank you,
Bisser.

Hi kinblas,
I changed the AccordionPanelContent5 to "hidden" and it still
keeps the image displayed until the Accordion Panel closes, and
then the nested sliding panel image disappears abruptly. This only
happens in IE.
Any other suggestions would be welcome.
Thank you,
Bisser.

Strange issue with Spry Accordion Panels

Hi, I'm having some strange issues with the Spry Accordion
Panels.
Here is the page:
http://www.bellaclientcenter.com/browncollege/aboutus.html
For some reason when I preview this message it adds extra
characters to the url above, so just delete those off to see the
correct url.
The only browser this does NOT happen in is safari, I'm
seeing it all of my other browsers. You'll notice when you first
load up the page, you'll see that the active panel header
background is green, and the non active is a dark grey. But when
you click one of the other panels they all turn a strange neon blue
color. This is very apparent in firefox.
Any thoughts on this? I've attached the spry css code in case
the problem is there.
thanks so much!!
Jeff

That is because your page is currently invalid. And renders in IE quirksmode..
<base href="http://www.industrialwebsearch.com/">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
So make sure your page is valid, and the animations will go smooth in ie

Hide Accordion Panels whilst loading

Similar Messages

Maybe you are looking for