Accordion Panel WON'T push content below it down

Similar Questions

• 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 content below Accordion widget doesn't move do not?

  I want to have the content below the Accordion widget to slide down when one of the panels is open.  Right now, the Accordion widget behind the content slides when one of the panels is open. I have "Overlapping elements below" checked.

  From the Lynda.com site: " the Accordion Panel now includes the overlapping items below option. "When selected, content under the accordion panel moves down on the page like an accordion panel is opened/expanded."

  Thank you

  This seems like a typographical omission on Lynda.com blog.

  You must uncheck this option to move the content below accordion down when opening the Panel.

  Please check below excerpt from Muse Release Notes here: http://helpx.adobe.com/muse/release-note/adobe-muse-release-notes.html

  • The Accordion Panel now includes an option for "overlap the items below. When a selected under the accordion panel content will not move down on the page like an accordion panel is opened/expanded.

  See you soon,.

  Vikas

• 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

• Accordion panels do not display the contents of all the

  I'm using the spry Accordion Panel. But the signs are a fixed height and do not change according to the amount of content that is inside of them. How to change that? I don't want a scroll bar for overflow as the default value. I want just the panels to open to view all content.
  
  It comes to my page:
  http://creative.generalgrowth.com/Jeremy/b2btest/clients.html

  Very well. The problem was a change in the CSS I did not return. Everything seems to work fine now.

  I truly appreciate the answers and guidance from each.

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

  
  

• Smartphones blackBerry PUSH CONTENT IN the CACHE

  
  

  It won't hurt anything to remove the pushed content... many users have no content pushed, which often takes the form of "pushed" messages from a supplier of weather, the news agency or sport...

• Smartphones blackBerry PUSH CONTENT CACHE and CACHE of COOKIE

  Always begin by thanking you people because of the knowledge I have in here, my bberry works fine, so THANK ALL OF U! OK in the operations of cache options we have clear history, clear the content cache, clear pushed content and clear cache cookie. What is pushed content and when should I delete it? Also what if ever should clear the cache of cookie? Please if you PLEASE help me again I do appreciate and remember very well. I am very grateful for these forums. Also when should I clear the content cache? Thank you again and again.

  M@Rvin,
  The cookie cache contains your passwords and all that would mean is that you would have to retype it again within a web account or what you have. The content pushed is that BB or carriers are to communicate between your device and themselves as emails of parameters that are pushed and I don't know what else. You can erase everything all the time, and you won't need to worry. Why it might help is when esp. cookies and cache fill, it can slow down the browser can help clear things out on a regular basis. I let the cookies and cache and delete the rest all day out of habit.

• 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

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

• 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

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

• 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