As placing accordion panel in horizontal direction

I have a small problem I put the accordion panel in horizontal direction but do not know how it can be used only in a vertical or too horizontal? I await your prompt response is that I am finishing my page and I need to put the accordion in a horizontal position and do not like, I leave a picture of what you want.
Note: The image was altered in adobe photoshop that is why the accordion is flat, I did to recreate that is exactly what I want.

Hello,
The feature that you are looking for is not there is Adobe Muse. This has already been logged as Idea for new features in Adobe Muse by one of our Muse users.
Please have a look at the post : http://forums.adobe.com/ideas/2163
I would suggest you to add your vote and valuable comments to that post.
Regards,
Sachin

Similar Messages

Spry horizontal menu bar and accordion panels not working when published

Hi,
I'm a newbie to Dreamweaver and have been asked to design an intranet site. On the site, I added both Spry widgets for a horizontal menu bar and an accordion panel. Both of these widgets work in preview, however, neither work when I publish. I uploaded the Spry asset folder (with all the CSS and JS files) to the remote server, but still no luck. What am I missing?
Thanks.

Despite of what you have staed, my bet is on the fact that the SpryAssets folder and/or the included files are not being found by your page..
Open the site in FF, click on view Source and in the source code click the link to the JS file. If it can be found, it will show the content of the file and you will have the satisfaction of knowing that the page can find the file.
If it does not show the content, you need to correct that.
Good luck.
Ben

Allow accordion panels to open in more directions.

...to be able to have accordion panels that open upward to push page content down and 'reveal' content that appears to exist above the main load page.
Or have panels also open to the left or right for stylistic choices.

Totally agree...
I am trying to use an accordian to add news stories chronologically... so the latest story has to be on top... currently clicking + at the bottom then dragging the new accordian element to the top... also I would like to facility to "dim" the other stories...
Some issues too in applying format universally... not sure that graphic styles is working right for me

How do I collapse all the accordion panels

The problem that I still have is that I am trying to close all the Accordions when clicking on the last panel.
I have looked at the Accordion.closePanel() , but that throws an error
http://labs.adobe.com/technologies/spry/articles/data_api/apis/accordi on.html
here is a link to the page http://www.antworks.co.uk/mobymemory/menu.html
see the code below. Any help would be greatly appreciated. Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTop" onclick="Accordion1.openPanel(0); return false;">memory cards (make)</div>
<div class="AccordionPanelContent">
<img src="images/new/trans.gif" width="7" height="7" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
<img src="images/new/trans.gif" width="7" height="3" />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(1); return false;">memory cards (brand)</div>
<div class="AccordionPanelContent2">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(2); return false;">mobile accessories</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(3); return false;">gaming</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" onclick="Accordion1.openPanel(4); return false;">computing</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelBot" onclick="Accordion1.openPanel(5); return false;">customer login</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
css
@charset "UTF-8";
/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
width: 174px;
overflow: hidden;
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
.AccordionPanel {
margin: 0px;
padding: 0px;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
.AccordionPanelTab {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_blue.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 21px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelTop {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_top.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 22px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelBot {
background-color: #CCCCCC;
letter-spacing: -0.04em;
background-image: url(../images/new/spry/meun_bot.gif);
background-repeat: no-repeat;
padding: 8px 0 0 12px;
height: 21px;
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 14px;
font-weight: bold;
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
letter-spacing: -0.05em;
background-image: url(../images/new/spry/meun_grey.gif);
background-repeat: repeat-y;
padding: 0 0 0 12px;
font-family: Arial, Helvetica, sans-serif;
color:#7f879e;
font-size: 14px;
font-weight: bold;
overflow: hidden;
margin: 0px;
.AccordionPanelContent2 {
letter-spacing: -0.05em;
background-image: url(../images/new/spry/meun_grey.gif);
background-repeat: repeat-y;
padding: 0 0 0 12px;
font-family: Arial, Helvetica, sans-serif;
color:#7f879e;
font-size: 14px;
font-weight: bold;
overflow: auto;
margin: 0px;
height: 200px;
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
background-color: #EEEEEE;
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
color: #555555;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
background-color: #3399FF;
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #33CCFF;

Just so that you know for the next time, when you give us a URL, there is no need to post your code. This is by far the most preferred method for obtaining our assistance.
Having said that, place the fillowing in the HEAD section of your document, ensuring that you do have the file in that location
<script src="SpryAssets/SpryDOMUtils.js"></script>
Then, near the bottom of the page within the same SCRIPT content as your constructor(s), place the following code
Spry.$$(".AccordionPanelBot").addEventListener("click", function(){
Accordion1.closePanel();
The Spry Element Selector (Spry.$$) requires SpryDOMUtils.js. Here we place an event listener to your last tab with a class name of AccordionPanelBot, which when clicked will close the currently open panel(s).
I hope this helps.

Accordion Panel problem in IE

Using DW8 - and Interakt Ajax tookit, I have an Ajax panel
that contains the Spry Accordion. I have tried EVERYTHING, and
although it works perfectly in Firefox, the panels open slightly as
soon as you mouse over or open any of them. I have tried editing
everything I can think of in the code, the CSS and even editing in
doc type in the panel page.... but it still does it....just
slightly. Also...I can only use fixed height... becuase if I use
the auto-height... it slides up sluggishly, but ONLY if there is a
LOT of content. I am pulling my hair out.
I figured the only people who can help me at this point have
to live in Romania.... if any are watching this post... please
help!!!
Thanks guys, and gals.

Here is the CSS for that area: I tried setting margins in
every state just as an experiment? Maybe I need to use the
!important comment?
@charset "UTF-8";
/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
/* This is the selector for the main Accordion container. For
our default style,
* we draw borders on the left, right, and bottom. The top
border of the Accordion
* will be rendered by the first AccordionPanelTab which
never moves.
* If you want to constrain the width of the Accordion
widget, set a width on
* the Accordion container. By default, our accordion expands
horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector
is not necessary
* to make the widget function. You can use any class name
you want to style the
* Accordion container.
.Accordion {
border-left: solid 1px gray;
border-right: solid 1px gray;
border-bottom: solid 1px gray;
overflow: hidden;
/* This is the selector for the AccordionPanel container
which houses the
* panel tab and a panel content area. It doesn't render
visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this
selector is not necessary
* to make the widget function. You can use any class name
you want to style an
* accordion panel container.
.AccordionPanel {
margin: 0px;
padding: 0px;
/* This is the selector for the AccordionPanelTab. This
container houses
* the title for the panel. This is also the container that
the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this
selector is not necessary
* to make the widget function. You can use any class name
you want to style an
* accordion panel tab container.
.AccordionPanelTab {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font-weight: bold;
/* This is the selector for a Panel's Content area. It's
important to note that
* you should never put any padding on the panel's content
area if you plan to
* use the Accordions panel animations. Placing a non-zero
padding on the content
* area can cause the accordion to abruptly grow in height
while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on
the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in
this selector is not necessary
* to make the widget function. You can use any class name
you want to style an
* accordion panel content container.
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
height: 150px;
/* This is an example of how to change the appearance of the
panel tab that is
* currently open. The class "AccordionPanelOpen" is
programatically added and removed
* from panels as the user clicks on the tabs within the
Accordion.
.AccordionPanelOpen .AccordionPanelTab {
background-color: #EEEEEE;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* This is an example of how to change the appearance of the
panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover"
is programatically added
* and removed from panel tab containers as the mouse enters
and exits the tab container.
.AccordionPanelTabHover {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelOpen .AccordionPanelTabHover {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* This is an example of how to change the appearance of all
the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is
programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
background-color: #DFDEB0;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
/* This is an example of how to change the appearance of the
panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #EEEEEE;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;

Dashed rule between menu items nested inside an accordion panel widget in Muse?

I have a vertical menu widget nested inside an accordion panel widget and I want a dashed rule under each menu item. I already know I can have a solid rule by assigning a stroke to just the bottom of each menu item container.
I manually created dashed rules by "step and repeating" a 1px black square followed by 2px of space to a 380px width. I positioned these dashed rules under each menu item and grouped them with the menu. Then I placed the menu widget with the dashed rules into the content container for the accordion panel. The menu expands and collapses in the Preview mode but the dashed rules don't show up.
Muse CC 2014, iMac OS10.9

The link again is I forgot to add http to the link before, but it should have worked.
http://www.lipowiec.org/test/index.php
a) used Dreamweaver to create new site selected 1 column, elastic, centered, header, and footer
b) used spry to add horizontal menu to header
c) followed instructions from Spry Help
http://livedocs.adobe.com/en_US/Spry/SDG/index.html?lang=en_US ->
working with spry widgets -> working with the menu bar widget -> Customize the dimension of menu items as indicated
To change the dimension of menu items by changing the width properties of the menu item’s li and ul tags.
Locate the ul.MenuBarVertical li or ul.MenuBarHorizontal li rule.
Change the width property to a desired width, or change the property to auto to remove a fixed width, and add the property and value white-space: nowrap; to the rule.
Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.
Change the width property to a desired width (or change the property to auto to remove a fixed width).
Locate the ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li rule.
Add the following properties to the rule: float: none; and background-color: transparent;.
Delete the width: 8.2em; property and value.
Under IE it's broken, under the other browsers it works.
There need to be more IE HACKS added.

Accordion Panels not collapsing in Adobe AIR

Hi,
I'm trying to create an AIR application with HTML/CSS/AJAX (spry).
I've got my xml dataset set up and my accordion panel widget set up.
When I preview in Safari everything works fine, but when I preview in Adobe AIR the xml data shows up and the panels, but the accordion panels aren't working, clicking on the AccordionPanelTab doesn't do anything.
Any ideas on how to fix this, (if it is even possible)??

Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:spry="http://ns.adobe.com/spry">
<head>
<link href="_Assets/css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="_Assets/frameworks/AIRAliases.js"></script>
<script src="_Assets/spry/xpath.js" type="text/javascript"></script>
<script src="_Assets/spry/SpryData.js" type="text/javascript"></script>
<script src="_Assets/spry/SpryNestedXMLDataSet.js" type="text/javascript"></script>
<script src="_Assets/spry/SpryAccordion.js" type="text/javascript"></script>
<script type="text/javascript">
var dsSeasons = new Spry.Data.XMLDataSet("http://www.tvrage.com/feeds/episode_list.php?sid=21704", "Show/Episodelist/Season", {sortOnLoad:"@no", sortOrderOnLoad:"descending"});
var dsEpisodes = new Spry.Data.NestedXMLDataSet(dsSeasons, "episode", {sortOnLoad:"seasonnum", sortOrderOnLoad:"descending"});
dsSeasons.setColumnType("@no", "number");
function airdate(region, lookupFunc) {
var realdate = lookupFunc("dsEpisodes::airdate");
var array = realdate.split('-');
return array[2] + " - " + array[1] + " - " + array[0];
function seasonnr(region, lookupFunc) {
var nr = parseInt(lookupFunc("dsSeasons::@no"));
if (nr < 10) { return "0" + nr; }
else { return nr; }
</script>
<link href="_Assets/spry/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="main">
    <h1>TV Show Title</h1>
    <div id="showInfo" spry:region="dsSeasons dsEpisodes" class="SpryHiddenRegion">
        <h2>Episode List</h2>
            <div id="eplist" class="Accordion">
                <div spry:repeat="dsSeasons" class="AccordionPanel">
                    <h3 class="AccordionPanelTab">Season {@no}</h3>
                    <div class="AccordionPanelContent">
                        <table spry:repeatchildren="dsEpisodes">
                            <tr class="{dsEpisodes::ds_EvenOddRow}">
                                <td><input name="seen" type="checkbox" value="1" /></td>
                                <td>{function::seasonnr}<span class="ex">x</span>{dsEpisodes::seasonnum}</td>
                                <td>{function::airdate}</td>
                                <td><a href="{dsEpisodes::link}" target="_blank">{dsEpisodes::title}</a></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                var acc = new Spry.Widget.Accordion("eplist", { useFixedPanelHeights: false });
            </script>
        </div>
    </div>
</div>
</body>
</html>
Sorry, I don't have an online url for you, I'm still working locally.
In the browser everything works fine, only when I preview in Adobe AIR the panels stop working.
I hope you can figure it out and point me in the right direction.
Thanks

Accordion Panels and List Menu don't work if I place html files in subfolders

Hi all,
Switched from Dreamweaver to Muse and I have very limited knowledge of code.
Not an IT expert and not a web developer this is just for my own site.
I have sub-folders in my site. All html files are inside sub-folders except index.
ie contact.html or products.html I move them manually from root to the subfolder, using the easy interface of Dreamweaver. I call the subfolder "en"
so I can have pages such as mysite.com/en/contact.html
In the subfolder I copy and paste from root the css, images and script folders,
keeping the original css/images/scripts as well, in the root, so index.html is not affected.
and same time the look of the html pages inside the subfolders does not change.
BUT
list menus and accordion panels don't work. I click and there is no movement
How can I solve this ? I know Muse does not allow the creation of subfolders,
everything is uploaded in the root.
When in Dreamweaver I had placed 50 pages in subfolders and I was indexing them in google and bing.
Now can't again put 50 pages in root and can't remove URLs and make new indexing for all these pages
Any help ? many thanks for any assistance.

The iPhone, like the Ipad, uses the Mobile Safari browser, so here's an earlier thread that might give you some insight: http://forums.adobe.com/thread/613494

Accordion panel not working correctly in IE6

Hi,
I created a page with an accordion panel set that worked fine
in FireFox. The panels start closed and then open when clicked
upon.
This works fine in IE 7 but when I open this page in IE6, the
panel tabs do not function properly. The top five do not have the
background color or any delineating lines - there is just the text
of the panel tab. When the tabs are clicked on, they will open but
the colors change oddly. Sometimes there is a small horizontal
section of no color at the bottom of the panel tab color. When the
cursor is moved around the page, the tabs can change
colors....sometimes. Other times a tab will lose color completely.
And yet, it works perfectly in Firefox. What could be causing
this problem. I was so happy that I had finally completed this page
since there was a lot of dynamic data to link to the page - and now
I feel like I am back at square one.
Please help!
Thanks

I atually figured it out - well I got it to work right but
I'm still not sure why it works. I had the accordion panel in a div
wrapper. The positioning was set to "relative". When I commented
out that line, it worked fine in IE6! I'm not sure why - but I'm
glad it did!

Accordion Panel

I currently have 5 different category names in my Accordion
Panel, each with a varying number of items within those categories.
Is there a way of making a particular category panel stay open,
depending on the particular link item that has been clicked. For
example, if I click on "pendants" in the "Jewellery" category
panel, can I make the "Jewellery" category panel appear "opened"
when directed to the "pendants" page?
Thank you,
Caryl

i will join in on that question and add a question of my own
to the Accordion Panel..
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=602&threadid =1305849&enterthread=y

Spry Accordion Panel

hi guys,
i have a Spry accordion panel, in the first panel i have some
dynamic text and some dynamic images, when i open the other panel
below, this opens over the top of the first panel (like it should)
and the dynamic text is covered (like it should) however the images
stay visable in the same place as if the images are placed ontop of
the accordion panel. The images are in the first panel container
though and so should become hidden but don't.
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Genral Info</div>
<div class="AccordionPanelContent" id="accordcontent">
<p>Username: <?php echo $row_rsFull['UserName'];
?> </p>
<p>Name: <?php echo $row_rsFull['Forename']; ?>
<?php echo $row_rsFull['Surname']; ?></p>
<p>Date Of Birth: <?php echo
$row_rsFull['DateOfBirth']; ?></p>
<p>University: <?php echo
$row_rsFull['University']; ?></p>
<p>Project Name : <?php echo $row_rsFull['pName'];
?></p>
<p>Project Description: <?php echo
$row_rsFull['pDescription']; ?></p>
<p><img src="<?php echo $row_rsFull['pImage1'];
?>" alt="image 1" class="bottomimage" /><img src="<?php
echo $row_rsFull['pImage2']; ?>" alt="image 2"
class="bottomimage2" /></p>
</div>
</div>
Any Suggestions?

That would be very easy, just remove the tabindex attribute
of the top level div of the accordion. However keyboard navigation
will not work at that moment. The dotted line is a browswer
specific visualisation to show that the specific item is selected
using the tabindex.
You could also add the following style to your page
div:active,
div:focus,
div:hover
outline-style: none; -moz-outline-style:none;
Then none of the div items with a tabindex get an surrounding
border.

Lightbox nested in Accordion panel is not working.

I am attempting to nest a lightbox slideshow in an accordion panel with less than desired results. I can get the Lightbox to nest and I can arrange the buttons just fine .However, when I preview it my forward and back buttons appear in the upper left corner and they are all messed up. This is absolutly useless as it destroys the aesthetics. Any insights as to how to fix this (not work around, I can do that...) would be appreciated.
Here are some screens:
1) layout is fine. Note the advance arrows on left and right of layout.
2) Layout seems to be fine in the preview. Thumbnails look good...
3) The advance arrows are not where I placed them in the layout. They are overlapping in the upper left corner.

Well, it's not recreating what I did becauseI don't see any images in your example. Did you populate the gallery?
Anyhow:
I created an accordion panel.
The first top panel contains a price list with text only.
Using the "+" I made a second panel and placed a "slideshow lightbox" widget
I populated the widget with roughly 100 jpegs compressed to 50% and edited my arrow keys placing them on the left and right which
gave the results in the image above.
This is repeatable on my end.

100% width accordion panel flipped upside down

i would like to use an accordion panel flipped 180 at 100% width for a pop up footer. it doesn't seem like this is supported at this time, just would like confirmation or some direction on how to make it happen. would love to see this supported, as it would really add some awesome possibilities. thanks in advance.

You can try rotated accordion and place that in footer with contents in container, there us no direct widget for such a 180 degree footer but you can try the rotated setting of accordion.
Thanks,
Sanjit

MyFaces Accordion Panel issue

I have implemented a Accordion Panel as given in example under Sandboxes under MyFaces. The problem faced by me is that i am trying to put 2 text boxes within <t:paneltab> under accordion panel tag. The 2 text boxes are appearing horizontally next to each other . I want them to appear vertically one below another...I have tried using <tr><td> but it does not work....please help me out

Well, I went into my site and discovered I "worked around" that issue. So, I don't feel like messing with the accordion panel as it has 8 seperate panels and it took me a very long time to redo (alot of typing) it. If I messed it up or crashed.... I would not be a happy camper. Anyhow thanks for the response. If I create a new one I will check it out.
Thanks,
Ed

100% width - Accordion Panels

Hello.
Is it possible to set width of accordion panels to 100%?
Site : http://faithdesign.businesscatalyst.com/index.html
As you can see, everything else in this page is nicely 100% to both sides...except those two panels.

I have an accordion widget that is set to 100% width and works on the desktop and tablet version but not on the phone version. It looks fine in the Muse preview and when I switch the preview viewer from horizontal to vertical it scales the accordion correctly, but then on a mobile device the accordion appears way over 100% width and is cropped on the right side. I have nothing on the mobile site other than the accordion to try and deduce why it's doing that, still no luck. Any thoughts?

As placing accordion panel in horizontal direction

Similar Messages

Maybe you are looking for