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/

Similar Messages

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.

Spry Accordion panels and Google search

Hello! I have about 30 pages with at least 15 spry accordion
panels on each. I've just implemented a local customized google
search and it looks like Google is able to pull pretty accurate
search on both the panels and panels content.
Once presented with the search results, can a user get to an
OPEN accordion panel, that relates to his search? I hope I've
explained it clearly, THanks!

highedwebby wrote:
> Hello! I have about 30 pages with at least 15 spry
accordion panels on each.
> I've just implemented a local customized google search
and it looks like Google
> is able to pull pretty accurate search on both the
panels and panels content.
Yes, this happens because all of the content is on the page.
> Once presented with the search results, can a user get
to an OPEN accordion
> panel, that relates to his search? I hope I've explained
it clearly, THanks!
I've seen some scripts that highlight Google search terms, so
I suppose that getting the search terms on the destination page is
possible, but making that leap to the proper panel to open may be a
little more difficult.
First you have to figure out which panel the words are
in,then you have to figure out what if the user is searching for
three terms and each of those terms is in a different panel, or if
only one term, and that term is in multiple panels? How would you
expect that work out?
You can highlight the words using code such as that discussed
on this page:
http://www.kryogenix.org/code/browser/searchhi/
I'd guess that someone could reverse that code that finds the
text and then take that find and then walk up the DOM tree to see
if you are within an accordion panel and then show that panel as
the default panel on the page.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Sorting Spry Accordion panels?- Repost

I posted this question on 5/20 but did not get any replies,
so I am reposting in hopes that someone might have an answer.
Can Spry accordion panels be dynamically sorted the same way
that regular Spry tables can? I created a Spry Accordion with a
book title on each panel. When you click on a panel, a table
appears (dynamically generated from an XML database using a Perl
script) showing author name, publisher, date of publication, etc.
I'd like users to be able to alphabetize the book titles in case
they're not already in alphabetical order. I'd also like to add a
link on (or near) the panels to sort them by date of publication,
even though the date field is not visible when the panels are
closed.
Thanks!
- cpmorgan

I couldn't tell from your post if you were generating the
markup for your Accordion using regions and data sets. If you are,
then you are probably doing something similar to:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample2.html
In which case, you can cause the panels to sort by simply
sorting the data set:
<a href="#" onclick="dsEmployees.sort('firstname'); return
false;">Sort by FirstName</a>
<a href="#" onclick="dsEmployees.sort('lastname'); return
false;">Sort by Last Name</a>
--== Kin ==--

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

Spry Accordion Panel

hi guys,
i have a Spry accordion panel, in the first panel i have some
dynamic text and some dynamic images, when i open the other panel
below, this opens over the top of the first panel (like it should)
and the dynamic text is covered (like it should) however the images
stay visable in the same place as if the images are placed ontop of
the accordion panel. The images are in the first panel container
though and so should become hidden but don't.
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Genral Info</div>
<div class="AccordionPanelContent" id="accordcontent">
<p>Username: <?php echo $row_rsFull['UserName'];
?> </p>
<p>Name: <?php echo $row_rsFull['Forename']; ?>
<?php echo $row_rsFull['Surname']; ?></p>
<p>Date Of Birth: <?php echo
$row_rsFull['DateOfBirth']; ?></p>
<p>University: <?php echo
$row_rsFull['University']; ?></p>
<p>Project Name : <?php echo $row_rsFull['pName'];
?></p>
<p>Project Description: <?php echo
$row_rsFull['pDescription']; ?></p>
<p><img src="<?php echo $row_rsFull['pImage1'];
?>" alt="image 1" class="bottomimage" /><img src="<?php
echo $row_rsFull['pImage2']; ?>" alt="image 2"
class="bottomimage2" /></p>
</div>
</div>
Any Suggestions?

That would be very easy, just remove the tabindex attribute
of the top level div of the accordion. However keyboard navigation
will not work at that moment. The dotted line is a browswer
specific visualisation to show that the specific item is selected
using the tabindex.
You could also add the following style to your page
div:active,
div:focus,
div:hover
outline-style: none; -moz-outline-style:none;
Then none of the div items with a tabindex get an surrounding
border.

Collapse Spry accordion panels

Is it possible to collapse the spry accordion panels when working in design view? I want to put more content on the page below the accordion, but it is obstructing my view of the rest of the page.

Is it possible to collapse the spry accordion panels when working in design view? I want to put more content on the page below the accordion, but it is obstructing my view of the rest of the page.

Closing Spry Accordion Panels

Hi, i use Spry Accordion for this site:
dailycast.de
I want to close a open panel by clicking on these panel?
Here is my Code:
CODE
I found a tutorial on adobe Labs, but i dont understand this
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#Programatic OpenAndClose
Thanks for helping me, and sorry about my bad english!
Greets from germany

Hello SpryRookie,
If you look at the code of your page you will find the
constructor of your accordion. (var .. = new Spry.Widget.Accordion(
You can add options in the constructor.
var .. = new
Spry.Widget.Accordion('id-of-the-element',{options});
To have it closed you need to set the defaultPanel option to
a negative value, and useFixedPanelHeights to false.
So you new constructor should look like:
var variablename = new
Spry.Widget.Accordion('id-element',{useFixedPanelHeights: false,
defaultPanel: -1 });
save, reload the page and it should work.
@ausm94 you can download the complete Spry package including
all samples and API from adobe labs:
labs.adobe.com/technologies/spry/

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

Spry TabbedPanels: set default state

After inserting 3 Collapsible Panels on my web page, I want to set the default state of the panels so that when the page loads, panel 1 is open and panels 2 and 3 are closed. I used this code from "Set the default state of the panel" Spry Help page:
<script type="text/javascript">
    var cp1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", { contentIsOpen: true});
    var cp2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", { contentIsOpen: false });
    var cp3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", { contentIsOpen: false });
</script>
But all panels remain open on page load.
Then I tried editing the default code that is inserted by Dreamweaver Insert > Spru > Spry Tabbed Panels :
<script type="text/javascript">

</script>
That didn't work either. Any advice on what is wrong here? Other than the wrong default state, the panels are working correctly.

Thank you. I figured out the problem, and the default panel states are working correctly now.
Next step: I want to use the open and close functions to toggle the state of the other panels so when the user clicks one tab to open a panel, the other two close. I'll try to get this working, but may be back to this forum in case I need help!

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

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

Spry accordion panel not lining up with top of viewport in FF3.5

I have created a new web page using spry accordion for the first time on my site. In IE8 all works perfectly - opening and closing and moving between tabs is smoothly done. My first tab opens a very long panel (way over the web browser's height), and scrolling down through the text brings us to the second tab. I disabled fixed panel heights - these expand fully when the relevent header is clicked. Clicking the second tab in IE8 closes the first panel smoothly, opens the second panel smoothly and leaves the browser sitting so the 2nd tab is in line with the top of the browser window. Perfect!
In FF3.5, following the same routine, with the first panel open, and scrolling down to the 2nd tab - click this and it closes/opens the panels, but is very jerky doing this and you are left with the browser window looking at the very bottom of the web page, instead of at the top of the panel.
I'd appreciate any advice on this before I give up and move to JQuery. Is this a bug?
**UPDATE** I tried Jquery and the results are worse! It doesnt even line up in IE8.
Please feel free to check out the code here:
http://www.pjamedia.com/?page=modeladvice
Any help would be very much appreciated.
Thanks, Paul A

so take an anchor at the begining of the Accordian panle, link the <a> tag to the anchor point.
<script type="text/javascript">
function goToAnchor() {
location.href = "#unilist";
</script>
paste this script in <head> tag.
<a name="unilist" id="unilist"></a> // add an anchor tag before the accordion panel.
                  <div id="Accordion1" class="Accordion">
                    <div class="AccordionPanel">
                      <div class="AccordionPanelTab" ><a onclick="goToAnchor();"> University, Ohio*</a></div>
                      <div class="AccordionPanelContent">content</div></div>
<div class="AccordionPanel">
                      <div class="AccordionPanelTab" ><a onclick="goToAnchor();"> University, oiowa*</a></div>
                      <div class="AccordionPanelContent">content</div></div>
</div>

Spry Tabbed Panel Defaults to home page with recordset paging

I have Spry ver. 1.6.1. A Spry Tabbed Panel titled "Check Ride Activity Report" (Tab 6) accesses a mysql database and shows the records in a table format. Instead of having all the records display at once I want to limit the records displayed to a few at a time. e.g. 5 per page. I added a recordset navigation bar and set the $maxRows_GetChkRideRecs = 5; It works but each time the navigation bar "Next" or "Last" or "First" or "Previous" is clicked the page reloads with the default Home page Tab displayed. The user then has to click on Tab 6 to view the new results. The url where this can be viewed is at http://Training.reliantair.com. Is there a way to code this tab so that Tab 6 remains the default tab once it is selected until the user selects another tab?
I want to avoid putting another button on the page to accomplish this as shown in the spry utils samples where the user clicks to set the default tab.
Can this be done within the recordset paging code similar to how it is done on a form submit to keep the focus on the current tab?

I didn't try the cookie method suggested. The tab method listed in spry utils does work but requires an additional button, so I came up with this solution.
In the Head of the HTML document I put this code. It searches for the query string in the HREF when any of the record paging buttons is pressed.
<script type="text/javascript" src="SpryURLUtils.js"></script>
<script type="text/javascript">
var params = Spry.Utils.getLocationParamsAsObject();
if (location.href.indexOf("GetChkRideRecs") != -1 && location.href.indexOf("tab") == -1)
location.href +="&tab=5#TabbedPanels1";
</script>
Then in the body of the HTML document at the bottom of the page the tabbed panel widget is changed like this:
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1",{defaultTab: (params.tab ? params.tab:0)});
The first time a recordset paging link is clicked the HREF attribute of &tab=5#TabbedPanels1 is added to the location HREF. Subsequent clicks of any of the links do not change the HREF because the code looks for "tab" and does nothing if it is found.

Multiple SPRY Collapsible Panel Defaults

I have a page with three collapsible bars and want the only the first to be open and the other two to be closed when the page loads. How do I do this?

I figured this one out - duh! The properties panel allows you to set the panel defaults to opened or closed.

Spry Accordion Panel Default State All Closed?

Similar Messages

Maybe you are looking for