Now with 50% more COLOUR!
Apr
13
2006
Ok as promised, here are my accordion samples. It includes 3 different layouts, horizontal, tab-style, and two columns.
There are many different ways you can layout the accordion. I made this page to give people different ideas and to show that you don’t have to have a vertical accordion every time.
Quick File Downloads (includes images and scripts)
horizontal
tab-style
two columns
You’re great and a girl of words like i can see. This is my first time looking around your website and i’ve been surprised with your skills to make things great in web design. Keep your mind and all of you over there.
Hi
Nice examples I was trying a horizontal version als but you beat me to it saves me some work. You might want to put an extra div in the panles and that you give the height of the main item 310px and an overflow of hidden. this way it doesnt slide down the bottom.
I added an extra div because i there i walos want scrollable content so the .stretcher.p i gave a slightly smaller height and an overflow:auto.
that did it for me
Armand
Hi,
I’ve been trying to implement your Accordion into a new blog-design – and so far it’s going quite well.
I’ve been testing the design on some of my friends and (apart from being amazed of how cool it looks) have found out that almost all of them think that it’s broken since they can’t press the buttons and make it vanish (and return to how the page looks when it loads).
I am quite new to this moo.fx thing, and know next to nothing about javascript, but I was wondering if there was a way to have my menues close completely again.
You can preview the site at:
http://www.edotistic.com/playground/
Any help would be most welcome,
cheers
@Armand: I’ve tried different things to stop it from creating the vertical scrollbar but the only solution I came up with only worked in FireFox and I think Safari. But in IE6, it makes all the content disappear after it loads.
@Martin: Hey, I like your design. Its cute.
I don’t think there is a problem with the accordion. I think that you just haven’t linked back to the first div that loads when the page loads. If you go back an add a link to the first one you should be fine.
thankyou, thankyou thankyou!
i had been looking for a horizontal accordion for a month or two and gave up. thankyou, a number of people will be so greatful for this help
here is what i have so far, works ok herebut i need to tweak it a bit. I dont liek the scrollbars appearing when you collapse a panel. Now the best solution would be set it to overflow hidden, instead of overflow auto and then on fullexpand of panel get the div that is opened and apply a new style overfow auto, so that way scrolling will only appear when panel is opened
But I havent looked that deeply into moo.fx if there is something line onPanelExpand()
@Brenton: You’re welcome!
@Armand: I like what you’ve done (and in works in all browsers). As a layout, the horizontal accordion looks best if the content isn’t longer than the stretchers. No one likes scrolling when they don’t have to. I mean if it were going to be bigger that the accordion itself, why even put it there?
I think its a good idea to use overflow:hidden only to hide the overflow when the accordion expands and collapses but when its open the content shouldn’t need a scrollbar.
So I actually have to go back and fix my own accordion.
Yeah i dont like scrolling as well, but i needed it for an example that had a nr of short text items but one was a bit bigger so that needed the scrolling
one question. so far i’ve got a very rough page here
bmanks.com/portfolio.html
i’ve noticed that images and text load in from the top left corner, is there anyway to change this? thanks
@Brenton: I think you would have to edit moofx itself. When “boxes” expand and collapse, content does the same. So since the horizontal accordion has width and height set to true it loads left top down. If it were a vertical accordion it would load top down. I hope that helps.
Mmm i have a problem with the two columns style, when i load the content it dissapears, its there any solution or am i doing something wrong ?
@jandro: I don’t understand what you mean. Are you saying that it never ever shows you content even when you click on the “stretchers”?
Because I’ve said that the two column accordion is the only one I haven’t been able to start open. So if that was is your problem, I still don’t know the answer.
Apr 14, 11:18 PM