Accordion panel initial state.

Is it possible to have a certain tab of an accordion appear open when the page loads? (except from the top one)

To change your accordion's initial default state edit this value at the bottom of your page's .html file to 0/1/2/3.... and so on. The value refers to which tab is open by default in your accordion. Top tab = 0, 2nd tab = 1, 3rd tab = 2.....
Muse.Utils.addSelectorFn('#accordionu27629', function(elem) { return new WebPro.Widget.Accordion(elem, {canCloseAll:false,defaultPanel: 0 }); });

Similar Messages

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/

Initial State of Navigation Panel

Hi all,
I have an issue with an SAP portal ivew linked to a guided procedure. When the user clicks on it the navigation panel on the left is closed. We have to tried to set the proposerty "Initial State of Navigation Panel" to "Open" but it did not work (although we tried another iView and it did work). Can you please indicate what could be the possible reason for overriding this property? Thank you in advance.

Hi SAPer,
Did you try looking at the "Initial State of Navigation Panel" value of your iView in question in the Portal role? Assuming this is a delta-link copy, this property might have its delta-link inheritance broken through modification prior to this.
Cheers.
Best Regards,
Zhi Liang

States in Accordion Panel

Since the last update to Muse, the layer states in the "Label" area of my accordion panels no longer work. Only the "Active" layer is shown at all times; the "Normal" "Rollover" and "Mouse Down" states do not appear. This occurs whether there is text in the "Label" area or an image (with settings for each state). I have checked that all the states are set up correctly. Prior to the latest update, the states for this feature worked perfectly.

Abhishek, thanks, may I send you a link to look at since I do not wish to post the site to the community at the moment.
Marian

Initial State of Navigation Panel - Automatic not working

Hello,
I have several iViews where I have set Initial State of Navigation to Automatic, which should collapse detailed navigation if there is nothing on it to display. However, it always comes up open even though it is blank. Is there anything else that needs to be down to make it work? We are on EP7 SP14.
Thanks,
Alex

Could you check your Portal Desktop Innerpage to check if there is some other iViews also on the left hand side where detail navigation iView is residing? Sometime another iView named Favorites is added there. So it might be the case though detail navigation is not there still it is showing the blank portal favorites iView on the left side.
To check this Open you portal framework page -> Open Desktop Innerpage -> See if there is anything except Content Area and Detailed Navigation there. Check the Innerpage layout to see where these iViews are placed in side the page.
Regards,
Shubhadip

Spry Accordion Panels view incorrect in IE8

I have a page set up using both spry menu and spry accordion panels. The problem is that in FireFox and Chrome, the pages view as they should. However, in IE, the panels on the accordion spread and are open, it doesn't view as it should. The test page is here www.sbcvote.us/index1.html the source code is below. My initial guess is that I have an open or not closed tag somewhere?
<!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>Joe Paul Gonzalez San Benito County Clerk-Auditor-Recorder-Registrar of Voters</title>
<meta name="keywords" content="Joe Paul Gonzalez, San Benito County, Clerk, Auditor, Recorder, Registrar of Voters, fppc form 460, reconveyance deed, deed of reconveyance, reconveyance, homepage, mechanics lien release, quit claim deed form, release of mechinics lien, form, san, reconveyance, county, deed, 460, california, fppc, nacimiento, trust, elections, ca, solictud, certifacadas, reporting, statements, nominees, handbook, contribution, joe, paul, gonzalez" />
<meta name="description" content="Joe Paul Gonzalez San Benito County Clerk-Auditor-Recorder-Registrar of Voters" />
<link href="scripts/style.css" rel="stylesheet" type="text/css" />
<script src="/SpryAssets/menu/SpryMenuBar.js" type="text/javascript"></script>
<script src="/SpryAssets/accordion/SpryAccordion.js" type="text/javascript"></script>
<link href="/SpryAssets/menu/SpryMenuBarHorizontal_sbcvote.css" rel="stylesheet" type="text/css" />
<link href="/SpryAssets/accordion/SpryAccordion_sbcvote.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
function clearText(field)
    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;
</script>
</head>
<body>
<div id="wrapper">
    <div id="header">
      <div id="header_right">
            <ul id="header_button">
                <li><a href="#"><img src="images/home.jpg" alt="home" /></a></li>
                <li><a href="#"><img src="images/contact.jpg" alt="contact us" /></a></li>
            </ul>
            <div class="cleaner"></div>
            <form action="#" method="get">
                <input type="text" value="Enter a keyword here..." name="q" size="10" id="searchfield" title="searchfield" onfocus="clearText(this)" onblur="clearText(this)" />
                <input type="submit" name="Search" value="" alt="Search" id="searchbutton" title="Search" />
            </form>
      </div>
    </div> 
    <div id="banner">
    <div id="banner_box">
        <ul>
        <li><a href="clerk.htm" ><span class="current"></span><img src="images/countyClerk.jpg" alt="San Benito County Clerk" /></a></li>
            <li><a href="auditor.htm"><span></span><img src="images/countyAuditor.jpg" alt="San Benito County Auditor" /></a></li>
            <li><a href="recorder.htm"><span></span><img src="images/countyRecorder.jpg" alt="San Benito County Recorder" /></a></li>
            <li><a href="http://results.sbcvote.us" target="_new"><span></span><img src="images/coRegistrar_results.jpg" alt="" /></a></li>
        </ul>
        </div>
    </div> 
    <div id="menu">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a class="MenuBarItemSubmenu" href="index.html">Home</a>
          <ul>
            <li><a href="#">Item 1.1</a></li>
            <li><a href="#">Item 1.2</a></li>
            <li><a href="#">Item 1.3</a></li>
          </ul>
        </li>
        <li><a href="registrar/candidateinfo.htm" class="MenuBarItemSubmenu">Candidate Info</a>
          <ul>
            <li><a href="candidate_forms_manuals.htm">Forms & Manuals</a></li>
            <li><a href="pdf/forms/registrar/candidates/2010CandidateHandbook.pdf">2010 Candidate Handbook</a></li>
            <li><a href="registrar/form460.htm" class="MenuBarItemSubmenu">FPPC 460s</a>
              <ul>
                <li><a href="registrar/form460_all.htm">Candidate Form 460s</a></li>
                <li><a href="registrar/2010_form460.htm">2010 Candidate 460 Forms</a></li>
                <li><a href="registrar/2009_form460.htm">2009 Candidate 460 Form</a></li>
                <li><a href="registrar/2008_form460.htm">2008 Candidate 460 Form</a></li>
                <li><a href="registrar/2007_form460.htm">2007 Candidate 460 Form</a></li>
              </ul>
            </li>
            <li><a href="candidate_reporting.htm">Reporting</a></li>
          </ul>
        </li>
        <li><a class="MenuBarItemSubmenu" href="registrar/votebymail.htm">Vote-By-Mail</a>
          <ul>
            <li><a class="MenuBarItemSubmenu" href="overseasvoting.htm">Overseas Voting</a>
              <ul>
                <li><a href="pdf/forms/registrar/votebymail/oversees_votebymail_request.pdf">Overseas Vote-By-Mail Request</a></li>
                <li><a href="pdf/forms/registrar/votebymail/guide_military_overseas.pdf">Guide Military Overseas</a></li>
                <li><a href="#">Untitled Item</a></li>
              </ul>
            </li>
            <li><a href="mailvotestatus.htm">Ballot Status</a></li>
            <li><a href="pdf/forms/registrar/votebymail/votebymail_app_gen_eng.pdf">Application </a></li>
            <li><a href="pdf/forms/registrar/votebymail/votebymail_app_gen_SPAN.pdf"> Español</a></li>
          </ul>
        </li>
        <li><a href="/registrar/registration.htm" class="MenuBarItemSubmenu">Register to Vote</a>
          <ul>
            <li><a href="registrar/national_vrc_notice.htm">Form English</a></li>
            <li><a href="http://www.sbcvote.us/registrar/national_vrc_notice_sp.htm">Español</a></li>
            <li><a href="registrar/statement_distribution.htm">Distribution</a></li>
          </ul>
        </li>
        <li><a href="registrar/pollworker.htm" class="MenuBarItemSubmenu">Pollworker</a>
          <ul>
            <li><a href="registrar/pollworker.htm">Become a Pollworker</a></li>
            <li><a href="registrar/pollworker.htm#student">Students</a></li>
            <li><a href="registrar/pollworker.htm#student">State Employees</a></li>
          </ul>
        </li>
        <li><a href="registrar/hava_faqs.htm" class="MenuBarItemSubmenu">HAVA</a>
          <ul>
            <li><a href="registrar/hava_complaint_procedure.htm">Complaint Procedure</a></li>
            <li><a href="registrar/hava_compliancemanual.htm">Compliance Manual</a></li>
          </ul>
        </li>
</ul>
</div> 
    <div id="content_wrapper">
    <div id="left_sidebar">
        <div class="box">
            <h2><span></span>Click on a Tab for Info</h2>
                <div class="body">
                    <ul class="side_menu">
                      <li>
                        <div id="Accordion1" class="Accordion" tabindex="0">
                          <div class="AccordionPanel">
                            <div class="AccordionPanelTab">Vote-By-Mail (VBM)</div>
                            <div class="AccordionPanelContent"><a href="/registrar/votebymail.htm">Vote-By-Mail Voting</a><a href="/pdf/forms/registrar/votebymail/overseas_votebymail_request.pdf">Overseas VBM Request</a>
                              <a href="/pdf/forms/registrar/votebymail/VBM_Application.pdf">Application for Permanent VBM </a><a href="/pdf/forms/registrar/votebymail/guide_military_overseas.pdf">Guide to Military Voting</a>
                              <a href="/pdf/forms/registrar/votebymail/votebymail_app_general_county_fill.pdf">Application VBM General Election</a><a href="/registrar/mailvotestatus.htm">Did My VBM Ballot Get Counted?</a><br />
                                <br />
                              <br />
</div>
                          </div>
                          <div class="AccordionPanel">
                            <div class="AccordionPanelTab">Voto Por Correo</div>
                            <div class="AccordionPanelContent"><a href="/registrar/spanish/voto.por.correro.html">Voto Por Correro</a><a href="/registrar/spanish/overseasvoting.SPAN.html">Votante Información Extranjero</a><a href="/registrar/mailvotestatus.htm">Cheque se recibimos su voto por correro</a> <a href="/pdf/forms/registrar/votebymail/VBM_ApplicationSPAN.pdf">Solicitud de Balota de Votación por correo en California</a></div>
                          </div>
                          <div class="AccordionPanel">
                            <div class="AccordionPanelTab">Voter Information</div>
                            <div class="AccordionPanelContent"> <a href="/registrar/national_vrc_notice.htm">Register to Vote</a>
                              <a href="http://www.voterguide.sos.ca.gov/pdf/english/" target="_new">Voter Information Guide Nov 2010</a>
                              <a href="/pdf/forms/registrar/register/YourRightToVote_ENG.pdf">Your Right to Vote</a>                              <a href="/pdf/forms/registrar/register/eng-list-of-certified-candidates11.10.pdf">Certified Candidates Nov 2010</a>
                              <a href="/pdf/forms/registrar/register/TimeOfftoVote_ENG.pdf">Time Off to Vote </a><br />
                              <br />
                            </div>
                          </div>
                          <div class="AccordionPanel">
                            <div class="AccordionPanelTab">Votante Información</div>
                            <div class="AccordionPanelContent"> <a href="/pdf/forms/registrar/register/Guide_Voting_SPAN.pdf" target="_new">Guía para Votar</a> <a href="/registrar/national_vrc_notice_sp.htm">Inscíibase para Votar</a> <a href="/pdf/forms/registrar/register/Voter-bill-of-rights.SPAN.pdf">Declaración derechos de Votantes</a> <a href="/pdf/forms/registrar/register/spanish-vig-nov-2010.pdf">Guía Oficial Información Nov 2010</a> <a href="/pdf/forms/registrar/register/spanish-list-of-certified-candidates11.10.pdf">Lista Candaditos Certificados 2010 </a><a href="/pdf/forms/registrar/register/TimeOfftoVote_SPAN.pdf">Tiempo Libre Para Votar</a></div>
                          </div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">For the Candidates</div>
                            <div class="AccordionPanelContent">Blank 460 Forms<br />
                              Candidates 460 Forms Index<br />
                            2010 Candidate Handbook<br />
                            2010 Calendar </div>
                        </div>
                          <div class="AccordionPanel">
                            <div class="AccordionPanelTab">Nov 2, 2010 Election</div>
                            <div class="AccordionPanelContent">Election Results Page<br />
                              Canvass of the Vote
                                <br />
                                Vote-By-Mail Ballot Look up<br />
                                State Vote Pamphlet<br />
                                Sample Ballot Statewide
                            </div>
                          </div>
                          <div class="AccordionPanel">
                            <div class="AccordionPanelTab">Label 7</div>
                            <div class="AccordionPanelContent">Content 7</div>
                          </div>
                          <div class="AccordionPanel">
                            <div class="AccordionPanelTab">Label 8</div>
                            <div class="AccordionPanelContent">Content 8</div>
                          </div>
                        </div>
                      </li>
                        <li> <a href="#">Lorem ipsum dolor</a></li>
                <li><a href="#">Donec bibendum semper</a></li>
                        <li><a href="#">Proin tincidunt dapibus</a></li>
                        <li><a href="#">Nulla consequat</a></li>
                        <li><a href="#">In enim justo</a></li>
                        <li><a href="#">Aenean vulputate</a></li>
                        <li><a href="#">Etiam ultricies</a></li>
                        <li><a href="#">Nullam vehicula egestas </a></li>
                    </ul>
</div>
            <div class="box_bottom"><span></span></div>
            </div>
            <div class="box">
            <h2><span></span>Our Departments</h2>
                <div class="body">
          <ul class="side_menu">
                        <li><a href="clerk.html">County Clerk</a></li>
                        <li><a href="auditor.html">County Auditor</a></li>
                        <li><a href="recorder.html">County Recorder</a></li>
                        <li><a href="index.html">Registrar of Voters</a></li>
                        <li><a href="http://results.sbcvote.us" target="_new">Election Results</a></li>
                        <li></li>
                        <li></li>
                        <li></li>
</ul>
                </div>
            <div class="box_bottom"><span></span></div>
            </div>
        </div> 
        <div id="content">
<div class="box">
            <h2><span></span>Welcome to the San Benito County Registrar of Voters</h2>
                <div class="body">
                    <p> Welcome to our new and updated website for the County of San Benito Clerk-Auditor-Recorder- Registrar of Voters. </p>
              </div>
            <div class="box_bottom"><span></span></div>
            </div>
            <div class="box">
            <h2><span></span>News and Updates</h2>
                <div class="body">
                    <div class="news_box">
                      <h3><a href="http://results.sbcvote.us" target="_new">November 2, 2010 Election Results</a></h3>
                        <p>Up to the minute election results for San Benito County will be uploaded to our website at the close of the polls on Tuesday, November 2, 2010 at<a href="http://results.sbcvote.us" target="_new"> http://results.sbcvote.us.</a></p>
                      <div class="cleaner"></div>
                  </div>
              <div class="news_box">
                <h3><a href="registrar/mailvotestatus.htm">Vote-By-Mail Ballots</a>
                </h3>
                <p>Verify that your Vote-By-Mail Ballot has been received <a href="/registrar/mailvotestatus.htm">here.</a> To insure that your vote is counted, drop off your VBM ballot to our offices on the second floor of the courthouse building room 406 BEFORE Tuesday, Nov. 2, 2010.</p>
                    <div class="cleaner"></div>
                </div>
              <div class="news_box">
                    <a href="#"><img class="news_image" src="images/image_08.jpg" alt="image" /></a>
               <h3><a href="#">Auditor's Department</a></h3>
                    <p> Praesent rhoncus faucibus nibh, non molestie lectus sagittis sed. Praesent ac sem lectus. Cras molestie elit sit amet velit tincidunt imperdiet. Mauris nulla purus.</p>
                <div class="cleaner"></div>
                </div>
                <div class="more float_r"><a href="#">View All</a></div>
                <div class="cleaner"></div>
                </div>
            <div class="box_bottom"><span></span></div>
            </div>
        </div> 
       <div id="right_sidebar">
        <div class="box">
            <h2 align="center"><span></span>Joe Paul Gonzalez</h2>
                <div class="body">
                  <ul class="side_menu">
                        <li></li>
                        <li></li>
                        <li><img src="images/joepaul_new.jpg" width="207" height="262" alt="joe paul gonzalez" /></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li><a href="#">County Clerk-Auditor-Recorder</a></li>
                  </ul>
              </div>
            <div class="box_bottom"><span></span></div>
            </div>
            <div class="sidebar_box">
      <a href="http://results.sbcvote.us" target="_new"><img src="images/results.jpg" alt="Election Results" /></a>            </div>
            <div class="sidebar_box">
            <a href="#"><img src="" alt="City Zoo" /></a>            </div>
      </div> 
        <div class="cleaner"></div>
    </div> 
</div> 
<div id="footer_wrapper">
<div id="footer">
        <ul class="footer_menu">
        <li><a href="#">Homepage</a></li>
            <li><a href="#">Site Map</a>
            </li>
            <li><a href="#">Clerk</a>
            </li>
            <li><a href="#">Auditor</a></li>
            <li><a href="#">Recorder</a></li>
            <li><a href="#">Registrar of Voters</a></li>
            <li><a href="#">Election Results</a></li>
            <li><a href="#">Forms</a></li>
            <li class="last_menu"><a href="#">Contact</a></li>
        </ul>
        Copyright © 2010 <a href="http://www.netwidesales.com" target="_new">NetWideSales</a> |
        <a href="http://www.netwidesales.com" target="_new">Designed by Irma C. Gonzalez</a> |
    <a href="http://www.joepaulgonzalez.com" target="_new">Joe Paul Gonzalez</a> </div> 
</div> 
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/images/menubar/SpryMenuBarDownHover.gif", imgRight:"/images/menubar/SpryMenuBarRightHover.gif"});
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
I appreciate any help here, it really doesn't make sense to me, it did work for a few viewing in IE and I must have changed something by mistake?
Thanks again.

I added a set width to the accordion css and that solved the problem of the widget running across the page. The IE issue appears to be an ongoing issue with IE. If a viewer has IE8, then hitting the compatibility button on the menu bar will solve the viewing problem. If not, it doesn't view correctly. It views fine on other browsers (Chrome, etc). Problem is how many people will know to hit the compatibility button?
Thank you for your help, I appreciate the time taken.

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

Accordion Panel problem in IE

Using DW8 - and Interakt Ajax tookit, I have an Ajax panel
that contains the Spry Accordion. I have tried EVERYTHING, and
although it works perfectly in Firefox, the panels open slightly as
soon as you mouse over or open any of them. I have tried editing
everything I can think of in the code, the CSS and even editing in
doc type in the panel page.... but it still does it....just
slightly. Also...I can only use fixed height... becuase if I use
the auto-height... it slides up sluggishly, but ONLY if there is a
LOT of content. I am pulling my hair out.
I figured the only people who can help me at this point have
to live in Romania.... if any are watching this post... please
help!!!
Thanks guys, and gals.

Here is the CSS for that area: I tried setting margins in
every state just as an experiment? Maybe I need to use the
!important comment?
@charset "UTF-8";
/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
/* This is the selector for the main Accordion container. For
our default style,
* we draw borders on the left, right, and bottom. The top
border of the Accordion
* will be rendered by the first AccordionPanelTab which
never moves.
* If you want to constrain the width of the Accordion
widget, set a width on
* the Accordion container. By default, our accordion expands
horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector
is not necessary
* to make the widget function. You can use any class name
you want to style the
* Accordion container.
.Accordion {
border-left: solid 1px gray;
border-right: solid 1px gray;
border-bottom: solid 1px gray;
overflow: hidden;
/* This is the selector for the AccordionPanel container
which houses the
* panel tab and a panel content area. It doesn't render
visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this
selector is not necessary
* to make the widget function. You can use any class name
you want to style an
* accordion panel container.
.AccordionPanel {
margin: 0px;
padding: 0px;
/* This is the selector for the AccordionPanelTab. This
container houses
* the title for the panel. This is also the container that
the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this
selector is not necessary
* to make the widget function. You can use any class name
you want to style an
* accordion panel tab container.
.AccordionPanelTab {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font-weight: bold;
/* This is the selector for a Panel's Content area. It's
important to note that
* you should never put any padding on the panel's content
area if you plan to
* use the Accordions panel animations. Placing a non-zero
padding on the content
* area can cause the accordion to abruptly grow in height
while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on
the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in
this selector is not necessary
* to make the widget function. You can use any class name
you want to style an
* accordion panel content container.
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
height: 150px;
/* This is an example of how to change the appearance of the
panel tab that is
* currently open. The class "AccordionPanelOpen" is
programatically added and removed
* from panels as the user clicks on the tabs within the
Accordion.
.AccordionPanelOpen .AccordionPanelTab {
background-color: #EEEEEE;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* This is an example of how to change the appearance of the
panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover"
is programatically added
* and removed from panel tab containers as the mouse enters
and exits the tab container.
.AccordionPanelTabHover {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelOpen .AccordionPanelTabHover {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* This is an example of how to change the appearance of all
the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is
programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* This is an example of how to change the appearance of the
panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #EEEEEE;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;

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

Form submit inside an accordion panel

Hi,
i have a form inside an accordion panel content. i would like
the submitted data to hit a php script for processing and then
refresh the accordion panel content with new data without
refreshing the page. This is the AJAX model and i was wondering if
it was possible with spry.
Thanks,
Dhimiter

Hi,
we have a function called updateContent that allows you to
change the initial data content for a html element.
You can add this function at onclick event to change the data
from the accordion panel with the new processed data.
To see an example of how this function works, please look at
this
sample
Hope this helps you,
Diana

Did we loose the choice to close the accordion menu initially.

After the update. I am not able to close the accordian menu, and I also don't see the option to close initially. Thanks for the help.
http://www.highestgoodclothing.com/_blog/Highest_Good_Clothing_Blog
Before the update the acrive tab was closed initially.

The "Close all initially" option in the Accordion panel has been replaced by the new behavior that allows an accordion to be collapsed in Design view. Refer to Muse 4.0 Release notes on the following page for more information on this and other Widget improvements - http://helpx.adobe.com/content/help/en/muse/release-note/adobe-muse-release-notes.html
So in your case, you simply need to enable the "Can Close All" option for the Accordion panel (if its not enabled already) and close it in Design mode in order for it to be collapsed by default on publish. This corresponds to another Panel widget improvement in this release where the selected panel in Design view will now be selected/active when previewing, exporting or publishing the site to Business Catalyst.
Thanks,
Vinayak

Using Accordion Panel as Menu .... ?

I am trying to use an accordion panel as a menu. I have successfully set up each Tab to flip to the apporpritate page via the hyperlink, but the tabs do not remain active once the page flip is done.

That is the normal result when using accordions as menus.
One work around is when you save each page before you publish make sure the panel is open on the correct accordion panel for each page. It will remember the last state that you publish with.

Initial state

HI,
I am using this Superpanel v1.5 and I'm wondering if there is
a way to get the "initial state" of the panels to be collapsed?
I cannot figure it out no matter what i try
source code:
http://www.wietseveenstra.nl/files/flex/SuperPanel/v1_5/srcview/index.html
demo:
http://www.wietseveenstra.nl/files/flex/SuperPanel/v1_5/MainView.html

Try setting the panel height to the panel's header height.
You can get the panel's header height using getHeaderHeight()
method.
Hope this helps.

How set an initial state for Slide effects

Hi everyone, I would like to use the slide effect like the
collapsable panels, with an initial state "closed".
I used Spry Pre-Release 1.5 Preview
In my first attempt
<a
onclick="Spry.Effect.Slide('MoreOptionSlide',{duration:1000,from:'0%',
to:'100%',toggle:true})" >More Options</a>
The DIV is always "open" and after click it closes and
performes the slide animation.
Also i tried to change some style attributes of the DIV and
restore or change them in the "setup" function of the
spy.Effect.Slide constructor, I thought this function is executed
before animation, but it is executed even without be triggered the
animation.
Thanks,
Richard

Hello Richard,
After you design the page and adjust the element dimensions
as if the element would be in page without the animation to show it
you'll have to set the 'display:none' CSS property on that element.
In this situation the element will remain in page but will simply
be invisible. Something like this:
<div id="MoreOptionSlide" style="width: 300px; height:
200px; border: 1px solid black; overflow: auto;display:none;">
</div>
Now using Spry 1.5 effects you can make this element appear
after the More Options link is clicked:
<a href="#" onclick="effect.start(); return false;"
>More Options</a>
<script type="text/javascript">
var effect = new
Spry.Effect.Slide('MoreOptionSlide',{duration:1000,from:'0%',
to:'100%',toggle:true});
</script>
Regards,
Cristian MARIN

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

Accordion panel initial state.

Similar Messages

Maybe you are looking for