Accordion Widget functionality

Hello. I need the accordion widget to activate on mouse over instead of mouse click. Is this possible? If not, is this a feature that will be added in the future?

Thanks for the response Kin!
I am setting up the links like you suggested, placing the
link inside the AccordionPanelTab, however, the problem isn't
getting the link to intercept the clicks, it's getting the link to
perform their default action. In the SpryAccordion.js file, on line
223, the default action of the tab's contents is being disabled.
This means that, regardless of whether or not there is a link
inside the tab, it will still act only as a tab (unless I'm missing
something). The code looks like this:
if (e.preventDefault) e.preventDefault();
If one adds:
e.preventDefault = false;
before the code on line 223, the problem is solved. The
problem with that solution is, if I go in and add that line of
code, I have to remember that change and where it was for all
future updates of the Spry widgets. So my question is, is there a
way to disable preventDefault so that default actions of, in this
case, links are enabled? Can this be done without editing the
Accordion Widget's Javascript file?

Similar Messages

  • Accordion widget - moving sections

    Is it possible to move the sections in the accordion widget? I want to move the last section to the top of the accordion.

    I did offer you two work flows to have images on top of question slides. I don't think they'll change the design of question slides (following the basic SCORM defined types), has been the same since many, many versions. But you can now more easily create custom question slides than ever before with learning interactions, variables and shared actions. Your idea of 'basic functionality' is maybe not the same for the majority of users
    You could log some feature requests, if you want to have impact on changes for the future. Personally I don't feel that the change to a learning interaction is such a basic functionality. Every application has its proper ways, and Captivate is certainly not an exception.

  • Accordion widget browser panel height

    I am using the accordion widget browser and would like to shorten the height of the
    panels - how can I do this...

    I found the solution!
    Sample of before: www.muohio.edu/lll/studyabroadweek/index2.html
    Sampe of after: www.muohio.edu/lll/studyabroadweek.
    The solution was at: http://docs.jquery.com/UI/Accordion#options  but was a bit difficult for me to figure out how to implement it... after a bit of experiment - I got it!
    In your .html document, at the beginning of the widget look for the code in black.  Code in bold red is what was needed to solve the issue.
    $(function(){
                    // Accordion
                    $("#jQueryUIAccordion").accordion({ header: "h3",
                                                animated: "slide",
                                                event: "click",
                                                collapsible : "false",
                                                autoHeight: false

  • Spry Accordion widget

    Have a Dreamweaver question about the Spry Accordion widget.
    I am designing a website for a real estate company. I will have different pages set up as a state page with a sub-level of cities within the page. I am using the accordion widget for the cities. As you know, you click on the panel tab and the next panel drops up or down closing/opening the previous panel.
    What I would like to do is add an action anchor (view all properties) outside the spry widget to open all the panels at once if a client wanted to see the entire list. However, I would still want the functionality of the panels to be collapsible. Is this possible? Is there a bit of code restructuring I would have to do to the JavaScript?

    Try
    <!DOCTYPE html>
    <html>
    <head>
    <title>Untitled Document</title>
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
    <style>
    .openit .AccordionPanelContent {
      display: block !important;
      overflow: visible !important;
      height: auto !important;
    </style>
    </head>
    <body>
    <a href="#" class="openAll">open all</a> - <a href="#" class="closeAll">close all</a>
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 1</div>
        <div class="AccordionPanelContent">Content 1</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 2</div>
        <div class="AccordionPanelContent">Content 2</div>
      </div>
    </div>
    <script src="SpryAssets/SpryAccordion.js"></script>
    <script src="SpryAssets/SpryDomUtils.js"></script>
    <script>
    function MyOpenAllEventHandler() {
        Spry.$$("#Accordion1").addClassName("openit");
    function MyCloseAllEventHandler() {
        Spry.$$("#Accordion1").removeClassName("openit");
    Spry.$$(".openAll").addEventListener("click" , MyOpenAllEventHandler, false);
    Spry.$$(".closeAll").addEventListener("click" , MyCloseAllEventHandler, false);
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    </script>
    </body>
    </html>
    The "!important" on these rules is necessary because the Accordion  widget places inline styles on the actual AccordionPanelContent elements  when opening and closing them. Since inline styles have a higher CSS  specificity then CSS class rules, "!important" is necessary to "trump"  the inline styles.
    Gramps

  • DW Tutorial Question (Spry Accordion Widget) Beginner... :-(

    Hi, I've just finished this tutorial (http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html) but have a problem with my Spry Accordion Widget, when I preview the site my footer moves when I select a different panels in the widget, I've read back and checked code/css but I still can't sus it out (Don't laugh if it's something obvious!) Please can anyone help me? I've copied code/CSS below.
    A BIG THANKS IN ADVANCE!!
    INDEX...
    <!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>The Yacht Club</title>
    <link href="main.css" rel="stylesheet" type="text/css" />
    <!--[if IE 5]>
    <style type="text/css">
    /* place css box model fixes for IE 5* in this conditional comment */
    #sidebar1 { width: 230px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css">
    /* place css fixes for all versions of IE in this conditional comment */
    #sidebar1 { padding-top: 30px; }
    #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
      <div id="header"><img src="images/logo.jpg" width="290" height="144" />
        <!-- end #header -->
      </div>
      <div id="sidebar1">
        <h3>Welcome</h3>
        <ul id="nav"><li><a href="javascript:;">Home</a></li><li><a href="javascript:;">About Us</a></li><li><a href="javascript:;">Membership</a></li><li><a href="javascript:;">Our Boats</a></li><li><a href="javascript:;">Current Races</a></li><li><a href="javascript:;">Contact Us</a></li>
        </ul>
        <div id="Accordion1" class="Accordion" tabindex="0">
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Atlantic Ocean</div>
            <div class="AccordionPanelContent">Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div>
          </div>
    <div class="AccordionPanel">
            <div class="AccordionPanelTab">Pacific Ocean</div>
            <div class="AccordionPanelContent">Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Indian Ocean</div>
            <div class="AccordionPanelContent">Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div>
          </div>
        </div>
        <p> </p>
      <!-- end #sidebar1 --></div>
      <div id="mainContent">
        <h1> Luxury Yachts</h1>
        <p><img src="images/sailboat.jpg" alt="Sailboat" width="136" height="310" class="fltrt" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
        <h2>Sail to the Bahamas </h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    <!-- end #mainContent --></div>
    <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
      <div id="footer">
        <p>&copy; 2009 Luxury Yachts – bring a cup for the bailout</p>
      <!-- end #footer --></div>
    <!-- end #container --></div>
    <script type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    //-->
    </script>
    </body>
    </html>
    MAIN CSS...
    @charset "UTF-8";
    body  {
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    background-color: #FDFDFD;
    background-image: url(images/body_BG.jpg);
    background-repeat: repeat-x;
    h1, h2, h3 {
    font-weight: normal;
    color: #00583F;
    h1 {
    font-size: 140%;
    h2 {
    font-size: 130%;
    h3 {
    font-size: 120%;
    #container {
    width: 780px;
    margin: 0 auto;
    text-align: left;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-image: url(images/container_bg.gif);
    background-repeat: repeat-y;
    #header {
    background-color: #DDDDDD;
    background-image: url(images/headerBG.jpg);
    background-repeat: no-repeat;
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 0px;
    #sidebar1 {
    float: left; /* since this element is floated, a width must be given */
    width: 200px; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 15px 10px 15px 20px;
    ul#nav {
    background-image: url(images/buoy.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 153px;
    padding-left: 0px;
    list-style-type: none;
    #nav li a {
    font-size: 90%;
    color: #FFF;
    text-decoration: none;
    background-color: #09553F;
    display: block;
    padding: 4px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #3574A7;
    #nav li a:hover, #nav li a:active, #nav li a:focus {
    color: #123464;
    background-color: #B7DAD8;
    #mainContent {
    margin: 0 0 0 250px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    #mainContent p, #sidebar1 p, #footer p {
    font-size: 85%;
    line-height: 1.4;
    #footer {
    background-color: #00593D;
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 270px;
    #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    color: #FFF;
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    SPRY CSS...
    @charset "UTF-8";
    /* SpryAccordion.css - version 0.4 - Spry Pre-Release 1.6.1 */
    /* 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 {
    overflow: hidden;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #7C9297;
    border-bottom-color: #7C9297;
    border-left-color: #7C9297;
    /* 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.
    * NOTE:
    * This rule uses -moz-user-select and -khtml-user-select properties to prevent the
    * user from selecting the text in the AccordionPanelTab. These are proprietary browser
    * properties that only work in Mozilla based browsers (like FireFox) and KHTML based
    * browsers (like Safari), so they will not pass W3C validation. If you want your documents to
    * validate, and don't care if the user can select the text within an AccordionPanelTab,
    * you can safely remove those properties without affecting the functionality of the widget.
    .AccordionPanelTab {
    background-color: #00583F;
    margin: 0px;
    padding: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    color: #FFF;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #7C9297;
    border-bottom-color: #7C9297;
    /* 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;
    height: 200px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    /* 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: #FFF;
    color: #005b3E;
    /* 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: #AAC7CE;
    .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: #00583F;
    color: #FFF;
    /* 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: #FFF;
    color: #00583F;
    Apologies in advance if I'm asking a daft question!!

    Hi,
    using your source code, I couldn't find a really inserted "Spry Accordion". If I do that (translated from german DW) > Insert > Spry > Spry Accordion, I'll find in my DW source code something like that:
      <div id="Accordion1" class="Accordion" tabindex="0">
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">Bezeichnung 1</div>
          <div class="AccordionPanelContent">Inhalt 1</div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">Bezeichnung 2</div>
          <div class="AccordionPanelContent">Inhalt 2</div>
        </div>
      </div>
    and in design view:
    Please control your DW-entries.
    Hans-G.

  • Automatically Animating Spry Accordion Widget on Page Load

    I've been searching and searching and still can't find a clue
    as how to make the Spry Accordion Widget automatically open the
    next panel. I want the panels to expand automatically and loop back
    at the last panel.
    Do I need to create another function for this or is there
    already a function created in the .js file?
    Any help is appreciated...even if you can point me in the
    right direction.
    Thanks!

    DeviseInnovations wrote:
    > I've been searching and searching and still can't find a
    clue as how to make
    > the Spry Accordion Widget automatically open the next
    panel. I want the panels
    > to expand automatically and loop back at the last panel.
    >
    > Do I need to create another function for this or is
    there already a function
    > created in the .js file?
    >
    > Any help is appreciated...even if you can point me in
    the right direction.
    Sounds more like you'd want sliding panels:
    http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
    I've seen an automatic version created that might do what you
    want:
    http://www.3rd-eden.com/Spry-it.com/examples/slidingpanelsautomatic/
    But if you really want an Accordion, then you might be able
    to adapt the code in the auto sliding panels above.
    FYI: There's a Spry forum that would be better to post Spry
    related question in:
    http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
    Danilo Celic
    |
    http://blog.extensioneering.com/
    | WebAssist Extensioneer
    | Adobe Community Expert

  • Firefox Spry Accordion widget

    Firefox Spry Accordion widget
    Hello, I am trying to use Spry Accordion  widget. When I click one of the other panels they all turn a strange  neon blue color. Anyone know of any fixes?
    The below is the index page and below that is SpryAccordion.css
    index
    <!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>Conferences</title>
    <script src="SpryCollapsiblePanel.js"  type="text/javascript"></script>
    <script src="../SpryAssets/SpryAccordion.js"  type="text/javascript"></script>
    <link href="SpryCollapsiblePanel.css" rel="stylesheet"  type="text/css" />
    <link href="css.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    </style>
    <link href="../SpryAssets/SpryAccordion.css" rel="stylesheet"  type="text/css" />
    </head>
    <body>
    <div id="outside">
    <div id="outsideone">
    <div id="CollapsiblePanel1" class="CollapsiblePanel">
    <div class="CollapsiblePanelTab" tabindex="0">Tab</div>
    <div class="CollapsiblePanelContent">
    <p>Content ssss</p>
    <p>lkajsdfl</p>
    </div>
    </div>
    <script type="text/javascript">
    var CollapsiblePanel1 = new  Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
    </script>
    <!--   This is commented out  -->
    <div id="photo"></div>
    <div id="contentholder">
    <div id="contentsone"> <div id="moreone">
    <div id="Accordion1" class="Accordion" tabindex="0">
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
    </div>
    </div>
    </div> <div id="insidecontentsone"></div></div>
    <div id="lineone"> </div>
    <div id="contentstwo"> <div id="moretwo">
    <div id="Accordion2" class="Accordion" tabindex="0">
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
    </div>
    </div>
    </div>
    <div id="insidecontentstwo"></div></div>
    <div id="linetwo"> </div>
    <div id="contentsthree"> <div id="morethree">
    <div id="Accordion3" class="Accordion" tabindex="0">
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
    </div>
    </div>
    </div><div id="insidecontentsthree"></div></div>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", { defaultPanel:  1 });
    var Accordion2 = new Spry.Widget.Accordion("Accordion2", { defaultPanel:  1 });
    var Accordion3 = new Spry.Widget.Accordion("Accordion3", { defaultPanel:  1 });
    </script>
    </body>
    </html>
    SpryAccordion.css
    @charset "UTF-8";
    /* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
    /* 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 {
    overflow: hidden;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-right-color: none;
    border-bottom-color: none;
    border-left-color: none;
    background-image: url(white.png);
    background-color: none;
    border-top-style: none;
    /* 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;
    background-image: url(white.png);
    /* 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.
    * NOTE:
    * This rule uses -moz-user-select and -khtml-user-select properties to  prevent the
    * user from selecting the text in the AccordionPanelTab. These are  proprietary browser
    * properties that only work in Mozilla based browsers (like FireFox)  and KHTML based
    * browsers (like Safari), so they will not pass W3C validation. If you  want your documents to
    * validate, and don't care if the user can select the text within an  AccordionPanelTab,
    * you can safely remove those properties without affecting the  functionality of the widget.
    .AccordionPanelTab {
    background-color: #CCCCCC;
    border-top: solid 1px black;
    border-bottom: solid 0px gray;
    margin: 0px;
    padding: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    background-image: url(white.png);
    /* 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: 200px;
    background-image: url(white.png);
    /* 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: #none;
    background-image: url(white.png);
    /* 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;
    background-image: url(white.png);
    .AccordionPanelOpen .AccordionPanelTabHover {
    color: none;
    background-image: url(white.png);
    /* 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: none;
    background-image: url(white.png);
    /* 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: none;
    height: 15px;
    background-image: url(white.png);
    /* Rules for Printing */
    @media print {
    .Accordion {
    overflow: visible !important;
    background-image: url(white.png);
    .AccordionPanelContent {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    background-image: url(white.png);

    Welcome to the Forum!
    If you can upload your page to a server and give us a link, we will be able to look at your page in action. Just seeing the code is not enough.
    Is this the first time you have used an Accordion? It is probable that the bright neon blue you are seeing is the default style, which you can change in the CSS file. I believe it was designed that color to highlight the feature you want to change .
    Take a look in the Accordion's CSS file (it will show as an associated file at the top of your document window) for color rules, and adjust them to suit your palette (and your palate!). Check out the CSS Styles Panel (use Current mode) for a handy way to know what you are looking at. Click on the Accordion in Design View and the rules will be highlighted in the CSS Styles Panel. (Click the right-hand stair-step icon to see the style cascade.)
    Beth

  • Spry Accordion Widget Behavior

    I am using Dreamweaver CS3 and several Spry components. I am new to using Spry, but like how easy it is to impliment. One of the components I am trying to use is the Accordion Widget. The widget appears to function well (I am using variable panel heights) and the behavior appears as designed.
    I am using the panel containers to list links to additional pages based on subject groups.
    My question involves moving back and forth from the widget page to a listed pages, then back to the widget page.
    The behavior I see is:
    1)      User loads widget page, widget panel 1 is expanded onload.
    2)      User expands different panel.
    3)      User clicks URL link within different panel.
    4)      User moves to new page (referenced URL page).
    5)      User reviews content, decides it is not appropriate and wants to select another URL.
    6)      User clicks the browser “back” button and returns to the widget page.
    7)      Widget page onload returns to expanded panel 1.
    Is there a way for me to tweak the JavaScript so that the user returns to the expanded panel they left rather that panel 1? Is panel 1 always going to be the panel that opens on page load? (Unless I have the settings set to no expanded panes on page load.)
    Thanke you for any suggestions.
    TPK

    Greetings Arnout,
    Sorry for the late reply. (Side-tracked with other work.)
    I have a "outside-the-firewall" review area almost complete if you still have time to look at my code.
    After testing several browsers and 2 platforms I have found that my problem is likely not with your code at all, but with small modifications that I have had to do to it. For example, I will need to have 2 separate Accordion blocks on the page I am developing.
    When I drop Dreamweaver generated Spry code into the page the <div class="Accordion" ID="Accordion1"> is created (which suits my future needs, the additional block will have <div class="Accordion" ID="Accordion2">. I noticed that your code uses <div class="Accordion" ID="sampleAccordion">.
    If I go through the cookie code and change all references of "sampleAccordion" to "Accordion1" the code breaks. I am missing something and haven't been able to find it.
    Additionally, I noticed something odd when testing the widget. When testing using a Mac (Safari and Firefox) it appeared I didn't need the cookie code at all. The unmodified Dreamweaver Spry code appeared to hold the value of the launch panel when I moved from my launch page, to my receiver page, then back to my launch page.
    This wasn't the case with Windows IE and Firefox. IE 6 appears broken onLoad, IE 8 and Firefox breaks when I go back to the launch page from the receiver page. Very odd behaviors. Tonight I will load your original code on a test page and add testing notes so that I have a "control".
    The URL for the (several) test pages is: http://tim.kern.home.comcast.net/~tim.kern/
    If you have any suggestions (for modifying the cookie code to work with more than one widget on a page) I would certainly appreciat them.
    Thank you very much for the original code.
    TPK

  • Spry Accordion widget Question

    Have a Dreamweaver question about the Spry Accordion widget.
    I am designing a website for a real estate company. I will have  different pages set up as a state page with a sub-level of cities within  the page. I am using the accordion widget for the cities. As you know,  you click on the panel tab and the next panel drops up or down  closing/opening the previous panel.
    What I would like to do is add an action anchor (view all properties)  outside the spry widget to open all the panels at once if a client  wanted to see the entire list. However, I would still want the  functionality of the panels to be collapsible. Is this possible? Is  there a bit of code I would have to add to the JavaScript?
    Is there a genius out there that can hook me up with some knowledge?

    I actually did away with the accordian widget and went a different route. It was too glitchy. Thanks for your input though. I will take note of the suggestions you provided and maybe try it out one day.

  • Id like to be able to place an anchor inside the accordion widget that opens the accordion to that anchor .

    i have created a page with a very long accordion widget over 70 entries! its a staff list and the accordion rivals each persons bio. but what I need is when some clicks on a link  person name on another page I want it to go to that accordion tab and open the accordion to rival the bio

    Hi Jryan !
    If you wire a 2D array to the input of a "replace element" function, you will see that the function expand to display an additionnal index. The one you are looking for !!
    Chilly Charly    (aka CC)
             E-List Master - Kudos glutton - Press the yellow button on the left...        

  • Image Gallery with Accordion Widget.

    I have an accordion widget with link image thumbnails inside. I want to have them enlarge outside, and next to, the accordion when clicked (or hovered). I did this years ago with GoLive and can't remember how, and it's very frustrating searching the web all day when I don't know what terms to use.
    Anyone know of a simple tutorial, extension, or anything? I think I used to use a simple show/hide of layers... but it's been so long.
    Thanks.

    Hi SRK,
    Try saving following page as .html file and run it (but making certain changes to it before that)...Hope that is what you are looking at.
    1. use images and image path based on your settings
    2. I have inline style at places but that is just a short cut right now. You use external css or styles in the page <Head> only.
    3. Modify javascript to suit your behavior.
    4. Make sure your reference for Spry files (JS and CSS) are also in sync with where you save this code.
    4. Do go through the complete code to understand what is happening - In brieft here is a DIV with id ''right" used to capture the bigger images when you mouseover a thumbnail in accrodion panel. Similarly on mouseout the main image disappears (you may not need this).
    <!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>
    <style type="text/css">
    div#right {
    display:none;
    </style>
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
    <!--
    function showImage(obj) { //v2.0
    //alert(obj);
    document.getElementById(obj).style.display='block';
    //  return eval(obj)
    function hideImage(obj) { //v2.0
    //alert(obj);
    document.getElementById(obj).style.display='none';
    //  return eval(obj)
    //-->
    </script>
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <!--This DIV will contain the bigger images that keep on updating when you mouseover on thumbnails-->
    <div id="right" style="float:right;width:200px;"><img src="images/gwt.jpg" width="180" height="273" alt="large" /></div>
    <!--This is your according containing the thuumbnails-->
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 1</div>
        <div class="AccordionPanelContent"><img src="images/logo.gif" alt="image1" width="57" height="228" style="cursor:pointer;" onmouseover="showImage('right');" onmouseout="hideImage('right');" /></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 2</div>
        <div class="AccordionPanelContent"><img src="images/SNT.jpg" alt="image2" width="180" height="275" style="cursor:pointer;" onmouseover="showImage('right');" onmouseout="hideImage('right');" /></div>
      </div>
    </div>
    <script type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    //-->
    </script>
    </body>
    </html>
    Regards,
    Vinay

  • Make accordion widget open on mouseover?

    Greetings,
    I am using an accordion widget for a navigation bar and would
    really like to have the panels open when the header tabs are
    moused-over rather than when clicked. Does anyone know of a way to
    make this happen?
    I can't find anything in the Adobe Help, the css, or the js
    page that controls this function. Any help would be much
    appreciated. Here is the site I am working on:
    http://www.bikeforike.org/index2.html
    Yours, amck

    That's an automatic option in the interface for our
    Accordion:
    http://www.projectseven.com/products/tools/accordion2/examples-options/cat01-02.htm
    For adobe's widget you are better off posting on the adobe
    spry forum.
    Al Sparber - PVII
    http://www.projectseven.com
    Dreamweaver Menus | Galleries | Widgets
    http://www.projectseven.com/go/apm
    An Accessible & Elegant Accordion
    "amckinsey1" <[email protected]> wrote in message
    news:gqgsc1$70u$[email protected]..
    > Greetings,
    >
    > I am using an accordion widget for a navigation bar and
    would really like
    > to
    > have the panels open when the header tabs are
    moused-over rather than when
    > clicked. Does anyone know of a way to make this happen?
    >
    > I can't find anything in the Adobe Help, the css, or the
    js page that
    > controls
    > this function. Any help would be much appreciated. Here
    is the site I am
    > working on:
    >
    http://www.bikeforike.org/index2.html
    >
    > Yours, amck
    >

  • HTML inserted into a MUSE accordion widget issue

    In Adobe MUSE 2014.3.1.44, I have inserted an HTML snippet into a MUSE accordion widget:
    <script type=”text/javascript” src=”https://burkeauto.workstiming.com/external/next_available_time.js”></script>
    When published all I see is the clock numbers to the top left corner of the page—no other page content and no accordion—just the unformatted clock at the top left corner.
    The snippet works fine outside the accordion widget.
    When not inside the accordion the HTML frame is normal, but as soon as I insert it into the accordion it adopts the attributes like other widgets, with the round blue icon on the top right corner of the frame and a stripped down context menu.
    Adobe chat support has duplicated this on their end and suggested that I post the issue in the forum.
    Any thoughts?

    Brad,
    Thanks for helping think this through!
    First, yes, that is the whole script. There are actually two scripts (clocks) I want on a single page:
    <script type="text/javascript" src="https://burkeauto.workstiming.com/external/next_available_time.js"></script>
    <script type="text/javascript" src="https://burkeautomall.workstiming.com/external/next_available_time.js"></script>
    They can be seen properly functioning together here:  http://www.burkeauto.com/starttimes.html
    I have been requested to put the page content from the above link in an accordion widget seen here:  http://www.burkeauto.com/genuine.html
    Click on the Light Maintenance Service tab. This is where the two scripts (clocks) are to go. Currently by clicking "CLICK HERE FOR NEXT AVAILABLE START" I am linking to page with the scripts/clocks outside the accordion.
    I tried the script/clock in the accordion and publishing the site with the Light Maintenance Service tab open—still does not work.
    As mentioned in the original post, Adobe could replicate the issue, but did not offer any resolution, and the forum has been quite on my post.
    Any other thoughts?

  • Horizontally spanning Accordion widget Needed.

    Hi,
    I wonder, is there any way that we can make a Accordion
    widget spanning horizontally.
    The way its pictured here..
    Currently there are many widgets available with different CSS
    files. But not even one widget I have seen with different behavior.
    If you came across any of the widget with the above mentioned
    functionality, kindly let me know.
    Many Thanks
    KP

    Whenever the Spry team decides to ship a new version of the
    accordion and you want that new functionality you have to merge it
    yourself. I didn't make any other changes other than necessary for
    the horizontal behaviour. With a compare your will find the
    differences easily.
    I've seen a wiget builder has been released at I will try to
    make an installable widget of the horizontal accordion in teh near
    future.

  • Problem with accordion widget flashing open and shut when page loads

    why is it that my accordion widget flashes open and shut when the page is loading (see http://vincentballmusewebsite2013test.businesscatalyst.com/digital-illustration.html#.UVDr Ehx7JyII)  have tried everything to solve this, and Adobes customer service is terrible they don't get back to you when they say they will.
    Please help me someone,
    Thanks

    Thank you Zak for your help, I spent 5 hours going round in circles trying to fix that problem and that's all I needed to hear, a bit of honesty and integrity.and yes, Adobes terrible customer service has still not got back to after promising 2 level technical support to contact me last Monday, I wish there'd keep their promise
    Pamela, did you try my test website or my own website and if so my own has now no accordion widget on it and my test website may need you to try loading a few times to see if it really works or not, sometimes it does actually work even on a pc but most times not.
    thanks for you help too.

Maybe you are looking for

  • Not Getting Email Notifications

    Hi I have configured ns_emails.xml as follows. <EmailAccounts xmlns="http://xmlns.oracle.com/ias/pcbpel/NotificationService" EmailMimeCharset="" NotificationMode="EMAIL"> <EmailAccount> <Name>Default</Name> <GeneralSettings> <FromName>Oracle BPM</Fro

  • Hardware requirement for sap system.

    Hello All, i want to install SAP on my local home PC. Kindly let me know the hardware requirment for this. So that i can

  • Can't understand Error Activation

    I downloaded Adobe Digital edition 3.0 at first i can authorize my computer but i cant add the ebook that i purchased. So what i did I changed my Adobe Id and entered it again to authorize my computer It did authorize my computer but when i am adding

  • How to create Datasource in Jdev11g

    Hello, I'm testing migration from jdev1013 to jdev1111. When i want to create my datasource, i don't find the embedded OC4J option on Tools menu. Can give me one solution ? Thanks.

  • Selecting multiple rows of a table

    Hi Forum, How to select multiple rows of a table at a time? Please help me.. Thanks Swapna