Spry Widget Collapsible Panel / accordion make arrows

Similar Questions

• DW tutorial Question (accordion, Spry Widget) beginner... :-(

  Hi, I have 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 saw the my footer site moves when I select a different panels in the widget, I read back and checked code/css but I still can't extra outside (don't laugh if it's something obvious!) Please can someone help me? I copied the code/CSS below.

  THANK YOU IN ADVANCE!

  INDEX OF...

  < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 hand. CSS"rel ="stylesheet"type =" text/css"/ >

  <!-[if IE 5] >

  < style type = "text/css" >

  / * Place corrections for IE 5 css box model * in this conditional comment * /.

  #sidebar1 {width: 230px ;}}

  < / style >

  <! [endif]--> <!-[if IE] >

  < style type = "text/css" >

  / * place patches css for all versions of Internet Explorer in this conditional comment * /.

  #sidebar1 {padding-top: 30px ;}}

  #mainContent {zoom: 1 ;}}

  / * the owner above zoom gives IE the hasLayout property, 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/thanks" width = "290" height = "144" / > "

  <!-end #header->

  < / div >

  < div id = "sidebar1″" >

  Welcome < h3 > < / 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" "" " : ; "> course 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 and fermentum ut, sapien. Surpassing metus mi, eleifend sollicitudin molestie id, varius, and 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 and fermentum ut, sapien. Surpassing metus mi, eleifend sollicitudin molestie id, varius, and 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 and fermentum ut, sapien. Surpassing metus mi, eleifend sollicitudin molestie id, varius, and nibh. Donec nec libero. < / div >

  < / div >

  < / div >

  < p > < / p >

  <!-end # sidebar1″--> < / div >

  < div id = "mainContent" >

  Luxury yachts < h1 > < / h1 >

  < p > < img src = "images/sailboat.jpg" alt = "Sailboat" width = "136" height "310" = class = "fltrt" / > Lorem ipsum dolor sit amet, adipiscing elit our. " 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. Amongst ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean restore. Etiam leo queer, venenatis lectus tristique in, fitness at, odio. Donec and ipsum and vehicula nonummy sapien. Suspendisse potentialit. Surpassing varius urna id quam. SED neque mi, varius eget, tincidunt nec, so id, libero. In eget purus. Vestibule ut nisl. Donec EU mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus and fermentum ut, sapien. Surpassing metus mi, eleifend sollicitudin molestie id, varius, and nibh.  Donec nec libero. < /p >

  < h2 > sailing to the Bahamas < / h2 >

  < p > Lorem ipsum dolor sit amet, adipiscing elit our. 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. Amongst ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean restore. Etiam leo queer, venenatis lectus tristique in, fitness at, odio. < /p >

  <!-end #mainContent--> < / div >

  <!-this element of compensation should immediately follow the #mainContent div in order to force the #container div to contain all the child floats--> < br class = 'clearfloat' / >

  < div id = "footer" >

  < p > & copy; Luxury yachts 2009 - bring a cup for the rescue plan < /p >

  <!-end #footer--> < / div >

  <!-end #container--> < / div >

  < script type = "text/javascript" >

  <!--

  var Accordion1 = new Spry.Widget.Accordion ("Accordion1");

  ->

  < /script >

  < / body >

  < / html >

  CSS HAND...
  @charset "UTF-8";

  {body

  margin: 0; / * It is advisable to zero, the margin and the filling of the body to hold element has a different default browser * /.

  padding: 0;

  text-align: center; / * This centers the container in IE 5 * browsers. The text is then set left aligned by default in the #container selector * /.

  color: #000000;

  are-family: Verdana, Arial, Helvetica, without serif.

  are-size: 100%;

  background-color: #FDFDFD;

  background-image: url(images/body_BG.jpg);

  background-repeat: repeat-x;

  }

  H1, h2, h3 {}

  make-weight: normal;

  color: #00583F;

  }

  H1 {}

  -font size: 140%;

  }

  H2 {}

  are-size: 130%;

  }

  H3 {}

  are-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; / * because this element is floating, it takes a width * /.

  width: 200px; / * the background color will be displayed for the length of the content of the column, but no further * /.

  padding: 15px 15px 20px 10px;

  }

  ul #nav {}

  background-image: url(images/buoy.jpg);

  background-repeat: no-repeat;

  background-position: left down.

  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 {}

  are-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: #3574A 7;

  }

  #nav li a: hover, #nav li a: active, #nav li a: {emphasis

  color: #123464;

  background-color: #B7DAD8;

  }

  #mainContent {}

  margin: 0 0 0 250px; / on this div element left margin creates the column on the left side of the page - no matter how content div the sidebar1″ contains, the space of the columns will remain. You can remove this line if you want the #mainContent div text to fill the space of #sidebar1 when the #sidebar1 content ends
  . */
  padding: 20px 0; / * Remember that the fill is space inside the box of div and margin is the space outside the div box * /.
  }
  #mainContent p, #sidebar1 p, #footer p {}
  are-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; / * zero setting the margins of the first element in the footer will avoid the possibility of the collapse of the margin - a space between the div tags * /.
  padding: 10px 0; / * padding on that element will create space, just as it would the margin, free margin collapse question * /.
  color: #FFF;
  }
  .fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */
  float: right;
  margin left: 8px;
  }
  .fltlft {/ * this class can be used to float an element on your page to the left * /}
  float: left;
  right margin: 8px;
  }
  .clearfloat {/ * this class must be placed on an element div or break and should be the last item before closing a container should completely contain a float * /}
  clear: both;
  height: 0;
  font size: 1px;
  line-height: 0px;
  }
  SPRY CSS...
  @charset "UTF-8";

  / * SpryAccordion.css - version 0.4 - Pre - Release Spry 1.6.1 * /.

  / * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

  / * This is the selector for the main container of the accordion. For our style by default.

  * draw us left, right and bottom borders. The upper edge of the accordion

  * is made by the first AccordionPanelTab which never moves.

  *

  * If you want to limit the width of the Accordion widget, set a width

  * the accordion container. By default, our accordion expands horizontally to fill

  * a space available.

  *

  * The name of the class ("accordion") used in this switch is not necessary

  * 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: # 7-9297;

  border-bottom-color: # 7-9297;

  border-left-color: # 7-9297;

  }

  / * This is the selector for the AccordionPanel container which houses the

  * tab panel and panel content area. It is not make it visually, but we

  * ensure that it has zero margin and padding.

  *

  * The name of the class ("AccordionPanel") used in this switch is not necessary

  * make the widget function. You can use any class name you want to style a

  the container of accordion panel.

  */

  . {AccordionPanel}

  margin: 0px;

  padding: 0px;

  }

  / * This is the selector for the AccordionPanelTab. This container houses

  the Panel personnel. It is also the container where the user clicks

  * to open a specific panel.

  *

  * The name of the class ("AccordionPanelTab") used in this switch is not necessary

  * do the function widget
  . You can use any class name you want to style a
  the container of Accordion Panel tab.
  *
  * NOTE:
  * This rule uses the - moz-user-select and - khtml-user-select properties to prevent the
  * the user to select the text in the AccordionPanelTab. Here is the browser owner
  properties that only work in Mozilla browsers (such as FireFox) and KHTML
  * browsers (such as Safari), so they will not pass the W3C validation
  . If you want your documents to
  * validate and don't care if the user can select text in an AccordionPanelTab.
  * You can remove these properties without affecting the functionality of the widget.
  */
  . {AccordionPanelTab}
  background-color: #00583F;
  margin: 0px;
  padding: 2px;
  cursor: point;
  -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-bottom-color: # 7-9297;
  border-bottom-color: # 7-9297;
  }
  / * This is the selector for the content area of a Panel. It is important to note that
  * You should never put any padding on the content area of the group if you plan to
  * use the animations of accordion panel. Place padding non-zero on the content
  * area can cause accordion suddenly increase in height, while signs alive.
  *
  * Anyone who styles an accordion * MUST * specify a height on the Accordion Panel
  * Content container.
  *
  * The name of the class ("AccordionPanelContent") used in this switch is not necessary
  * make the widget function. You can use any class name you want to style a
  the container of the accordion panel content.
  */
  . {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 tab of the Panel which is
  * currently open. The "AccordionPanelOpen" class is added and removed programmatically
  * to panels as long as the user clicks on the tabs in the accordion.
  */
  . AccordionPanelOpen. {AccordionPanelTab}
  background-color: #FFF;
  color: #005b3E;
  }
  / * This is an example of how to change the appearance of the tab of the Panel as the
  * mouse passes over it. The "AccordionPanelTabHover" class is added programmatically
  * and removed containers tab panel as the mouse enters and leaves 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 class "AccordionFocused" is programmatically added and removed
  * whenever the accordion wins or loses the keyboard focus.
  */
  . AccordionFocused. {AccordionPanelTab}
  background-color: #00583F;
  color: #FFF;
  }
  / * This is an example of how to change the appearance of the tab of the Panel which is
  * currently open when the accordion is in focus.
  */
  . AccordionFocused. AccordionPanelOpen. {AccordionPanelTab}
  background-color: #FFF;
  color: #00583F;
  }
  My apologies in advance if I ask a stupid question!
  !
  

  Your footer is designed to move down account for the extra space created when you activate the menu accordion naviation. The turtorial example shows not happening? I can't find a link for the complete example on the page you mentioned to the check.

• How to use a Spry Collapsible Panel in a page attached to a model?

  I can create collapsible panels in a page that is not connected to a model, but if I try to add to a page related to a model, a message tells me either unlock the cephalic region in the model (I don't want to do this because I have a spry menu in the head) or add the widget to the model. But I can't add the widget to the editable area of the model, and I don't want on each page.

  I've done this before and don't remember having this problem.

  Thanks for any help.

  Jennifer

  You will need working with the code.  Open Template.dwt

  Insert a Widget.

  Select the code of the widget panel in yourtag and Ctrl + X to cut

  Then open your child page and Ctrl + V to paste.

  Save the model and fill changes to the pages of the child so that the Spry support files can be added to all.

  Save child page with the pasted Panel Widget.

  Download all pages of the child to the server.

  Nancy O.

• Spry Collapsible Panel does not?

  I want to use a collapsible Panel for the navigation bar on the mobile version of my site (kopstop.co.uk), but loading, the Panel is always open (while I would prefer that it is closed) and that it does not close when you click on it.  There is also a gap between the tab of the Panel with the content area of the Panel.  Being new to this kind of things I can't work on why these problems are happening.

  I would be very happy thank you in advance for any help and advice.

  Adobe dropped in favour of Spry, three years ago (update on the availability of framework Adobe Spry: Adobe Dreamweaver Team Blog). You would be better to use a jQuery Collapsible Panel. jQuery collapsible panels is integrated into the latest versions of Dreamweaver. If you use an older version of Dreamweaver, take a look at jQuery UI Accordion (https://jqueryui.com/accordion/) or do a search for jQuery Collapsible Panel.

• Collapsible menu by using the feature of CSS of CS6, Spry Collapsible Panel

  Hello

  Can you please how to

  1. Add a second or multiple lines of fields contained when inserting the Panel collapsible Spry in CS6? I want to use as a collapsible menu in the sidebar on my side.

  2. it is a good idea?

  Thank you for you thoughs.

  Using Spry for what anyone in a web page is not a good idea. Adobe announced several months ago that we invest more in the development of Spry. It is likely that the Spry widgets will be removed from the next version of Dreamweaver.

  However, widgets Spry will continue to work (as long as JavaScript is enabled in the browser). Foldable panels is simply

  elements. You can add HTML elements you like in their breast.

• Change the default state in the Spry Collapsible Panels?

  It seems that the default setting for the Panel collapsible Spry is for additional content to be visible. I want to be hidden. How can I do this?

  Thank you.

  If you want the Panel to be reduced by default when the page loads, you can set other options by the way (as an object) configuration information as the second parameter of the function call. For example, if the Control Panel has the id "CollapsiblePanel", it would look like:

  CollapsiblePanel var = new Spry.Widget.CollapsiblePanel)

  "CollapsiblePanel", {contentIsOpen:false}

  );

  See the second example here:

  http://labs.Adobe.com/technologies/Spry/samples/CollapsiblePanel/collapsible_panel_sample. htm

• widgets - Panel - accordion display Bug

  I add a widgets Panel accordion & when I click on the accordion in preview the page footer go to the display Bug

  you can see in http://formula.BusinessCatalyst.com/

  (the green buttons on the right)

  Hello

  Please uncheck the "Sticky footer" option, and then test.

  Kind regards

  Aish

• Spry Collapsible Panel

  I use PS CS5 with MacBook Pro.

  I inserted a collapsible Panel Spriy and it works.

  But I have a border around the top content of the tab. It is white and blue Chrome and Safari in Firefox.

  In the spry .css, all styles have no weight of border or the applied color.

  The border I'm talking appears when the Panel is extended; It is bright color model, only around the area of the tab, disappears if I click anywhere on the page.

  How can I get rid of this border?

  Thank you!

  Just add an onclick to reading event less line as in

  Read less

  GRAMPS

• tab panel accordion Spry, link to a page of diferent

  Hello

  I have sort of a section of my site catalog of a few pages, one for each category in my catalog (tables, chairs, lighting, etc.).

  Each of these pages has a spry accordion, which looks the same on all pages.

  When I click on the tab of the Panel accordion, accordion (for this category) Panel content arises, which is very good.

  But when I click on the Accordion Panel tab, I would, first of all for this page is displayed, then for the accordion panel content appears.

  This is what happens:

  I am on the page TABLES. When I click on the Panel accordion tab "CHAIRS" the Panel content Accordion with the different types of Chairs opens / shows, but I'm still on the TABLES page.

  I would like this brings me to the page of CHAIRS without having to choose one of the sections content panel.

  I can't be able to do it with a simple link.

  What should I do?

  Thank you.

  It seems that you have to attach an event onclick (see below)

  At the point where your code probably looks something like:

  Chairs

  You must encapsulate the AccordionPanelTab

  in an anchor as tag below:

  Chairs

• IE6 Spry Collapsible Panel

  I have a div within my Collapsible Panel. In IE6 if I click on the tab of the Panel, the div that I have the inside Panel instantly displays until the animation is complete. Is there a fix for this?

  relative positioning has been turning upward. Removed and it works fine now!

• Collapsible Panel

  Using this widget:
  
  < head >
  ...
  <!-link to the styles of the collapsible Panel CSS stylesheet - >
  < link href = "SpryAssets/SpryCollapsiblePanel.css" rel = "stylesheet"
  Type = "text/css" / >
  <!-link to the library panel JavaScript collapsible Spry->
  < script src = "SpryAssets/SpryCollapsiblePanel.js" type = "text/javascript" > < / script > "
  < / head >
  < body >
  <!--create the collapsible Panel widget and assign classes to each element-->
  < div id = "CollapsiblePanel1" class = "CollapsiblePanel" >
  < div class = "CollapsiblePanelTab" > tab < / div >
  < div class = "CollapsiblePanelContent" > contents < / div >
  < / div >
  <!-initialize the collapsible Panel widget object-->
  < script type = "text/javascript" >
  var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel ("CollapsiblePanel1");
  < /script >
  < / body >
  
  
  Is there a way to make the hidden images load after load of home page?
  
  
  Also, when I test in browser it loads with images open, how load with closed table?

  It loads only the files you list in the function onLooad
  In this case only to home.jpg is preload. people usually use preload for when they image rollovers

• Remove the Focus in the Spry Widgets (I think)

  I'm new to Spry widgets and noting that he is a boring (in Safari) highlight of selections to the accordion and the tab panels. I watched this and apparently she called Focus and accessibility (I think)?... but it's just horrible-looking and boring to me.

  How can I remove this please?

  Also... I have trouble finding the CSS rule to change the color of the tab selected in the TabPanel. It seems I have only an exit status and a stationary State, but not a State selected as with the accordion.

  Thank you.

  See if this thread is useful:

  http://forums.Adobe.com/thread/468623

• page jumps using Collapsible Panel

  Hello world

  Recently, I designed a website using a collapsible Panel.

  But whenever I click inside the Panel menu bar, the rest of the page climbs high one downstairs.

  It is very annoying and I tried a number of things without result.

  This is the site: http://www.fmlogistics.be/

  Can someone close me out? Thank you!

  Thank you for getting rid of position: absolute; whenever I see this in a the basic layout, I'm going haywire (dan wordt ik gek!).

  To solve your problem, remove the line #93 of the SpryAccordion.css

  padding: 10px;

  You should be able to apply the padding of a division placed inside the content area of the accordion.

• Panels accordion - want to close all panels when sail away

  Hi all Newbie, so apologies if answered already or a mistake. In the accordion panel using and the effect of love. However, have placed a link to another page in a section. Works very well except that when the new page loads, section of the Panel is still in the "open". Is it possible to get the accordion to collapse when the mouse rolls out of Panel or you click a link it contains?

  Thank you in advance.

  Joe

  Hey Joe,

  I believe that you have placed the Panel accordion on the master page, the master page please select the Accordion Panel options and select close all: http://prntscr.com/3ofqgx

  Once you have added the link to the accordion panel section, please make sure that all the sections are closed.

  This will load the target page, but that the master has the closed accordion page, it will be rendered in the page as closed.

  Kind regards
  Radi amin

• Why does the drop with a Spry Widget 2.0 last two taps to turn on iPad?

  I have the 2.0 Menu pretty well composed Spry in the way I want it.  When the user clicks on the menu item from an iPad or iPhone also, however, press the drop-down menu twice to make it work.  All the menu items work very well on the first tap except those that have a menu drop-down.  Is there a way to get the drop of pop and work on the first valve of an iPad?  Here is the code of this aid.

  < ul id = "MenuBarUpgradeAugust2012" >

  < li > < a href = "default.html" > home < /a > < /li >

  < li > < a href = "apps4kids.html" > on < /a > < /li >

  < li > < a class = "MenuBarItemSubmenu" > our < /a > Apps

  < ul >

  < li > < a href = "Rhyme-N-SystemRoot\Cluster\Reports\Validation" > rhyme-N-time < /a > < /li >

  < li > < a href = "Free-The - Bee.html" > Free The Bee < /a > < /li >

  < li > < a href = "Trojan horse - Math.html" > Trojan Math < /a > < /li >

  < li > < a href = "Help - Santa.html" > Santa help < /a > < /li >

  < /ul >

  < /li >

  < li > < a href = "chip - apps.html" > Contact < /a > < /li >

  < /ul >

  Thank you

  Scott

  Well, I was able to find a work around for a post in the forum a similar problem.  Here's what they have posted and it worked for me.  I just hope this does not break anything else.

  Change the lines above the lines on the bottom.

  I was able to actually understand the other night.  I needed to change that:

  var MenuBar = new Spry.Widget.MenuBar2 ("#MenuBar", {}
  widgetID: "Menu bar",
  widgetClass: 'MenuBarRightShrink the menu bar. "
  insertMenuBarBreak: false,
  mainMenuShowDelay: 100,.
  mainMenuHideDelay: 200,.
  subMenuShowDelay: 100,.
  subMenuHideDelay: 200
  });

  TO:

  var MenuBar = new Spry.Widget.MenuBar2 ("#MenuBar", {}
  widgetClass: 'menu bar MenuBarRightShrink '.
  });

  I hope that doesn't ' t mess up anything else, but no problems so far.