Versions (2012-05-08) (Downloaded 410 times)


  • ScriptyAccordion (item-action) - v. 0.8.2

Compatible: Pro 4, Pro 5, Pro 5.5, and Pro 6

Author: Walter Davis

html standards css effects prototype scriptaculous accordion

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.



I would like to use the accordion as a navigation bar. Therefore it would be necessary to have the 2nd, 3rd etc. option open at page load. Is this possible?

Thanks, Erik

It's not possible as written, but it should be possible to create a navigation "flavored" version of this Action. It would need to read the current URL, decide if it had any links within itself that matched, and show the container of that link opened up. I'll put it on the list.

Is there any chance that you could also create a video tutorial for this process, which would be much easier to understand? Thanks in advance! Will.

I very much like the simplicity in control of this action, but it would be nice to be able to adjust the speed of the effect. Would you please consider this when an update is due?

Allmost forgot one other request; can it be made possible to merge the close-effect of the and and close-effect of the other? At this moment one has te be closed before the other one starts opening.

I can't figure out what I'm doing wrong. The scripty accordion isn't even an option when I try to apply the action. I have styled my headers accordingly. Could you elaborate on the hidden contents (nestled html boxes)? THanks.

Download the demo Freeway document at and it should all be clear. You apply the Action to the outermost HTML box, and then put in your contents like a layer cake: header, content, header, content. It doesn't matter at all what the header and content are, as long as you don't use the same tag for the header and the bodies.

Thanks for your response. I found out that I was doing it right, but somehow the action was disabled in my edit actions window. I do have another question, though. I can get it to work with html text, but I am trying to have a graphic image be the body. Does it support that if the image is a child item of the parent html box? If so, what should the show/hide element be set to? I can't get it to work with that.

I also want to know if it supports a table being the body. If so, what should the show/hide elements be set to?

Thanks again.

Hi Walter, I tried downloading the demo doc at the address above and I just got a page of 'code' in Safari whilst nothing dowloaded. Am I doing something wrong?

Can someone post a screen capture or something familiar? I am new to Mac and Freeway, so I am having a having a hard time grasping the terms you are using. I thought that I did everything right…but no joy.


Oops, meant similar, not familiar.

@Neil, try again, I have zipped it so your browser won't be confused. You were downloading the file on a Mac that had Freeway on it, right?

@Iley, try downloading the sample document. A picture isn't going to tell you nearly that much.

I just downloaded ScriptyAccordion 0.6.4. After installing it, it indicates that it is version 0.5.1. It is indead the 0.6.4 version as it has the checkbox for "Animate horizontally" option. Thanks Walter for all your work.

You're seeing this version number in Finder when you "get info" on the Action file, right?

The only reliable place to see the version number of any Action is within Freeway, while that Action's interface is visible in the Actions palette. Then look in the lower-right corner of the palette and you will see the actual version number.

Most Actions are distributed as regular text files, and the Finder doesn't report any version information for those at all. Action Bundles, like ScriptyAccordion, gather together multiple files, and can include an XML file called a plist containing various Finder metadata like the version number. I almost always forget to rev the number there when I update an Action. But the version number inside the Action file is always correct. Freeway ignores the plist completely.

Thanks Walter. This is good to know.

Cannot find resource: prototype1602packer.js?

Cannot find resource: prototype1602packer.js?

Remove all instances of the Action from every page in your site. Publish once. Apply the Action back again, and you should be good.

the demo does not work. dear mr. walter. i have the freeway pro 5.6.4 , and i downloaded the last version of script accordion from but DOES NOT WORK in PREVIEW TO MY PROWSER. it says scriptaculus181packer.js and prototype1604packer.js are missing.
but in works in the internet, not INSIDE THE FREEWAY PRO. i tried to create my own , exactly similar like your example from freeway pro, but does not work in preview. i tried many times. I asked help from the freeway talk, but they say to me if i have correct version, etc,,, i do have the latest version, but they do not give me any real help. i hope you can really help me. PLEASE. i have mac book pro, lion , 10.7.4

Open the demo document. Click once on the element that has the Accordion applied to it. Write down the settings you see in the Actions palette, then remove the Action from the HTML box it is applied to. (If you mouse over the tab that reads ScriptAccordion, you will see a little (x) button appear in the tab. Click it.) Now publish once. You should not see any errors. Finally, apply ScriptyAccordion to the box again. Restore the settings you wrote down. Publish again, and you should see the effect.

THANK YOU, THANK YOU , THANK YOU. at least a correct answer and great help. i lost 2 days for this. thank you for your immediate response also. seems that my mistake was that i did not press publish? or i used the same folder ? . thank you again

The example document is quite old, several versions of Freeway ago. There is an issue with bundle Actions (such as this one) where Freeway will try to use a cached version of the Action in preference to a newer, properly installed version of the same Action. The only solution is to remove the Action, publish once to clear the cache, then re-apply the Action.

Got it working as an HTML layer, but can't get it to work as a plain old HTML item. Below is a link to a page showing the list working in column and not in 2 and 3. Column 2 is a copy of column 1 with layer deselected on the HTML item to which the action is attached. Column 3 has an added HTML parent around Column 2. Didn't see anything in your instructions or comments above saying the HTML item had to be a layer. Am using Freeway 5.4.3. Have got h5 headings with div elements. Have tested on Safari, Chrome and Firefox. Any suggestions? Thanks in advance

You cannot use the Action on non-layer elements. Surprised it worked, I'll have to tighten up the restrictions in the applies-to tag.

As it only worked on an HTML layer, and this seems consistent with your first sentence, I don't understand what worked that you are surprised about.

I thought you said that you were able to apply it to a table-based layout item (blue edges). That's what surprised me.

OK. That make's sense. Have been playing with this a lot because I am trying to use the list in a right margin that is next to a center column of HTML text that can expand horizontally. As a layer I can get the list to move right properly when the window is expanded, but not to stop moving with the right edge when the window is narrowed, resulting in it overlapping the center text. I have somehow managed (can't replicate it) to embed a CSS scriptyaccordian list as a child of a non-layered HTML item so it works properly. So my question is either "does this violate how it should be used?" or "how can I replicate this?". Freeway understandably wants to convert it to a non CSS item when I try to make it a child of a plain old HTML item. Here is a link to the functional CSS Scripty Accordian list that is a child of the plain HTML box. Many thanks for your prompt responses

Figured it out. I added it as a CSS inflow item. Hope this is appropriate use of Scripty Accordian.

Glad you sorted it out. Inline layouts in Freeway can be a lot of effort, but the results are worth it.

FYI I have recently moved a Freeway 5 file from one computer to another, and successfully got Scripty Accordian working throughout the file, connecting to the new computer, new user name with its Library/ /Application Support/Freeway5/General folder. However, I am still getting Publish Problems listed for the old broken ScriptyAccordian Links whenever I preview in a browser, publish or upload. Any way to purge the code in the file of this old information?

Remove the Action from the element you applied it to, publish once, then re-apply (and re-configure) the Action. You should have no further problems after that.

Is it possible to have the accordion close again by repressing the same header tag? As far as I can see, the only way to close a tag is to open another one. The reason this is important to me is I have lots of info inside each panel and it pushes the next tag off the screen, forcing users to scroll down to get the next one.

Not the way it is currently written, no.

Is this Action compatible with Freeway Pro v.6?

It hasn't been brought up to date yet, but it doesn't need to be. I've used it in v6 and it worked fine. For optimum compatibility with newer browsers, you should also apply PrototypeUpdate to the same page. That will give you the newest versions of Prototype and Scriptaculous.

I don't understand how you can set the HTML box to have zero height (step 6 in the instructions). Help! Any attempt to do this (understandably) is refused.

Hi Walter. I'm trying to create an accordion for the first time, and can't get it to work. Can you help me figure out what I'm doing wrong?

I have FW Pro 7. On the page where I want the accordion, I created an NTML box. I dumped in the text that I want. I put hard paragraph breaks between headers and content. I used Shift+Return to create faux paragraph breaks in the content sections.

I applied a style called "body" to all of the text. Then I selected each header and applied a style called "h6". Then I applied ScriptyAccordion to the entire HTML box and published. Then I previewed in Safari, I see the entire block of text - no accordion!

Any suggestions?

Thanks Clint

Have you set the item to "layer"?

Thanks for the reply Lawrence.

What do you mean by "item"?

And what is "layer"?

In the instructions for using this action, I don't recall seeing anything about "layer".

An item is the fundamental unit within Freeway - the bit to which you are attempting to apply the accordion. The "layer" is a characteristic of the item, check the box. No, it is not mentioned in the description.

I just clicked the check box to set "layer" for the HTML box that holds the content that I want to accordion. Then I saved, published and previewed in Safari, Firefox and Chrome. The accordion effect did not appear in any of the browsers.

Can you post a link to your page here, I can't really tell from your description what could be going wrong.

The site isn't on a server yet. I don't have a place to upload it to yet.

I still have to register a new domain and set up hosting.

I zipped the Freeway document and folder - it's 19.5MB. Is there a way I could send that to you?

Not really. Why don't you preview the page in a browser, choose View Source (you may have to hunt for this in the Developer menu) and then copy and paste that code into a new snippet at either or Paste the resulting link here, and I can see it in all its glory. Once we figure this out, you can delete your Gist or Pastie and your secret will be safe!

Hi. Sorry for the delay in replying. I pasted the HTML source at gist.github. Here is the URL:

Before you view the source, I should explain what is on that page:

When I first tried to use scriptyaccordion, I created a big HTML box on the page. Then I pasted the text for the FAQs into the HTML box. Then I applied a body style to everything. Then I selected the headers (the questions) one by one and changed the style to h6. I put hard paragraphs between headers and the body text. When I wanted paragraph breaks in the body text, I used shift+return.

When this did not produce the accordion effect, I remembered an instruction I saw somewhere for scriptyaccordion about putting the body text into smaller HTML boxes that are nested inside the main HTML box. I tried doing that for the first 3 or 4 questions/answers in the FAQ text, and that didn't create an accordion effect either.

So the file I am sending has some of the body text inside nested HTML boxes (the first 3 or 4), and the bottom half of the FAQ text is how I initially formatted and styled it.

I saw an instruction to format the body text (the show/hide text as "p", but when I try to apply a style to the text, there is no "p" present that I can select, so I just chose a body style that I created.

If you can help, I would REALLY appreciate it. I've been trying to get accordion to work for 5 days. I stated in Freeway Express and hit a dead end, so I plunked down the money for Freeway Pro, with promises from Softpress that would solve my accordion problems - and the accordion still won't play for me. :(

Try this again on a new document, with nothing else on the page. Make sure that the CSS Layout button is on, and then draw a single HTML box in the middle of the page, paste in your content, and see how it works. I suspect that your entire issue is related to your use of table layouts. There's no way around this – you must use a DIV (HTML Layer) for your container, otherwise this just won't work at all.

Hi Walter - I'm reactivating this thread (last posted on Sep 24). I tried making an accordion work using Freeway and the tips you provided, but I couldn't make it work. I spent a couple more days on it, then got frustrated and put the web site on back burner for awhile.

At this point, I think it makes sense to hire somebody to set up the accordion for me. Can you do this? Or can you refer me to somebody who could do this?

Thanks Clint

Hi Walter,

I am using FW 5 Pro on my laptop to update an old client site that uses this action. I haven't edited the action or its contents at all. The old site is working OK online.

However, when I try to publish the new site, it says the action has a known JavaScript error' -26114:379:2509 and won't let me publish even when I click 'clear error'.

The details are cropped out of the dialogue box: 'A Freeway action is attempting to use AppleScript…is currently disabled. You can enable this in the…'

It highlights the line of code starting: return fwShellCommand('ping -t3 -o ajax…

I've removed the action, published the site OK, reapplied the action, but that takes me back to 'clear error'.

How can I fix this? Thanks in advance.

Easy! In your Freeway preferences, locate the check box for "use AppleScript in Actions" and check it on. You shouldn't have any trouble after that. You may need to clear the error before publishing will complete– go to the item that has the action applied, click once on it, and if you see a clear error button in the Actions palette, click that.

Worked like a dream. Thanks, Walter. You're a star!

Hi Walter- I'm using this for a list of names and descriptions. Click on a name and it drops down to show the description. I'd like to add a jpg with each description but when I do, the opening page shows the first name in a much bigger space and when clicked, no pic shows. I'm doing something wrong but don't know what. Any tips? Thanks!!

Don't know what I was doing wrong but it's working fine now. Pretty neat!

Hi Walter, is there a way to add a "close" function/button?

Thanks, Lode

Is there a way to make a text link style? I tried to format the html box with link colors, then I tried to apply a text style action. I can live with the accordion as it is, but it would be nice to add that effect when hovering over the link. (I'm working in Freeway 7.04).

Could you post a link to what you have tried? ScriptyAccordion doesn't do anything to styles or the box, so it's possible that there's something else at work here. One thing to realize is that the headers of the accordion are not links – they are whatever tag you have applied to the text (h2, h3, whatever). If you are trying to affect the look of the headers as you hover over them, then make a new style in your Styles Palette, with the Tag field set to this (substitute your own box name and header tag for item42 and h2 here): #item42 h2:hover. Make sure the Name field is empty, and that's it. Any styling you apply to that tag will be placed on the headers whenever they are moused over. As long as the box you have applied the Action to is named item42 in the Inspector, and you are using H2 tags for your headers, you will see the hover effect.

Thank you for your reply! This sounds like a good solution. However, here is a link to my attempt. - I obviously did not enter the tags properly so I posted a screenshot of the style sheet. Where should the "name field" be empty? This site is under construction so not nearly finished.

So close. In the Tag field, enter exactly this:

#yourAccordionId h2:hover

You have added item42 (which was one of my standing jokes on the way that Freeway names things) in the Name field, which in Freeway's bass-ackwards approach to CSS, is actually the Class attribute. When you precede the name with a #, you are making it into a CSS ID reference, and if you do both those things (get the id exactly the same as your layout – in this case that would be #FAQ) and get everything in the Tag field with the Name field left empty) then this will work perfectly.

In case this wasn't clear enough, in this particular layout, you would enter:

#FAQ h2:hover

in the Tag field. You have named your accordion element FAQ using the Inspector, so to translate that to a CSS ID reference, you add the # at the beginning of the ID.

Freeway is sneaky about re-entering a value in the Name field. To ensure that it does not re-fill with something, you need to press delete while the contents are selected, then press Tab to make sure it doesn't re-fill. Clicking elsewhere will restore whatever was there previously, probably style42 (wink).

That's pretty funny with the joke… I thought oh well, even though wacky it can't be wrong. I filled the blank - see new screenshot on the site, but do you think I can delete that "item42" which freeway on my page keeps calling Item6. No way! It will not delete no matter what I do. I can rename, but whenever I delete it keeps filling it with item6 - jeeez.

That's definitely a bug in Freeway then. Try doing this in the Edit Style (singular) dialog. From the Styles palette, control-click on the style you want to edit, and choose Edit style… from the contextual menu. Then triple-click on the Name value so it's all selected, press Delete, and immediately press Tab. That should result in a completely empty Name for the style.

Getting closer… The first two lines now have the hover effect, but it displays the code at the beginning of the line. And when I applied the style on the remaining sentences it did not apply the effect, but it did display the code on those lines too. I also made sure the name of the HTML item was FAQ.

When you create a tag-only style like this, it is desperately important that you do not apply it to the element you wish to control. It works by virtue of being legal CSS, but Freeway doesn't understand it or how it works directly. So you make sure (by checking as you did that you named things correctly) that it will work, but you do not try to apply it visually in the Freeway design view. If you want to check that it works (because you won't see any feedback in the design view that it is working at all) simply toggle over to the Preview pane. There, the actual HTML+CSS will be rendered and previewed in a WebKit view, just like most browsers use.

Back to your design, try highlighting each of the headers in your accordion and remove this style (command-click on the style name to un-select it from the list). If that doesn't work, then remove all styling altogether using the T tab of the Inspector (click on the various (x) icons that appear in the text styles list). Once you get it back to plain text, just click the H2 button, and you should have a clean list ready to preview.

Boy Walter, you are fast! The command-click the style name fixed it. Now the first two lines work perfectly. I obviously have a very sketchy understanding of this. Clicking the H2 button in the styles window while the scripty window is selected gives me an error that this can only be applied to text. I don't want to mess up the lines that do work now. It's so close to working.

Clicking the H2 button should only be done while the header text itself is selected. That's what that error is telling you. When the FAQ box is selected, you don't need to apply any styles to anything, you only need to ensure that the ScriptyAccordion Action is applied and configured correctly.

Awesome, it works now. Thank you so much for all your help! I so appreciate your time and patience.

How do I get rid of those email notifications of comments made on actions I once commented on?

I'm trying to create an accordion of photos. I need to see all 10 thumbnails at the top of the page and when it's moused over will open to full size photo…close when it's release, and then next thumbnail clicked/open, etc. I have a client that needs this on his page and I can't make it work. I went step by step with notes, but when I view the page it shows up as a line of icons at the top of the page but nothing happens when I click or rollover. PLEASE HELP :) I've been trying all day and give up…I don't want to resort to using a slide show..I want a fancy accordion! If you have any ideas of what I'm doing wrong please share. THANK YOU!

something like this:

You can build this with the Exhibeo application, or the Showcase application (bundled with Freeway Pro). You could also use the Target Show/Hide Layer Action and a stack of layers to do this. It's nothing that the Accordion could do for you, because the Accordion assumes you want the triggers to be interleaved with the things they control.

Thank you so much for your reply, Walter!!! For whatever reason..this never even occurred to me!! My brain is old and overworked. Thank you again, you've saved the day!!! :)

Hey Walter, I tried both showcase and exhibit and neither do a horizontal accordion. This is what I'm trying to do: . I've taken over the site and won't be using wordpress, am doing the work freeway. If you have any clues on how to create this top portion of, please let me know. They want this…and I just can't figure out how to do it. I know you have other things to do than answer my silly questions but if you have any ideas I'd love to hear. :) Thanks, Walter. :)

Exhibeo, that is.. ;)

Have a search through the manual for reference to the Target Show/Hide Layer Action. Basically, you create a stack of full-size images and a row of thumbnails (using the regular Freeway layout tools) and then use the Action to wire up your thumbnails to the individual full-size images in the stack. The only non-intuitive part will be duplicating the first image below the stack, and don't apply the Action to it, because you want it to always be visible, as a default. All of the other large images get the Initially Hidden setting applied to them, and then the thumbnail gets the click method selected and the appropriate full-size image chosen. Naming your elements in a sane manner will help a lot here, too.

Just to clarify, what you are replacing is not an Accordion effect, it's an in-page lightbox.

You are wonderful, Walter, thank you! You know, I had to go out and help a friend for 4 hours of mindless work and I was thinking about this. I actually had a brainstorm and thought, "HEY, I bet I can create a target show/hide action here!" lol - I haven't tried it yet but I'm not sure why I didn't think of this before! The tech support guy working with my client told me this was an accordion effect so Ive spent the last day trying to find something to help with this. What a crazy girl I am! :) Thank you so MUCH for your help! Now I must try and find something I can use your scriptyaccordion for! I really appreciate you, thank you. Bren

Had a lot of trouble for the last few hours implementing an Accordion on a site I am working on. First made changes in de demo and played a little with it so I understood how it works. But then when I tried it at the website it didn't work at all. After hours of trial an error the problem is solved. I had some HTML markup from WOW slider from a copied page that was incompatible with the Accordion script. After removing the WOW slider markup everything works fine. Though I don't know what exactly caused the problem. It has something to with JAVA script I guess ?

But I didn't manage to get the hover effect as described earlier. Followed all the instructions with the tags and the h2 and p sections.


Since Mac Os Yosemite (and El capitan) when publishing script Accordion with Freeway (5.5, 6 and 7), I almost always javascript errors. Sometimes it works but most of the time it does not. What was going on with this action?

Sorry, I can't duplicate that here. Can you say a little more about the errors you are seeing? Are they in the browser, or in Freeway? Are there any other Actions applied to the same page (in either case). And are there any other JavaScript libraries or scripts applied to the same page (if this error is happening in the browser)?

One troubleshooting step I would like you to take first: create a new blank document, draw a single HTML box in the middle of the one and only page, type two lines of text in it, make the first line an H2, leave the second as a P, and apply the Action to the box. If you can publish successfully, preview in a browser and mouse over the first line of text, revealing the second, then you will have confirmed what I see here. If not, we have a place to start.

Error occure in Freeway when i want to upload a site [traduction from French] : "The action “ScriptyAccordion”… puts too much time to be carried out (expired time)" An i can't publish the site with this action which is disabled. (I had no problem in Montain lion for publishing theses sites). For info, the other actions used are : WebYep init, Clearfix, Favicon, "Relative page layout"

What a great plug-in! Although the instructions looked tricky at first glance, it's really easy to install and use the accordion, many thanks!

Sign In or to comment.