ScriptyAccordion

Part of: ScriptyAccordion

Description

Create an accordion effect in just a few clicks! Apply this Action to an HTML box on your page, choose the format you need, and you’re done. All scripting is completely unobtrusive, and persons who have disabled JavaScript (or the Google-bot indexing your page) will still see all of your content.

For this to work, you need to make all of your accordion content within a single HTML box. You may use any combination of elements you like, as long as the headers and the hidden elements use different container types. For example, you could use images for your headers and regular text paragraphs for the hidden elements, or you could use h3 tags for the headers and DIVs (nested HTML boxes) for the hidden elements — it’s up to you.

Apply the Action to the parent HTML box, and set that box to have no height. Choose the event you wish to use to trigger the effect (mouseover or click). Choose your Trigger element type (the headers that you will click) and the Show/Hide elements type using the pickers provided. By default, you will only see one hidden element at a time, but there’s a checkbox to disable this if you want to be able to leave more than one element “open” at once.

New Horizontal Accordion Feature

You may now make accordions that animate horizontally. The layout technique is the same — simply draw your container and insert all elements as inline objects within it. Important difference: you must make your headers as graphics (img) and your show/hide elements as DIV. No other recipe will work.

Draw your container as wide as you like, and as tall as one element in your accordion. Each additional element you add to the accordion will appear (in Freeway) to drop down out of that container, but you can hide this in the design view by setting Overflow to Hidden. When the Action processes the contents of the container, it will hide most of them, and make everything line up horizontally using Floats.

You do not need to adjust the alignment of the objects in any way, simply insert them and leave the default alignment behavior alone. Yes, it will look bad in the Design view, but if you preview, you’ll see what you’re looking for.

Tags:

effects

prototype

scriptaculous

  Register or log in to add tags

Register or log in to view or add comments.