hyperlink in an Accordion Panel widget

Similar Questions

• synchronization of text with Accordion Panel

  Is it possible to use the client side inbrowser edits with text synchronization when content items are placed in an Accordion Panel widget?

  Yes, through IBE, you can edit the text in accordion and then they sync back.

  Thank you

  Sanjit

• Reducible, text box widget no longer works in accordion panels.

  The foldable Muse themes text box widget does more work in accordion panels in the latest version of Muse.

  I have a site to build from last year that is published and the foldable boxes 'read more' work very well.

  I update this site and the collapsible text boxes do not work.  The customer isn't happy and I am looking at hours of unpaid work to rebuild or copy the new text and assets in the former code.

  I need another solution for the Muse collapsible text boxes.

  Help, please!

  -deb-

  Hi Deb,

  You've got this widget from MuseThemes I suggest post you this query on MuseThemes Forum as they have better access and solution on their widgets.

  Best regards

  Ankush

• Accordion panel woes

  I have been with a panel of the accordion on my site for a while and have hit a bit of a show-stopper when used on sensitive pages:

  Just to illustrate, I setup a simple demonstration of the problem.

  1 accordion panel swivels open instead of the North-South West

  

  nothing wrong with that on an Adaptive site... just available the Panel as you need...

  2. on a sensitive Site...

  Well he's a little bad... once the accordion panel is turned when you resize a page adaptive it resizes the "horizontal" and leaves only vertically (note the crushed look of it I move inside, since the breakpoint).

  So in this case, as the accordion panel narrows North-South (which is horizontally before rotation) and the East-West dimension (which is the vertical dimension before rotation) remains static.  So, using the Panel accordion in the way that it would commonly be used actually not correctly resize on a sensitive site.

  

  So what I want to know is:

  (a) I am doing something wrong to make it work for a sensitive site
  (b) if I'm not mistaken can be solved, because it seems that the widget requires an update to make it work properly on sensitive sites when it turns?

  Thanks a lot for all the answers

  Rick

  Hello Rick,

  Even after the rotation of the accordion his coordinators of height/width remains the same, there for her will apply the reactive width vertically.

  I suggest to uncheck the 'reagent-width' option and manually set the size of your accordion.

  

  Kind regards

  Ankush

• How to make the menu header text open an accordion panel footer that develops upward on the content of the page?

  I have a site where the footer information page in an accordion panel that opens on the content of the page to the footer, and when you click on the "label" of the accordion panel again once it closes. My footer information contains the contents of my "INFO" button in my menu header (which is just text).

  I also have my "INFO" button in the header menu to open this Panel if clicked on accordion. So if you click on the "Expand ^' (aka accordion label) on the footer of site the accordion opens/closes and also if you click on the 'INFO' text in my headers of the accordion opens/closes menu."

  
  

  This link (Bootstrap accordion / collapse with extract of buttons - L4Iph34uXb) shows what I would like for my site to do. I wouldn't need actual button 'Close' since the label malaccaaccordian said 'hide' and can be clicked on close. Just need the Open button. Do not know how to proceed in Muse where I built my site.
  

  It is very clear and I'm just not see him or impossible? Help! Thank you

  my site: www.mobodyworks.com

  It should logically connect different regions or intermingle respective the makings of jQuery code snippets. Your only option with Muse would be to attribute the same IDS for triggers and targets, so that they meet each other in the same key, but unfortunately you know how such things when the site is published. Otherwise I don't think you could do it, unless there is a compatible widget Muse for her.

  Mylenium

• How to apply different styles to several spry accordion panels?

  Hi all

  I have a site I'm building that has several functions that spry accordion.

  I try to apply different styles to each accordion. A problem arises when I try to place an accordion in an another accordion.

  I have style two images of different background for both of the accordians for styles (AccordionPanelTab, AccordionPanelTabHover and AccordionPanelOpen AccordionPanelTabHover) that work very well.

  When I try and place an accordion in an another accordion background image for this Accordion for styles (AccordionPanelTab and AccordionPanelOpen AccordionPanelTabHover) has different style applied that I said in the accordion.css folder, however the style (AccordionPanelTabHover) has the same style as the accordion, it's breast, even if I said a background image in the accordion.css file different.

  I hope this makes sence, below is my source and the CSS Code.

  I appriciate any help that can be given to help solve this issue I'm running too.

  Source code

  < div id = "content" >

  < p > < span class = "first_header_word_packages" > welcome </span > < span class = "header_word_packages" > on our page of packages </span > < / p >

  < class p = "content_txt" > here you can build the package Web site that meets your needs while being able to determine the cost of your site without having to worry about the scary hidden costs at a later date. < /p >

  < class p = "content_txt" > we have two packages available for our clients; < /p >

  < div id = "Accordion1" class = "Accordion" tabindex = "0" >

  < div class = "AccordionPanel" >

  < div class = "AccordionPanelTab" > < / div >

  < div class = "AccordionPanelContent" >

  Here the text < p > < /p >

  < div id = "Accordion2" class = "Accordion" tabindex = "0" >

  < div class = "AccordionPanel" >

  < div class = "AccordionPanelTab" > < / div >

  < div class = "AccordionPanelContent" >

  Here the text < p > < /p >

  < / div > <! - end #Accordion2 content - >

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

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

  < / div > <! - end #Accordion1 content - >

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

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

  < div id = "Accordion3" class = "Accordion" tabindex = "0" >

  < div class = "AccordionPanel" >

  < div class = "AccordionPanelTab" > < / div >

  < div class = "AccordionPanelContent" >

  Here the text < p > < /p >

  < div id = "Accordion4" class = "Accordion" tabindex = "0" >

  < div class = "AccordionPanel" >

  < div class = "AccordionPanelTab" > < / div >

  < div class = "AccordionPanelContent" >

  Here the text < p > < /p >

  < / div > <! - end #Accordion4 content - >

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

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

  < / div > <! - end #Accordion3 content - >

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

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

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

  CSS

  @charset "UTF-8";

  / * SpryAccordion.css - version 0.5 - 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 {}

  border-left: 1px solid gray;

  border-right: 1px solid black;

  border-bottom: 1px solid gray;

  overflow: hidden;

  }

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

  * make the widget function. 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: #CCCCCC;

  border-top: 1px solid black;

  border-bottom: 1px solid gray;

  margin: 0px;

  padding: 2px;

  cursor: pointer;

  -moz-user-select: none;

  -khtml-user-select: none;

  }

  / * 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;

  padding: 0px;

  }

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

  }

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

  }

  . AccordionPanelOpen. {AccordionPanelTabHover}

  color: #555555;

  }

  / * This is an example of how to change the appearance of all the Panel tabs when the

  * Accordion has focus. The class "AccordionFocused" is programmatically added and removed

  * whenever the accordion wins or loses the keyboard focus.

  */

  . AccordionFocused. {AccordionPanelTab}

  background-color: #3399FF;

  }

  / * 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: #33CCFF;

  }

  / * Printing rules * /.

  @media print {}

  . Accordion {}

  overflow: visible! important;

  }

  . {AccordionPanelContent}

  display: block! important;

  overflow: visible! important;

  height: auto! important;

  }

  }

  #Accordion1. {AccordionPanelTab}

  height: 75px;

  Width: 285px;

  Background: url (.. /images/package_spry_tab_bg1.png) ;}

  #Accordion1. AccordionPanelTabHover,

  #Accordion1. AccordionPanelOpen. {AccordionPanelTabHover}

  Background: url (.. /images/package_spry_tab_bg1_RO.png) ;}

  #Accordion2. {AccordionPanelTab}

  height: 44px;

  Width: 469px;

  Background: url (.. /images/packages_spry1.png) ;}

  #Accordion2. AccordionPanelTabHover,

  #Accordion2. AccordionPanelOpen. {AccordionPanelTabHover}

  Background: url (.. /images/packages_spry1_ro.png) ;}

  #Accordion3. {AccordionPanelTab}

  height: 75px;

  Width: 285px;

  Background: url (.. /images/package_spry_tab_bg2.png) ;}

  #Accordion3. AccordionPanelTabHover,

  #Accordion3. AccordionPanelOpen. {AccordionPanelTabHover}

  Background: url (.. /images/package_spry_tab_bg2_RO.png) ;}

  #Accordion4. {AccordionPanelTab}

  height: 44px;

  Width: 469px;

  Background: url (.. /images/packages_spry2.png) ;}

  #Accordion4. AccordionPanelTabHover,

  #Accordion4. AccordionPanelOpen. {AccordionPanelTabHover}

  Background: url (.. /images/packages_spry2_ro.png) ;}

  
  

  Good guys.

  I thought about it, if someone had the same problem as me and a look at this thread for the answer, here it is.

  Firstly if you are wanting to separately style two or more Spry accordions that are not on the other example

  Label 1

  Insert content here

  Label 1

  Insert content here

  Do not do this, as long as you have separate ID's for the div (which dreamweaver automatically anyway), you will be fine.

  However if for some reason, you want to put one accordion inside another like I did for example

  Label 1

  Insert content here

  Label 1

  Insert content here

  Too style accordion 1 and 2 so their tabs have different origins and Hover background when the content panel is open and closed you need to style it in CSS that they follow the path;

  CSS

  #Accordion1. {AccordionPanelTab}

  height: 75px;

  Width: 285px;

  Background: url (.. /images/package_spry_tab_bg.png) ;}

  #Accordion1. AccordionPanelTabHover,

  #Accordion1. AccordionPanelOpen. {AccordionPanelTabHover}

  height: 75px;

  Width: 285px;

  Background: url (.. /images/package_spry_tab_bg_RO.png) ;}

  #Accordion2. {AccordionPanelTab}

  height: 44px;

  Width: 469px;

  Background: url (.. /images/packages_spry.png) ;}

  #Accordion2. AccordionPanelClosed. AccordionPanelTabHover,

  #Accordion2. AccordionPanelOpen. {AccordionPanelTabHover}

  height: 44px;

  Width: 469px;

  Background: url (.. /images/packages_spry_ro.png) ;}

  Normally in styling two separate spry accordions, you can simply use the following code

  #Accordion1. {AccordionPanelTab}

  height: 75px;

  Width: 285px;

  Background: url (.. /images/package_spry_tab_bg.png) ;}

  #Accordion1. AccordionPanelTabHover,

  #Accordion1. AccordionPanelOpen. {AccordionPanelTabHover}

  height: 75px;

  Width: 285px;

  Background: url (.. /images/package_spry_tab_bg_RO.png) ;}

  The only difference with the style one Spry Accordion in another so that they have different horizons stationary when the content panel is open and closed ".» AccordionPanelClosed ".

  Hope this has helped someone who had the same problem, I was.

  
  

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

• Accordion Panel swinging back on layout after refresh

  Hello

  I have an Accordion widget with two panels. On the first Panel is a welcome screen and the second a user registration form. In this form, I have validation on the server side. If the information entered fails validation of the severside, refreshing the page, when the first Panel is opened, which contains the Welcome screen. Does anyone know how to maintain the current open Panel after a refresh of the page, so the remains of the user on the second Accordion Panel, containing the form?

  Any help would be fantastic,

  Thank you.

  How to link to a specific Spry Panel is described in this tutorial on my website: http://foundationphp.com/tutorials/spry_url_utils.php.

  The tutorial addresses pass values in the URL, so only the basic principles apply to your scenario. During the validation of a form server side, you need to use the POST method, so you'll need to adapt everything to use conditional logic side server like this:

  var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: });
  

• Default Spry Accordion Panel

  CONTEXT: I inserted a Spry Accordion with six different panels. Each Panel has its own set of links. Each link corresponds to a page in a long series of linked pages which together form a single document. Each panel of links represents a contiguous set of linked pages and a section of the document. In addition, I created a model for the entire document which includes the Spry Accordion just described.
  
  GOAL: create an editable region in the template that will allow me to control the default Panel for each page of the document.
  
  FAILURE of ATTEMPT: documentation Adobe to set the default for the Spry Accordion Panel suggests the following JavaScpript:
  
  < script type = "text/javascript" >
  var acc8 = new Spry.Widget.Accordion ("Accordion8", {defaultPanel: [someNumber]});
  < /script >
  
  where someNumber is an integer that is greater or equal to zero. When this code is entered into the model error.
  
  DISCUSSION: continued research in the JavaScript file that controls the accordion, I was able to find the function that controls the default Panel. It appears like this:
  
  Spry.Widget.Accordion = function (element, opts)
  {
  This.Element = this.getElement (element);
  this.defaultPanel = 0;
  this.hoverClass = "AccordionPanelTabHover";
  this.openClass = "AccordionPanelOpen";
  this.closedClass = "AccordionPanelClosed";
  this.focusedClass = "AccordionFocused;
  this.enableAnimation = true;
  this.enableKeyboardNavigation = true;
  this.currentPanel = null;
  This.Animator = null;
  this.hasFocus = null;
  This.Duration = 500;
  
  this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
  this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;
  
  this.useFixedPanelHeights = true;
  this.fixedPanelHeight = 0;
  
  Spry.Widget.Accordion.setOptions (, opts, true);
  
  Unfortunately, some browsers like Safari, style sheets in our
  page depends may not have been loaded at the time, we are called.
  This means that we must postpone attaching our behavior until after the
  OnLoad event is triggered, because some of our behaviors are based on dimensions
  specified in the CSS.
  
  If (Spry.Widget.Accordion.onloadDidFire)
  this.attachBehaviors ();
  on the other
  Spry.Widget.Accordion.loadQueue.push (this);
  };
  
  QUESTION: How can I access this feature of in my template to change the setting for this.defaultPanel?

  Quote:
  The main JavaScript file for the accordion can be controlled by a
  model, since he lives in a separate .js file.

  I do not use templates myself, but it looks like the correct way to approach
  the problem is the one used on your 'ATTEMPT failed. You can try it
  again and report message the exact error you get and at what stage. Maybe
  you get help on that.

  EXPRESSION OF GRATITUDE
  Thank you for your encouragement. Indeed, part of the solution to my problem was discovered through a reconsideration of my attempt failed. The other part came from the information provided me while helping another person with a related, but different problem. It turns out that the line of code in my failed ATTEMPT is automatically placed in the model when the SPRY accordion is inserted. Unaware of his presence and the right place I am he entered by mistake a second time. This triggers not only an error message, but it renders unusable, various other parts of my document.

  THE SOLUTION
  First step: find the line of code that is similar to that given by the following text:
  
  In my model, this code was found at the bottom of the HTML body tag.

  Second step: understand that the name of the variable 'acc8' and the name of the "Accordion8" parameter provided in the sample code above are arbitrary, and that the two are automatically defined when then a SPRY accordion is inserted. Important is that these names are likely to be different from what you see in the sample code above, and that you need and probably should not edit them in your document.

  Step 3: change the number in the name pair: value indicated as defaultPanel:2 to a number between 0 and one less than the number of panels that you create in your accordion. It is this number that allows you to determine the Panel that appears when the document is opened.

  Step four: Save and test in your favorite browser. Enjoy!

  CAUTION:
  This experience taught me a crucial lesson on the use of Dreamweaver. Dreamweaver has a mind of its own and can easily ruin you in seeking to correct your own mistakes for you. The solution is to save your document with a second copy before attempting any innovation that is not already integrated in the Dreamweaver program.

  FURTHER EXAMINATION:
  As I created a template to use with other documents, I will now try to make this area of my template editable, so that I can change the default setting of every other page that I create from my template. As I still do this, understand that the steps above, even if it is valid for a document template, may or may not be valid for pages created from the template. I hope they are and it will keep experimenting.

• How to insert HTML custom in tabbed panels Widget

  I need to insert HTML in a tab panel Widget.

  I have an HTML table with the data that I have to put in a tab panel Widget.

  I tried to create the custom HTML and dragging it in the area of the tabs Panel that did not work.
  I tried the content area of the Panel tabs, then click to insert custom HTML that has not worked.

  And now, I'm of ideas on how to achieve this.

  Thanks in advance

  Ho!

  So I thought about it for me.

  If you are wanting to insert HTML custom in a tab panel, make sure that you have selected an object in the content area of the Panel tabs. Then select Insert HTML code.

  I have just placed a text box in the tabs Panel, selected the text box so that it is highlighted and then chose to insert custom HTML.

  This put my HTML custom code in the content area of Panel tabs.

• Addition of a bootstrap in Dreamweaver Accordion Panel

  I was stupid enough to use a bootstrap accordion in my site instead of a jqueryUi accordion. The last of them is easily editable. Is well integrated with Dreamweaver. The accordion "bootstrap", however it turns out be very convenient. I'm not familiar with the scripts, and as the "bootstrap" accordion is not integrated in Dreamweaver in the same way that Jquery Ui is, I just can't seem to add a simple additional tab.

  Anyone know what it takes to add an additional panel? I have the same problem with the tabs Panel as well.

  Dreamweaver uses a very nice program with a good balance between coding and graphic design. Now, he seems to become harder, rather than easier.

  The best way is to go into code view, copy all of the element with a class of the Panel, after pasting the last element with the class of the control panel and change the ID and href values according to the following guidelines.

  myNewCollapse">Collapsible Group 4

  Content for Accordion Panel 4

• Tabbed Panels widget

  Hello.

  How can I add multiple tabs for the default tabbed panel widget...

  Basically, using the "bootstrap" structure, I added a tabbed panel widget that has a default 3, however an is a 'drop-down Menu"style that I delete.

  Leaving me with only 2 tabs.

  How can I add more.

  Thank you in advance.

  Glen Gibbs

  You will have to switch to Code view and change some coding. Take a look at what follows is what you get when you include the standard tabs widget. Then remove the red color elements, they belong to the tab from the drop-down list.

  • Tab 1
  • Tab 2
  • Drop down tab 3

    • List drop-down link 1
    • List drop-down link 2

  Content in the tab of the Panel 1

  Content 2

  Content drop-down list #1

  Content drop-down list #2

  This leaves us with

  • Tab 1
  • Tab 2

  Content in the tab of the Panel 1

  Content 2

  Copy the 2 remaining Tabs, color green and past them immediately under the copied lines. Do the same with content, blue color. This will result in the following code. Remove the red color code and change the orange color code while they in the same sequence as the original code.

  • Tab 1
  • Tab 2
  • Tab 1
  • Tab 2

  Content in the tab of the Panel 1

  Content 2

  Content in the tab of the Panel 1

  Content 2

  Your code over for the four legs will look like

  • Tab 1
  • Tab 2

• Tab 3
• Tab 4

Content in the tab of the Panel 1

Content 2

Content on the dashboard 3 tab

4 content

• Text of the Accordion Panel

  I've implemented an accordion panel in my mobile site as sort of a menu. I need align the text with each Panel in 3 columns. 1 text of the column pushed to the left, 1 text in the middle and 1 text left out. I tried to text "manually", but it is not an exact line upward. Now I have the text 'centered', but it doesn't look good. Is there a code I can add to this? An easier option would be to add separate text boxes, but then those who don't "go" with the Panel. I have attached sample-1, which is how I have it now. Sample-2, it's that I would like that to make it look, but at the moment I have put about the 5th Panel things start to become out of alignment.

  

  

  You can use a picture for example = home

  

  The middle is a picture... scaling to fit

  

  but the top and bottom are text

  The effect is a bit of ruf to my eyes, but you will get a font that matches and put the picture in photoshop for a better effect.

• Accordion panel slide open on HOVER?

  Hello! Please help with Accordion Panel! Accordion Panel slides only /opens when I CLICK on the TAB. How can I open the overview?

  You must use a coding customized for this:

  http://StackOverflow.com/questions/11584196/how-to-make-accordion-to-expand-on-hover-not-o n - click

  Thank you

  Sanjit

• I used a Muse Panel widget and it looks totally different in inbrowserediting... so really can't do anything.

  I built a website in Muse on Mac and used a Panel widget on the home page. The site is up to www.tricountyagpros.com and seems ok, not exactly as Muse, as he added a blank space under each color box. When I go to inbrowerediting, the Panel widget is totally off.

  Someone can tell me how to fix this Panel widget or do they not work?

  Thank you

  Benjamin K

  Follow please: Panel tabs in inbrowserediting widgets do not work!

  (Double Post)