ScriptyAccordion Action

Freeway
1

I’ve heard a number of requests on this list for a way to make an accordion effect where only one element would be open at a time. Click on a different header, and the current element would roll up and the new element would open.

Unfortunately, this isn’t possible when using TransitionFX to build the effect. I also found that whole construction technique to require a lot of clicking and applying of Actions.

So ScriptyAccordion is designed to alleviate both of those pain points in one simple package.

You apply it to the parent HTML box, and tell it what kind of element you are using for the headers and which kind of element you are using for your toggling elements, and whether you want to have only one element showing at any given time or not. That’s all. If you want to add more elements to the accordion, you just add them inline.

For example, you could style up your headers as H3 elements, and your intermediate text as paragraphs. You don’t need to add links to the headers, the script will add the behavior to them automagically. If you wanted to have multiple paragraphs between the headers, then you would need to use a nested DIV as your intermediate text container. Type a header, then at the end of the line, choose Insert > HTML Item. Double-click into that inline box and add your text. Then click into the parent container and add your next header and DIV pair.

http://www.actionsforge.com/actions/view/110-scriptyaccordion

One thing I still need to add is a checkbox to toggle the default view. Currently, it always opens up the first element in the accordion, as a tease. I plan to add a checkbox to turn this off so the accordion is completely collapsed when the page opens.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Interesting. I tried it out and cannot get it to work consistently. Perhaps I’m use to setting “divisions” for both items if that’s what DIV means.

I’ll have to try it out in more detail this weekend. Thanks for the time spent making the action.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Yes, if you use the same element for both the heads and the “bodies” of the accordion, then it will not work. One of my to-do items is to make the picking lists adjust their options dynamically to reflect the current state of the other list – to make them mutually exclusive in other words.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

I was just trying out this effect for one of the new sites we’re working on. I use Transition FX, but still in the testing mode.

I’ll give this a go, too.

Thanks!

Bob

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Walt, is this action production ready? I’d like to try using it on a new site I’m working on.

Also, the action has a .fwactionb suffix. Is the “b” supposed to be there?

Thanks.

Bob

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Yes, and yes.

There is an upgrade planned for whenever I finish wrapping presents and making bread and such domestic stuff, but you can use it now.

The upgrade will simply make it impossible to select the same container for the trigger element as the disclosure element, so you won’t be able to set both picking lists to “Division” and end up with a completely invisible accordion.

The fwactionb extension indicates that this is an Action “bundle”. If you control-click it in the Finder, then select Show Package Contents from the contextual menu, you will see what’s inside. A bundle is a Mac way of presenting a folder to the end user so that it appears to be a single file. Many applications are bundles, but they get to use the .app extension, which does much of the same magic.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Great! Thanks, Walt.

And thanks for the Action.

Bob

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

You’re welcome. I just posted version 0.2, which keeps you from shooting yourself in the foot. Any element you choose for your trigger will be removed from the list of possible elements to hide and show.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Thanks again, Walt.

Have a nice holiday.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

I’m sure I must be doing something wrong, but I can’t seem to get this to work.

Can you post an example? I may be adding the content incorrectly.

Yes, I’m up late on Christmas Eve doing Freeway stuff.

Been a long day…

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

It took me awhile to figure this out, but it suddenly started working
and I’m not
sure why. It works using the Preview button of the FW editor environment
I am using version 0.2 of the action

You can get my simple FW project example at http://AllMyTrash.com/ACORDN/Acordn.zip

there are two pages, one using paragraph markers for the content
the other uses div

both use h3 style ( which I had to make in the style editor ) as the
trigger

click on the headings of the garbage test pages at:

http://allmytrash.com/ACORDN/acordn1.html

http://allmytrash.com/ACORDN/acordn2.html

LLE

On Dec 25, 2008, at 12:13 AM, Robert Bovasso wrote:

I’m sure I must be doing something wrong, but I can’t seem to get
this to work.

Can you post an example? I may be adding the content incorrectly.

Yes, I’m up late on Christmas Eve doing Freeway stuff.

Been a long day…

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

I tried the same set up as the first example and couldn’t get it to work.

The other problem is, the sub head of the first item (or any item, I guess) is always show. I’d rather have none shown and then one at a time shown.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

On 25 Dec 2008, 6:32 pm, Robert Bovasso wrote:

The other problem is, the sub head of the first item (or any item, I guess) is always show. I’d rather have none shown and then one at a time shown.

It’s on my list to do.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

As I said, I was working on the first example and it wouldn’t work.
Then I took a break to look at the TV and when I came back, it was
working. I don’t remember if I did something to the project before the
break or not. Anyway it has worked since.

I agree about getting them all closed.
It would be nice, I think, if you clicked on an open trigger, it would
then close. So you could have all of them closed.

But this demonstrates the problem of software designed by someone
else, it never does quite what it would have done if you had written
it yourself. So my motto is to take what I get and be happy, or
suggest changes or write one myself.

Another example I found ( Not Freeway ) is at

http://www.ajaxdaddy.com/demo-interface-accordion.html

It shows some of the code used to create the effect
I like the fixed size text area with the scrollbar

LLE
P.S. Thanks Walter,for the ScriptyAccordion Action

I was just playing with my test case and created a new page. I believe
I discovered that the defaults that come up in the action window are
h3 and p. If you set up a page with this, i.e. h3 headers and p type
paragraphs, it won’t work until you go into the action window and
change the show/hide elements to something other than p and then back
to p. Now it works, for me anyway.

On Dec 25, 2008, at 2:32 PM, Robert Bovasso wrote:

I tried the same set up as the first example and couldn’t get it to
work.

The other problem is, the sub head of the first item (or any item, I
guess) is always show. I’d rather have none shown and then one at a
time shown.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

Well, I’m having all kinds of problems with it, so I’ll probably wait until they are sorted out or I see a tutorial.

I set it up exactly as the tests sent to me and it either doesn’t work at all or works incorrectly.

Probably user error on my part.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

16

I’ve uploaded a new version incorporating the changes you asked for.
There are now two checkboxes. One toggles the behavior to show or hide
the first option. The other toggles the behavior to only allow one
option to remain open at the same time. If you leave both un-checked,
you will get an accordion which starts off closed and allows the
visitor to click to open one or more options and have them remain as
set.

Please download the new version, install it in Freeway, and try the
following steps precisely as written. I do want this to Just Work™ as
you expect it to.

  1. Draw an HTML box on the page.
  2. Double-click inside it to get a text cursor.
  3. Type your first header and press Return.
  4. Type your first paragraph to go with the first header, and press
    Return. (Don’t expect multiple paragraphs between headers to work in
    this particular construction.)
  5. Repeat steps 3 and 4 until you have all of your content in place.
  6. Double- or triple-click to select the first header, and click on
    the h2 style in the Styles palette list to apply that style to the
    header. Repeat for each header in the box.
  7. Click on the pasteboard, then single-click on the box you created
    in step 1 to select the box (selection/resize handles showing).
  8. Click on the icon to the left of the height field in the Inspector
    to remove the height from the box.
  9. Select Item / Actions / ScriptyAccordion from the main menu to
    apply the Action to the box. Leave all default settings.
  10. Preview. You should see the default behavior (first item “open”,
    all others hidden).

Now you can style the h2 and paragraph as you like to give the visual
effect you want. Also fiddle with the controls, uncheck one or the
other, and see if you can get the behavior you’re looking for.

Once you have the hang of the basics, you can move on to more
elaborate constructions.

To get the effect where the sections are fixed height with scrollbars,
simply change step 4 to this: From the main menu, select Insert / HTML
Item. Click once on the resulting 100px-square box to select it, then
drag it out to the width and height you want your disclosure area to
be. In the dimensions segment of the Inspector, change the Overflow
picker from Visible to Auto. Double-click inside the inline HTML box
to get a text cursor, then add your content. You may use multiple
paragraphs within this box. Finally, change the Show/Hide Elements
picker in the Actions palette from p to div.

This is also how you could make an accordion with multiple paragraphs
or more elaborate content inside the segments. Just skip the business
with the Overflow setting, and remove the height from the inline HTML
box as you do in step 8 of the basic accordion recipe.

Now, when I’ve had a chance to recover from all this, I’ll figure out
how to make this work on the horizontal instead of just the vertical.
More fun!

Walter

On Dec 25, 2008, at 3:53 PM, LLE Freeway wrote:

As I said, I was working on the first example and it wouldn’t work.
Then I took a break to look at the TV and when I came back, it was
working. I don’t remember if I did something to the project before
the break or not. Anyway it has worked since.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

17

Walter,

Thank you for taking the time to provide this explanation. I was doing
it differently and apparently wrong, even though I got something to
work.
It’s like the old saying, everything is easy once you know how, and
real difficult when you don’t

LLE

On Dec 26, 2008, at 1:43 PM, Walter Lee Davis wrote:

I’ve uploaded a new version incorporating the changes you asked for.
There are now two checkboxes. One toggles the behavior to show or
hide the first option. The other toggles the behavior to only allow
one option to remain open at the same time. If you leave both un-
checked, you will get an accordion

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

18

I think I’m running into a problem here Walter. Here’s what I did.

I went through the 10 steps above and got it working. Then I went back into Freeway and adjusted a line of text and unchecked “Show the first element when the page loads.” I simply just added a random sentence to a random paragraph. I republish and the effect is gone…meaning that all the accordion parts are open. I try to force a republish to the page, make sure my cache is clear and my history is clear, and I refresh the page and it still doesn’t work.

The only way I can get it working again is if I cut and paste the HTML item onto the page and then publish and then the action works.

Can you replicate this on your end?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

19

No, I just tried editing some text in the paragraph below my second
header, previewed, and it all worked.

Could you try previewing into Firefox with the Firebug debugger
active? If you’re seeing all fields showing, there might be an
entertaining error to report. Then again, I wrote this to be fairly
oblique in how it gets its elements to interact with. If your elements
are not as it is set to find them, then you would get nothing at all
without it necessarily being an error.

Walter

On Dec 26, 2008, at 4:12 PM, Dan J wrote:

Can you replicate this on your end?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

20

Also, make very sure you are using the latest version – the Actions
palette should have a little 0.3 in the bottom-right corner when the
DIV you applied it to is selected.

Walter

On Dec 26, 2008, at 4:12 PM, Dan J wrote:

I think I’m running into a problem here Walter. Here’s what I did.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options