fx.Accordion
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
posted Apr 13, 10:04 PM |
3 | On Apr 18, 08:41 AM Armand said...
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
4 | On Apr 18, 07:34 PM martin said...
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
5 | On Apr 18, 09:31 PM Toya said...
@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.
6 | On Apr 18, 09:41 PM Toya said...
@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.
8 | On Apr 21, 03:47 AM Armand said...
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()
9 | On Apr 22, 11:46 AM Toya said...
@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.
12 | On May 1, 05:41 PM Toya said...
@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.
15 | On May 22, 02:20 PM Toya said...
@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.
commenting closed for this article
|