Addition of a bootstrap in Dreamweaver Accordion Panel

Similar Questions

• Is the addition of acceleration on the possible Accordion Panel?

  Hello! I'm using the accordion panel but I want to control the speed at which the menus drop down and up. Right now it's pretty instant. I searched around and found nothing on this subject. Any advice on how to do this?

  Thank you!

  Larry

  At the present stage, we cannot control the speed directly from Muse, but you want to apply a custom code to achieve this.

  Thank you

  Sanjit

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

  
  

• 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

• hyperlink in an Accordion Panel widget

  I placed a hyperlink in an accordion panel and only get a warning about rasterizes type and the link does not work is a browser. I use a web safe font (verdana). Why won't it work?

  What Muse version do you use?

  Also check the following things.

  1 if the version of Muse is older that the Muse CC 2014 and then select the text in question box and make sure that the rotation value is set to 0

  

  2. While there is a section of the text box or space in the text box that has a police system applied this rasterize the entire text box. To verify that double-click in the text box and move the slider to the beginning of the text to the end and keep an eye on the name of the font.

  If this do not always fix the issue, share the file .muse with me and I'll take the glance.

  Kind regards

  Vivek

• 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

• 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

• Accordion Panel WON'T push content below it down

  Accordion Panel WILL NOT push the content below it down, nor will it push the foot down, sticky footer is not checked. "Overlap the following" is also disabled. Everything is on the same layer, I sent 'forward' and back. Why it does not work?

  The accordion is pinned? Marked as a footer element? Need scrolling effects applied?

  If it is none of the above, please provide the URL of the page. If it is not online, please click on publish and provide the URL for the free temporary site that is created through the post. Thank you.

• rotate the Accordion Panel

  Hi, I'm new to Muse, I wish I could rotate the accordion panel so that the content opens from the bottom up. I turned the content in the Panel and it extends from the bottom up and reads the correct way around, however the header/title to label that informs me of what is in the Panel is backwards.

  There is no way to rotate the labels, but you can play tricks similar to what did you with the content to get the desired affect.

  After turning the accordion, you might do the following for each tag:

  1. Create a separate text with the contents of the desired label.
  2. Turn the new block of text to 180 degrees as it is upside
  3. Copy the rotated text block.
  4. Double-click the accordion label until you can change the text.
  5. Select all the text in the label and delete it.
  6. Paste the text block rotated as a line in the label of the accordion. At this point, it will be be treated as if it was any character. So, if the text of the label in the accordion is set to be left-aligned, the Inline frame will rely on the right side because the accordion is turned. If you want the label to be visually left-aligned, pointer to select the accordion label such as its selection handles, open the text panel, then select the icon to right-align.

• the accordion panel embedded youtube videos

  I'm trying to get videos from youtube built-in in Accordion Panel pop

  the accordion panel would have "titles" with the descriptions posted if clicked, and here in the description would be a link to the youtube embedded video will appear next to the Panel.

  go to each accordion panel selection and get a different embedded video to play.

  Anyone know if this is possible and how?

  Well, to have instructions can be a solution, or you can use custom code to achieve this.

  I wouldn't recommend customization, but if you stop the video while the container is not active, you can use jQuery or Javascript inserted with youtube html that should detect if the container is not active then to stop the video.

  Thank you

  Sanjit

• arrows in Accordion Panel

  I have an accordion panel and am now putting down arrows in each of the 4 sections

  See it at http://paralegaladvice.com/landlord-help.html

  If I click on any Panel in a browser, the arrows do not move with their own section of the panels

  They remain exactly where they are if the Panel is open or closed

  I tried grouping, cannot.

  So, how can I insert the arrow in each section be moved to this article?

  It would help if you look at the page http://paralegaladvice.com/landlord-help.html click the panels that you can see the problem

  Thank you

  Hello

  I believe that you use image in the label field which you can not group with individual label field.

  A possible workaround solution would use the picture as fill to field label and the position on the centre-right, then you can define States.

  Something like this:

  http://drop-down.BusinessCatalyst.com/index.html

  Thank you

  Sanjit