Accordion widget - space between tabs possible?

hi guys.
i have a simple accordion, similar to the generic template but with no outline, i want to separate the tabs so they have transparent space, at the moment they are butted up together. can anyone tell me a simple way to do this? i tried spacing but that does not work. i also tried three seperate accordions but they overlap each other.
thanks

Hi,
You can use three separate accordions and uncheck the option which says "overlap items below" this should resolve your issue.
Also, I must tell you that to see how the accordions will work , please preview the page in muse as in the design mode you will not be able to see the movement of the accordions.
Hope this helps
Regards,
Rohit Nair

Similar Messages

How do I add a new panel to the accordion widget in-between two others (NOT at the end)

In the accordion widget, the + button at the bottom adds a new panel to the end. I have a series of panels that are in alpha-sort and need to add a new panel in the middle... I can't figure out how to do it without re-doing the whole thing. is there a way to do this?

Gah! Thanks Mac.
That was the first thing I tried! I must not have had the right level selected. It's been driving me batty, but I've got it now.

Can I place a (Rectangle Tool) container filled with an image in an (Accordion) widget and make it clickable?

Is it possible to use the Rectangle Tool to create a container, fill the container with a graphic image, place the container and image in an Accordion widget space and make the container clickable to open and close the Accordion?
I've done this but the container isn't clickable, only the other areas of the Accordion window are. Can this be done?

You can use the image as fill for label of accordion which will open the container on click.
If this does not answer your question then please provide me an example where I can see what exactly you are trying to achieve.
Thanks,
Sanjit

How to add space between two tabs in accodion widget?

Hi! I am using the accordion widgets and trying to add space between each of the tabs, would someone help me on this. Thanks

Directly editing the output of Muse is virtually always a bad idea. At a minimum it will create a very cumbersome workflow since Muse will overwrite your changes every time you re-export (export, upload, publish, preview).
It depends on exactly what visual effect you want to achieve, but you probably just need to select the accordion widget and use the Spacing panel to adjust the vertical gutter value.

Is it possible to make the top tab in the accordion widget remain open constantly?

I'm looking to use the accordion widget as a secondary navigation in my site's sub pages. I've noticed other websites doing this successfully and one site inparticular has their top accordion panel always open.
This allows them to have their three main calls to action always accessible for the visitors to select.
I've tried implementing this but it doesn't seem to be possible?
Is there any way to access the code for the widget to see if I can tweak this to work?

hello, you can set "about:newtab" as your homepage:
[[How to set the home page]]

Spry Accordion Widget | Different Rollover Colour On Each Tab

Hi... I hope someone out there can help me.
I've used the Spry Accordion function to create collapsible panels. Presently, each tab is white. I can get the background colour to change on rollover, but ideally wanting each tab to display a different colour.
I recognise that this will require some CSS, but unsure of how to set this up.
Example, tab one would be:
.AccordionPanelTab {
background-color: #CCCCCC;
border-top: solid 1px black;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
.AccordionPanelTabHover {
color: #555555;
How can I easily incorporate the different rollover colours for the each tab (2, 3, 4 etc.) without having multiple css and js files? Needs to work in IE8!
Thanks in advance.

If you want to follow what I am going to say, please create a new document with a SpryAccordion as the only bit of code. Then view the document in SPLIT and LIVE and LIVE CODE as in
Now HOVER over the labels, do not click and see what happens to the markup. Hovering over the labels will add a class of AccordionPanelTabHover to the respective element. Also notice the classes of AccordionPanelOpen and AccordionPanelClosed. See below
What the original code does not have is a way to identify or target individual tabs. In your example you have done that by changing AccordionPanelTab to AccordionPanelTab1 etc. Personally I would not do that. I would keep the original classes in tact and add a unique class like Tab1 etc. That way we will not touch the original CSS, adding our own overriding style rules.
If you look at the following code we have done exactly that. Notice the lack of a space between some of the selectors, this is because they are contained within the one element.
<!doctype html>
<html>
<head>
<meta 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">
<style>
.AccordionPanelOpen .AccordionPanelTab {
    color: #FFF;
.AccordionPanelOpen .AccordionPanelTab.Tab1, .AccordionPanelOpen .AccordionPanelTab.Tab1.AccordionTabHover {
    background-color: #900;
.AccordionPanelOpen .AccordionPanelTab.Tab2, .AccordionPanelOpen .AccordionPanelTab.Tab2.AccordionTabHover {
    background-color: #960;
</style>
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab Tab1">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab Tab2">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
If you paste the above code into a new document and view it as described above, have a look at where the classes appear as you hover over the elements.

Space between thumbnails - Lightbox Widget

Hi
Does anyone know if it's possible to control the space between the thumbnails in Lightbox widget?
It's always with 10 pixels, no matter the size of the thumbnails.
Cheer's
Dandalo Gabrielli

You can control the spacing in the spacings panel. Select any thumbnail and adjust the margin to change the spacing.

How do I create equal space between multiple tabs in Pages?

I am trying to create four center tabs with equal space between each but can not fiqure out how to achieve this. I owuld like to avoid using tables becuase I am trying to make sure the document is fully cross-paltform (Word, Pages, Open Office, etc.). Any ideas?

K or C,
The Text Inspector, "Tabs" tab has a box where you create tab stops. Click the plus sign to add a stop. When you are done, make a Paragraph Style to preserve the settings. As for regular spacing, you may have to use some arithmetic to achieve that.
These settings should be respected by any normal word processor.
Jerry

How to provide space between two tabs in a tabbed pane using Swings?

I want to place two tabs on a tabbed pane with a specified gap in between. How to give the space between them. Please suggest me how to implment this.
Thanks in advance.

set your own UI, overriding paintTab(..) to add 5 (or whatever gap) to each of rects.x

How can I add some space between each tab in JTabbedPane?

I added some tabs in a JTabbedPane and want to add some spaces between each of them. How can I do this?

There are different questions, aren't they? if you ask how to move a component to the right, and get an answer,
then ask how to move it lower, it may seem to be a different question,
but the concept is the same, and the answer would almost certainly
be the same (with a tweak). Basically you should be smart enough to work
out how to move it lower for yourself.
if you don't understand the how concept of my response in the linked post
relates to this post, then you're in the wrong game.
to make it easier for you to understand
set your own UI, overriding calculateTabHeight(..), setting whatever you want
set your own UI, overriding paintTab(..), setting whatever you want for rects[..].x
having pointed you to the area where you do this stuff, you should have been
smart enough to work it out for yourself.
at some point you will have to take your feet off the desk.

Menu widget (horizontal) space between buttons

How do I get spaces between navigation buttons on the horizontal menu widget?
In the basic Katie video, she does this as a "pre-set". Then in the advanced video it shows up in the images with no discussion. Thanks for helping.

Hello,
You can either choose to use manual menus for this and place the menu as per your requirement, or you can use the "uniform spacing" option in the item size section of menu options for some spacing between the menu items.
Cheers
Parikshit

How to I increase the space between the top of tabs and the frame of the entire window? It was fine until Firefox updated

Hello,
How to I increase the space between the top of tabs and the frame of the entire window? It was fine until Firefox updated and since it updated it reduced the space. Now the space is too thin which makes it more difficult to move the open window frame around when I need to grab something from Desktop. Image attached.

In the image, see how thin the space is right above the tab? It was much wider before Firefox update so if any know how to make it wider again, please let me know. Thank you
''troyable7 [[#question-1058550|said]]''
<blockquote>
Hello,
How to I increase the space between the top of tabs and the frame of the entire window? It was fine until Firefox updated and since it updated it reduced the space. Now the space is too thin which makes it more difficult to move the open window frame around when I need to grab something from Desktop. Image attached.
</blockquote>
In the image, see how thin the space is right above the tab? It was much wider before Firefox update so if any know how to make it wider again, please let me know. Thank you

Can I set my accordion widget to "expand all" tabs?

I am using an accordion widget to display content on my web page. Is there a way to allow the user to "expand all" of the accordion tabs at once?

One way you can achieve this is by creating single panel accordion files, just copy the file down for each section, make sure to set the accordion setting to "Can close all".
See attached screen shot when published.... the panels are all closed, but you can open all to view.

Tabbed and accordion widgets not working after latest export.

The accordion widget was working on the sites I built, but now when I export the sites after changes, the accordion and tabbed panels don't work.
The link below shows the old accordion and the new one I was placed from Muse.
http://www.thresholddrain.co.nz/newsite/faqs.html
I don't have time to redo every accordion and tab on the site. Any ideas why it is not working and what I can do to fix it.
Thank you,
Ana

rodyaj wrote:
I'll check that error message out when I get home, but for now, you could try adding this to your .xinitrc instead:
setxkbmap -option caps:escape
This helped. Thanks!
rodyaj wrote:
Or maybe try setting by keycode rather than keysym in .Xmodmap. e.g.,
clear Lock
keycode 0x42 = Escape
(I think you'll need to use xev to find out what keycode your escape key is though.)
This one didn't work though. I tried removing the clear Lock line, and I don't get any errors. But then it doesn't work properly.

How can I eliminate the pointless top bar, close up the spaces between bars that are wasting space and reduce the depth of the tabs so that I have the space I had before for the websites I am looking at?

I have updated to the latest form of Mozilla Firefox, and the top of the screen is altered so that it occupies far more space than it used to do, leaving far less space for what I want to look at. Why are there spaces between bars? Why are the tabs deeper than they used to be or need to be? How can I eliminate the pointless top bar which merely duplicates the information in the tab bar? Is there any way of simply restoring the previous arrangement?

Okay, I accept that this is just how it is, and there is nothing to be done about it, because no-one except me thinks that the icons and toolbars should be organised to take up minimum space in order to allocate maximum space to the page.
The crowning irony of all this is that, having updated to the latest Mozilla Firefox and consequently having this arrangement at the top of the page which I don't like, the middle of the page now comes up with its old message, 'You are not on the latest version of Firefox. Upgrade now.'
Computers are very odd. :(

Accordion widget - space between tabs possible?

Similar Messages

Maybe you are looking for