How do I duplicate/Mirror an accordion Panel

hi there
I wish to duplicate the design of an accordion  panel and replicate it 50 times so i don't have to design each and every tab - how can I duplicate a panel with its contents?

Hi, I tried it a few times, trying to do it in different ways, and the result is always the same, the whole panel is copied and inserted, while maintaining the style and content. So just select the entire panel by clicking on it once and "copy and paste"

Similar Messages

  • How do I collapse all the accordion panels

    The problem that I still have is that I am trying to close all the Accordions when clicking on the last panel.
    I have looked at the  Accordion.closePanel() , but that throws an error
    http://labs.adobe.com/technologies/spry/articles/data_api/apis/accordi on.html
    here is a link to the page http://www.antworks.co.uk/mobymemory/menu.html
    see the code below. Any help would be greatly appreciated. Thanks
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="Accordion1" class="Accordion" tabindex="0">
    <div class="AccordionPanel">
    <div class="AccordionPanelTop" onclick="Accordion1.openPanel(0); return false;">memory cards (make)</div>
    <div class="AccordionPanelContent">
    <img src="images/new/trans.gif" width="7" height="7" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="3" />
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab" onclick="Accordion1.openPanel(1); return false;">memory cards (brand)</div>
    <div class="AccordionPanelContent2">Content 2</div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab" onclick="Accordion1.openPanel(2); return false;">mobile accessories</div>
    <div class="AccordionPanelContent">Content 2</div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab" onclick="Accordion1.openPanel(3); return false;">gaming</div>
    <div class="AccordionPanelContent">Content 2</div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab" onclick="Accordion1.openPanel(4); return false;">computing</div>
    <div class="AccordionPanelContent">Content 2</div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelBot" onclick="Accordion1.openPanel(5); return false;">customer login</div>
    <div class="AccordionPanelContent">Content 2</div>
    </div>
    </div>
    <script type="text/javascript">
    <!--
    //var Accordion1 = new Spry.Widget.Accordion("Accordion1", {closedClass:"Accordion"});
    //var Accordion1 = new Spry.Widget.Accordion("Accordion1", {closedClass:"AccordionPanel"});
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false });
    //-->
    </script>
    </body>
    </html>
    css
    @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 {
    width: 174px;
    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: #CCCCCC;
    letter-spacing: -0.04em;
    background-image: url(../images/new/spry/meun_blue.gif);
    background-repeat: no-repeat;
    padding: 8px 0 0 12px;
    height: 21px;
    font-family: Arial, Helvetica, sans-serif;
    color:#666666;
    font-size: 14px;
    font-weight: bold;
    margin: 0px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    .AccordionPanelTop {
    background-color: #CCCCCC;
    letter-spacing: -0.04em;
    background-image: url(../images/new/spry/meun_top.gif);
    background-repeat: no-repeat;
    padding: 8px 0 0 12px;
    height: 22px;
    font-family: Arial, Helvetica, sans-serif;
    color:#666666;
    font-size: 14px;
    font-weight: bold;
    margin: 0px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    .AccordionPanelBot {
    background-color: #CCCCCC;
    letter-spacing: -0.04em;
    background-image: url(../images/new/spry/meun_bot.gif);
    background-repeat: no-repeat;
    padding: 8px 0 0 12px;
    height: 21px;
    font-family: Arial, Helvetica, sans-serif;
    color:#666666;
    font-size: 14px;
    font-weight: bold;
    margin: 0px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    /* 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 {
    letter-spacing: -0.05em;
    background-image: url(../images/new/spry/meun_grey.gif);
    background-repeat: repeat-y;
    padding: 0 0 0 12px;
    font-family: Arial, Helvetica, sans-serif;
    color:#7f879e;
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
    margin: 0px;
    .AccordionPanelContent2 {
    letter-spacing: -0.05em;
    background-image: url(../images/new/spry/meun_grey.gif);
    background-repeat: repeat-y;
    padding: 0 0 0 12px;
    font-family: Arial, Helvetica, sans-serif;
    color:#7f879e;
    font-size: 14px;
    font-weight: bold;
    overflow: auto;
    margin: 0px;
    height: 200px;
    /* 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;
    /* 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 {
    color: #555555;
    .AccordionPanelOpen .AccordionPanelTabHover {
    color: #555555;
    /* 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: #3399FF;
    /* 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: #33CCFF;

    Just so that you know for the next time, when you give us a URL, there is no need to post your code. This is by far the most preferred method for obtaining our assistance.
    Having said that, place the fillowing in the HEAD section of your document, ensuring that you do have the file in that location
    <script src="SpryAssets/SpryDOMUtils.js"></script>
    Then, near the bottom of the page within the same SCRIPT content as your constructor(s), place the following code
    Spry.$$(".AccordionPanelBot").addEventListener("click", function(){
             Accordion1.closePanel();
    The Spry Element Selector (Spry.$$) requires SpryDOMUtils.js. Here we place an event listener to your last tab with a class name of AccordionPanelBot, which when clicked will close the currently open panel(s).
    I hope this helps.

  • How can I make a jQuery accordion panel tab collapsed by default?

    I have Googled this and saw that someone recommended placing the 'collapsible' option before the 'active' one. For example,
    $( ".accordion" ).accordion("option", {
        collapsible: true,
        active: false
    I am completely new to Dreamweaver. I inserted a jQuery UI Accordion into my web page because I need a drop-down list. I have a main .css file for my page. Additional jquery css files were added after I inserted the accordion. (For example, I see jquery.ui.core.min.css, jquery.ui.theme.min.css, jquery.ui.caccordion.min.css, jquery-1.8.3.min.js, jquery-ui-1.9.2.accordion.custom.min.js).
    I see a section in jquery-ui-1.9.2.accordion.custom.min.js where I think I might be able to change these settings, but I just want to make sure.
    options:{active:0,animate:{},collapsible:!1,event:"click"
    Thanks in advance for any suggestions.

    Yes, setting collapsible to true (so all sections can collapse at once) and then setting no section as active, it will start completely collapsed, e.g.:
    $( ".accordion" ).accordion({collapsible:true,active:false});
    Do note this is being applied to a container element with the "class" of 'accordion' and not the ID, per your code. If it's ID then use:
    $( "#accordion" ).accordion({collapsible:true,active:false});

  • How can I make the spry accordion remember the panel open when I refresh the page or jump to a new page?

    How can I make the spry accordion remember the panel open
    when I refresh the page or jump to a new page?
    I am using the accordion feature on all my pages as a
    navigation aid. It has three panels. When you refresh the page the
    panel goes back to the default pane... Is there a way of
    controlling this so that the browser can remember the pane that is
    open (say set a variable, cookie, other?)

    Look for "Set the default open panel" on the following page:
    http://labs.adobe.com/technologies/spry/articles/accordion_overview/index.html
    Keep in mind you would need to change that bit of code on
    every page. The only way to do it more dynamically would be to
    include a custom javascript or PHP/ASP style script in order to
    change the value.

  • How can I use the accordion panel widget with a footer?

    Hi,
    My question is may be not clear. So I'm gonna be more specific. I'm using a menu for my website with the accordion panel widget. The menu is working fine and when I'm opening it, it pushs the items below on the pages.
    My problem is with the footer of the page. Because, when the items below the widgets are pushed, they go below the footer and the footer is not pushed.
    Is there any way to pushe the footer when I use the accordion widget? I don t want to overlap it.

    I assume this is what you want to achieve in the footer....
    Make sure in Muse before you export that the panel is closed, and also as Brad suggested, make sure Overlap Items Below is unchecked. I would also check the "Can Close All" button.

  • 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

  • Globally open and close all accordion panels

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

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

  • Using text links to open accordion panel

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

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

  • Anchor links to accordion panels not working properly across browsers

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

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

  • Accordion Panels not collapsing in Adobe AIR

    Hi,
    I'm trying to create an AIR application with HTML/CSS/AJAX (spry).
    I've got my xml dataset set up and my accordion panel widget set up.
    When I preview in Safari everything works fine, but when I preview in Adobe AIR the xml data shows up and the panels, but the accordion panels aren't working, clicking on the AccordionPanelTab doesn't do anything.
    Any ideas on how to fix this, (if it is even possible)??

    Here is the code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns:spry="http://ns.adobe.com/spry">
    <head>
    <link href="_Assets/css/main.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="_Assets/frameworks/AIRAliases.js"></script>
    <script src="_Assets/spry/xpath.js" type="text/javascript"></script>
    <script src="_Assets/spry/SpryData.js" type="text/javascript"></script>
    <script src="_Assets/spry/SpryNestedXMLDataSet.js" type="text/javascript"></script>
    <script src="_Assets/spry/SpryAccordion.js" type="text/javascript"></script>
    <script type="text/javascript">
    var dsSeasons = new Spry.Data.XMLDataSet("http://www.tvrage.com/feeds/episode_list.php?sid=21704", "Show/Episodelist/Season", {sortOnLoad:"@no", sortOrderOnLoad:"descending"});
    var dsEpisodes = new Spry.Data.NestedXMLDataSet(dsSeasons, "episode", {sortOnLoad:"seasonnum", sortOrderOnLoad:"descending"});
    dsSeasons.setColumnType("@no", "number");
    function airdate(region, lookupFunc) {
    var realdate = lookupFunc("dsEpisodes::airdate");
    var array = realdate.split('-');
    return array[2] + " - " + array[1] + " - " + array[0];
    function seasonnr(region, lookupFunc) {
    var nr = parseInt(lookupFunc("dsSeasons::@no"));
    if (nr < 10) { return "0" + nr; }
    else { return nr; }
    </script>
    <link href="_Assets/spry/SpryAccordion.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrapper">
    <div id="main">
        <h1>TV Show Title</h1>
        <div id="showInfo" spry:region="dsSeasons dsEpisodes" class="SpryHiddenRegion">
            <h2>Episode List</h2>
                <div id="eplist" class="Accordion">
                    <div spry:repeat="dsSeasons" class="AccordionPanel">
                        <h3 class="AccordionPanelTab">Season {@no}</h3>
                        <div class="AccordionPanelContent">
                            <table spry:repeatchildren="dsEpisodes">
                                <tr class="{dsEpisodes::ds_EvenOddRow}">
                                    <td><input name="seen" type="checkbox" value="1" /></td>
                                    <td>{function::seasonnr}<span class="ex">x</span>{dsEpisodes::seasonnum}</td>
                                    <td>{function::airdate}</td>
                                    <td><a href="{dsEpisodes::link}" target="_blank">{dsEpisodes::title}</a></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
                    var acc = new Spry.Widget.Accordion("eplist", { useFixedPanelHeights: false });
                </script>
            </div>
        </div>
    </div>
    </body>
    </html>
    Sorry, I don't have an online url for you, I'm still working locally.
    In the browser everything works fine, only when I preview in Adobe AIR the panels stop working.
    I hope you can figure it out and point me in the right direction.
    Thanks

  • Accordion Panels and List Menu don't work if I place html files in subfolders

    Hi all,
    Switched from Dreamweaver to Muse and I have very limited knowledge of code.
    Not an IT expert and not a web developer this is just for my own site.
    I have sub-folders in my site. All html files are inside sub-folders except index.
    ie contact.html or products.html I move them manually from root to the subfolder, using the easy interface of Dreamweaver. I call the subfolder "en"
    so I can have pages such as mysite.com/en/contact.html
    In the subfolder I copy and paste from  root the css, images and script folders,
    keeping the original css/images/scripts as well, in the root, so index.html is not affected.
    and same time the look of the html pages inside the subfolders does not change.
    BUT
    list menus and accordion panels don't work. I click and there is no movement
    How can I solve this ? I know Muse does not allow the creation of subfolders,
    everything is uploaded in the root.
    When in Dreamweaver I had placed 50 pages in subfolders and I was indexing them in google and bing.
    Now can't again put 50 pages in root and can't remove URLs and make new indexing for all these pages
    Any help ? many thanks for any assistance.

    The iPhone, like the Ipad, uses the Mobile Safari browser, so here's an earlier thread that might give you some insight: http://forums.adobe.com/thread/613494

  • 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;

  • Adding dynamic content to accordion panels

    Hello,
    and thank you in advance for any help.
    I need to make a new web page for my girlfriend. She's a
    photographer which means she needs to update her page pretty often.
    The usual small systems however were way too complicated for her.
    After seeing Spry, I decided to use it, along with Relay
    which gives an easy option for updating content. So here's my plan:
    - I install Relay so she has sort of a back-end to update her
    pictures.
    - I have a php script which reads out the directories and
    makes an xml file to use with spry.
    However I find it very difficult to understand how I should
    use this xml file. Additionally, she wants to have the accordion
    panels, so I have to put the code (probably the same code with only
    a different xml filename for each directory) into every panel.
    Could anybody help me with that? Please note that I haven't
    started anything yet and am right now trying stuff locally.
    Thank you again.
    Mete

    Hello again,
    I'll try to describe the case once again, this time more
    clearly:
    - I will install Relay onmy server to enable uploading
    pictures. Relay stores the upload pictures in different directories
    which are created by the user and the path to each directory is
    known.
    - A PHP-Script reads out the content of these directories
    (names, paths etc) and gives a list as an XML-File.
    What I want to do is:
    Make an HTML-Page and use Spry Accordion Panels in it.
    Let's say I have 5 panels. Each panel (in itself) shall use
    the XML-file (one file per directory) to display the pictures. The
    styling will be made by using the CSS.
    My problem is:
    I just can not figure out how to use the regions etc in Spry.
    I have to admit that so easy it is to use, it 's also pretty
    difficult to understand the logic behind it for non-skilled users
    (especially for those who do not have Dreamweaver etc). I can't
    find the answers to my questions like: Why do the datasets get the
    prefix "dsXXXX"?
    I only want to read the XML-File and display these pictures
    in an Accordion Panel without floating, which means it has to
    scroll left and right.
    I hope this makes it easier to understand :)
    Thank you once again!
    Mete

  • Problem with Accordion Panels

    Hi
    I have an issue with Accordion Panels.
    http://characteraday.businesscatalyst.com/guided.html
    You can see in the link above that I have Accordion Panels on the right side that say open/close tip. The first one open and close and displays the tip. All the others do the same but when they open then push the one under it down. The first one does not do this and I like this a lot better. Any ideas how to make them all work the way the first one "Enter the Character's name" works.
    Thanks for your time.

    Modify the following line by adding the mark-up coloured red.
                      <div class="AccordionPanelContent"><span class="CollapsiblePanelContent"><img src="productimages/tinyimages/doorkitseat.jpg" width="50" height="50">The <strong>Door Insert Kit</strong> is a bathtub conversion kit. By   removing a portion of the bathtub wall and inserting a door, an existing bathtub becomes accessible, retaining its use a a bathtub. <em><a href="doorkitandseat.html"><strong>More</strong></a></em></span></div>
    I hope this helps.
    Ben

  • 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"><!-- end of site_title -->
          <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> <!-- end of header -->
        <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> <!-- end of banner -->
        <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 &amp; 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&ntilde;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&ntilde;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> <!-- end of menu -->
        <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&oacute;n</div>
                                <div class="AccordionPanelContent"> <a href="/pdf/forms/registrar/register/Guide_Voting_SPAN.pdf" target="_new">Gu&iacute;a para Votar</a> <a href="/registrar/national_vrc_notice_sp.htm">Insc&iacute;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&iacute;a Oficial  Informaci&oacute;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> <!-- end of left_sidebar -->
            <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> <!-- end of content -->
           <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> <!-- end of right_sidebar -->
            <div class="cleaner"></div>
        </div> <!-- end of content_wrapper -->
    </div> <!-- end of wrapper -->
    <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> <!-- end of footer -->
    </div> <!-- end of footer_wrapper -->
    <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.

Maybe you are looking for