Accordion widget in document template

I'm trying to design my site using an accordion widget for my
left-side navigation bar: each tab is a product category and when
you click it, it shows all the subcategories. When I was working on
just the index page, the accordion worked fine every time I checked
it in Internet Explorer. But then I changed my document into a
template, making the left-side bar a non-editable region, and
created 5 or 6 pages off of the template. Now, when I'm in
dreamweaver looking at any of those 6 pages, I can click the
non-editable accordion tabs to see the content, but when I check it
in either IE or firefox, the accordion tabs will not open, all
except for the last tab on the bottom which opens just fine.
Does anybody have any idea why this would happen?
Is it possible to use an accordion widget as my left-side
navigation bar?
Thanks in advance!

There would be no a prioi reason that I can think of that
would prevent you
from having such things in your Template. Can you post a link
to one of
these pages?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"paxbaby" <[email protected]> wrote in
message
news:g4n5na$l1q$[email protected]..
> I'm trying to design my site using an accordion widget
for my left-side
> navigation bar: each tab is a product category and when
you click it, it
> shows
> all the subcategories. When I was working on just the
index page, the
> accordion worked fine every time I checked it in
Internet Explorer. But
> then I
> changed my document into a template, making the
left-side bar a
> non-editable
> region, and created 5 or 6 pages off of the template.
Now, when I'm in
> dreamweaver looking at any of those 6 pages, I can click
the non-editable
> accordion tabs to see the content, but when I check it
in either IE or
> firefox,
> the accordion tabs will not open, all except for the
last tab on the
> bottom
> which opens just fine.
> Does anybody have any idea why this would happen?
> Is it possible to use an accordion widget as my
left-side navigation bar?
> Thanks in advance!
>

Similar Messages

Prefill widget using document template

Hi All,
We are building a website in which customers fill user friendly forms and sign a W-9 and other documents in an echosign widget. We are going to use document templates to generate the widget for users to sign.
What property do I need to set at a field level in order for the field to be pre-filled in the widget and customers will only sign?
role: prefill by sender or field type read-only or neither
Thanks

Correct in regards of using mergfieldInfo. and tags.
prefill is a specific term referring to manually (pre) filling a form, which is indeed not possible with widgets.
You are referring to mergeing formfield data from another system, which is perfectly possible using the mergfieldInfo parameter.
in terms of tags the main concern is the name of the field and whether or not you set the field read only for the signer.

SPRY accordion widget IE8 ONLY issue

hello everybody,
i noticed a strange "jumpy" behavior while using the spry accordion widget -- this affects IE8 only (currently using 8.0.6001.18882 on vista), other browsers (including IE7 and IE8 forced into IE7 mode) work as expected. this issue seems to be related to the margin property of the accordion container...
not shure whether this behavior is related to IE rendering or the spry javascript code itself... anyway i made NO changes to the spry script (my version is 0.15, 1.6.1, which i believe to be most recent one).
the xhtml (strict) and css are perfectly valid (there might be some MINOR css hacks which are not related to the accordion itself). i do NOT use ANY padding on the inner container of the accordion (which would definetely make the spry js count the tween in odd way). the accordions (especially the main menu on the left) are little more complex, but they were built according to the spry widget document, found on the adobe spry website.
so, here it is -- check the accordion on the left side (the bug seems to happen almost always while opening/closing the last BLUE "section" of the accordion, please play with the accordion for a while to reproduce it -- while the accordion closes, it "loses" it's bottom margin (i guess), what's even more wierd, everything gets back to place after you move a mouse):
http://www.prazskematky.cz/home.php
PLEASE NOTICE: since the website is still under development and i'm using a IE meta tag to force it into IE7 rendering, to reproduce this behavior please be shure to switch IE engine to IE8 standards mode
well, we all now how IE handles css... so it's propably an IE bug -- anyway if you have encountered a similar issue of even better found a fix, please let know. (i don't consider a fix switching to another js library, i would like to use the spry, because of it's DW integration)
many thanks,
p.s.

ross m. greenberg wrote:
> Now however the entire .gif is not appearing in the
accordion panel is expanded. I insert the graphic using a standard
"menu insert/graphic/browse and select"
>
> the graphic file is not showing up properly on such an
insert...
Are you referring to what it looks like in Design view? If
so, that's
correct. Accordion panels have a fixed height. From memory, I
think it's
200px. However, if you test the page in a browser, you should
see a
scrollbar automatically generated on panels that have content
that
exceeds the height of the panel.
If you want flexible-height panels in the accordion, you need
to adjust
both the CSS and the script that initializes the accordion. I
have
covered all the details in my "Essential Guide to Dreamweaver
CS3" (and
the forthcoming CS4 edition). You can probably find online
tutorials as
well. Try a Google search for Spry flexible height accordion.
The accordion widget has been around since CS3, and it hasn't
changed in
CS4, so a Google search should bring up a lot of information.
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

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" />

<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" />
    
</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>
</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>
</div>
<br class="clearfloat" />
<div id="footer">
    <p>© 2009 Luxury Yachts – bring a cup for the bailout</p>
</div>
</div>
<script type="text/javascript">

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

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>

<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

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

</script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="right" style="float:right;width:200px;"><img src="images/gwt.jpg" width="180" height="273" alt="large" /></div>

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

</script>
</body>
</html>
Regards,
Vinay

Accordion widget crashing Muse after 3-4 articles adding attempt.

Hi! I made in MUSE web design and have BC web Marketing plan.
I must put in one page at least 12 long articles in 12 different languages like there are: Манифест
In fact - accordion widget crashing Muse after 3-4 articles adding attempt.
In blog module not possible to use something like Read More!
Can you advise me?
Thank you!

How exactly you are adding documents to accordion widget ?
Regarding read more , in Blog list layout you can use {tag_blogpostbodypreview,Text} where the text can be "Read More", this tag will Display a preview of the first paragraph of your blog post. Replace "Text" with the relevant words to link to see the entire post.
Thanks,
Sanjit

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.

The Create List Item workflow action does not work in document library with document template

My end goal is more complex but below is a basic example of the issue I’m having that just simply does not work.
I'm trying to use a site workflow to create an item in a document library that has a document template applied to it but the file that gets created by the workflow is corrupt and cannot be opened.
I created a document library and edited the document template by adding some text to the header and changing it to a Word docx file instead of a Word dotx file. I tested the document template by clicking the files tab in the ribbon and then clicking new
document which opens the document template in Word and allows me to edit and save the document back to SharePoint. Then I created a SharePoint 2013 site workflow in SharePoint Designer that contains a single Create List Item action, and that action creates
an item in the document library with the name field statically defined. I published the workflow and then manually start it on the site. The workflow completes successfully and when I navigate to the document library the document has been created by the workflow.
When I click on the document to open it in the Word Web App it throws the error pictured below and if I open it in the Word client application it just opens a blank document and not the correct document template.
I also tried using a SharePoint 2010 workflow with pretty much the same results. Opening the document in Word Web App gives the same error as above and opening the document in the Word client application gives the error pictured below.
Come on Microsoft creating a Word Document in a SharePoint Document Library from a SharePoint Workflow should just work! Is this a bug or does anyone have any ideas on what is causing the this issue?

I had the same problem with corrupted document - this worked for me:
1. Create a 2010 Workflow which creates the list element in a document library
(you may start this workflow from your 2013 workflow if applicable)
2. In the Create New List Item properties - make sure to set ContentTypeId to your content type
("Id for indholdstype" is Danish for "Contenttype ID")
3. Your Content Type template should be a ".docx" file - NOT a ".dotx" file...!
(I have always created my templates for content types as .dotx files - seems Microsoft wants us to use ordinary .docx files as template files for content types)
Hope this helps you!

Open an accordion widget in the closed state?

I have searched the forums but have yet to find a resolution
for this issue. I am using an accordion widget and would like for
all of my panels to appear closed when the page initially loads.
Only once the user has clicked the tab do I want the panels to
open. Any suggestions that do not require me to buy a separate plug
in? Thanks.

This is directly from the Adobe documentation:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#AllPanelsCl osed
However, one thing to keep in mind is that this is assuming
that you are using the 1.6.1 update (as that is what the references
refer to). If you have never updated your Spry this would be a good
opportunity to do so. The below is the to the official Spry
homepage. There you will find the update package which includes
some samples and an Extension. Install the extension and restart
DW. Then under the Sites menu you will see a new option to update
Spry. Run that script and your Spry will be updated. Also on that
homepage is a link to the official Spry forums:
http://labs.adobe.com/technologies/spry/home.html

How To Add Line Items to Workflow Document Template

Hi Gurus,
ive made a Workflow which has few containers referencing VBKPF, VBSEGS, and constructed two methods which one of them gets the table VBKPF data into MyStructure and the second the data into MyStructure2.
Inside of the workflow i made two container operations and assigned those two methods to VBKPF and VBSEGS containers.
The Problem is that VBSEGS is a (multi) line item table and it doesnt show me the data inside of the document template.
What could be the solution for this scenario
Thanks, Points for Reward

Hi,
i checked the swo1 methods and it looks good. I didnt change the binding that ive implemented, and some values are getting showed, but still they do not correspond to the BO element (concerning Acct.Doc.Nr)
My binding is:
Display Document Task:
#######Workflow -> Step Display Parked Doc
**************BO FIPP -> &_WI_OBJECT_ID&
#######Workflow <- Step Display Parked Doc
**************Empty
Document Template:
#######Workflow -> Step Create Doc From Template
**************&_WORKITEM& -> &FLOWITEM&
**************DC8BA2ADFCEA4EF18D2F00145EDCE7A4 -> &TEMPLATE&
#######Workflow <- Step Create Doc From Template
**************&WF_DOCUMENT_0001& <- &_WI_OBJECT_ID&
**************&_WF_INITIATOR& <- &_WI_ACTUAL_AGENT&
As ive explained earlier i have a Container VBSEGS with abap table vbsegs, which is filled using method ReturnMe2 with MyStruct2 structure.
Regards
Laurynas Prikockis

Is there a way to force a user to view all of Accordion Widget?

Is there a way to force a user to read, or at least view,
all sections of the Accordion Widget? We want to make sure the learner reads
all of the material before advancing to the next slide. Is there a way to do
this? I have searched all over, but I have been unable to find.

No way. This is a static learning interaction, no event that could be used eventually. Personally I prefer offering reading material that is engaging over looking for a way to push the learner to look (reading doesn't mean he understands or grabs it) at all the stuff. But that is my teacher's past, if student doesn't read your stuff, something is wrong with the stuff, not with the student.
If you have to force, you'll have to find another way than the accordion interaction .

How do I add a new panel to the accordion widget in-between two others (NOT at the end)

In the accordion widget, the + button at the bottom adds a new panel to the end. I have a series of panels that are in alpha-sort and need to add a new panel in the middle... I can't figure out how to do it without re-doing the whole thing. is there a way to do this?

Gah! Thanks Mac.
That was the first thing I tried! I must not have had the right level selected. It's been driving me batty, but I've got it now.

Accordion widget in document template

Similar Messages

Maybe you are looking for