accordion menu effect

Looking at the accordion type effect used on the Softpress website here: http://www.softpress.com/support/faq.php
Is there any way to get the items to automatically collapse (rather than having to be clicked to close them) when a new item is clicked, like they do with the accordion action in Weavers Mootools Suite?

Richard


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

I would like that feature as well, but right now I don’t see any quick fix other than coming up with some “if/then” javascript that’s way over my head. I’ve been real happy with MooTools and the support from Weaver.


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

You could try my Protaculous Action for this. Download here: <http://
freewaypro.com/actions/downloads/>

Draw a layer-based HTML box as wide as you want the Accordion to be.
(I’ll refer to this as the parent box later on.)

Click inside that box so you get a text cursor, then insert an HTML
or Graphic item. Resize it to be the size and shape you want your
headers to be, and add some sample text and any color or style you
want to it. You may also want to add some margin to the top of this
box so it won’t crash into all the other headers when everything is
collapsed.

Click outside of the header box, so you get a text cursor in the
parent box, and enter your first block of text to follow that header.

Click on the header so it is selected, and choose Item > Actions >
Observer from the main menu. Check the ‘Click’ DOM Event, and then
enter the following in the Function Body dialog:

this.up('div').select('p').invoke('hide');
this.next('p').show();

What this bit of magic does is to find the parent, then select all of
the paragraphs inside it and hide their contents. Then it shows the
next paragraph after the clicked element.

Now simply copy and paste the header and following paragraph as many
times as you need to. You should probably also take this moment to
disable the height property on the parent box so it can grow and
shrink as needed. After you have made all your text and headers the
way you want them to be, you can make the Accordion have a default
setting.

Click on the parent, and make note of its Title in the Inspector.

Click on the pasteboard, then choose Page > Page Actions >
Protaculous from the main menu. In the first Function Body dialog,
enter this;

$('item1').select('p').invoke('hide');

Be sure to put whatever you saw in the Title field in place of item1
above (that’s just what I saw in my page). Now if you want to have
the first paragraph showing, you add this line after that:

$('item1').down('p').show();

Preview in a browser, and you should see the effect you want.

Walter

On Apr 14, 2008, at 6:22 PM, Mitchell wrote:

I would like that feature as well, but right now I don’t see any
quick fix other than coming up with some “if/then” javascript
that’s way over my head. I’ve been real happy with MooTools and
the support from Weaver.


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

Walter, I am getting errors because my actions are duplicated or messed up (I think). I have a regular and “packed” version of the script and proc actions. What should I do?


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

Thanks Walter I’ll try it out.

Richard


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

Hi Walter,
I just tried it out following your steps but all I get is a blank page.

Richard

On 15 Apr. 2008, 1:42 am, waltd wrote:

You could try my Protaculous Action for this. Download here: <http://
freewaypro.com/actions/downloads/>

Draw a layer-based HTML box as wide as you want the Accordion to be.
(I’ll refer to this as the parent box later on.)

Click inside that box so you get a text cursor, then insert an HTML
or Graphic item. Resize it to be the size and shape you want your
headers to be, and add some sample text and any color or style you
want to it. You may also want to add some margin to the top of this
box so it won’t crash into all the other headers when everything is
collapsed.

Click outside of the header box, so you get a text cursor in the
parent box, and enter your first block of text to follow that header.

Click on the header so it is selected, and choose Item > Actions >
Observer from the main menu. Check the ‘Click’ DOM Event, and then
enter the following in the Function Body dialog:

this.up(‘div’).select(‘p’).invoke(‘hide’);
this.next(‘p’).show();

What this bit of magic does is to find the parent, then select all of
the paragraphs inside it and hide their contents. Then it shows the
next paragraph after the clicked element.

Now simply copy and paste the header and following paragraph as many
times as you need to. You should probably also take this moment to
disable the height property on the parent box so it can grow and
shrink as needed. After you have made all your text and headers the
way you want them to be, you can make the Accordion have a default
setting.

Click on the parent, and make note of its Title in the Inspector.

Click on the pasteboard, then choose Page > Page Actions >
Protaculous from the main menu. In the first Function Body dialog,
enter this;

$(‘item1’).select(‘p’).invoke(‘hide’);

Be sure to put whatever you saw in the Title field in place of item1
above (that’s just what I saw in my page). Now if you want to have
the first paragraph showing, you add this line after that:

$(‘item1’).down(‘p’).show();

Preview in a browser, and you should see the effect you want.

Walter

On Apr 14, 2008, at 6:22 PM, Mitchell wrote:

I would like that feature as well, but right now I don’t see any
quick fix other than coming up with some “if/then” javascript
that’s way over my head. I’ve been real happy with MooTools and
the support from Weaver.


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

Just pick one or the other and use it all the way through. Use
prototype-packed for this since it’s much smaller.

Walter

On Apr 14, 2008, at 11:59 PM, Beatrice wrote:

Walter, I am getting errors because my actions are duplicated or
messed up (I think). I have a regular and “packed” version of the
script and proc actions. What should I do?


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

I’ll post an example later on. It worked for me.

Walter

On Apr 15, 2008, at 4:32 AM, pixelart wrote:

Hi Walter,
I just tried it out following your steps but all I get is a blank
page.

Richard

On 15 Apr. 2008, 1:42 am, waltd wrote:

You could try my Protaculous Action for this. Download here: <http://
freewaypro.com/actions/downloads/>

Draw a layer-based HTML box as wide as you want the Accordion to be.
(I’ll refer to this as the parent box later on.)

Click inside that box so you get a text cursor, then insert an HTML
or Graphic item. Resize it to be the size and shape you want your
headers to be, and add some sample text and any color or style you
want to it. You may also want to add some margin to the top of this
box so it won’t crash into all the other headers when everything is
collapsed.

Click outside of the header box, so you get a text cursor in the
parent box, and enter your first block of text to follow that header.

Click on the header so it is selected, and choose Item > Actions >
Observer from the main menu. Check the ‘Click’ DOM Event, and then
enter the following in the Function Body dialog:

this.up(‘div’).select(‘p’).invoke(‘hide’);
this.next(‘p’).show();

What this bit of magic does is to find the parent, then select all of
the paragraphs inside it and hide their contents. Then it shows the
next paragraph after the clicked element.

Now simply copy and paste the header and following paragraph as many
times as you need to. You should probably also take this moment to
disable the height property on the parent box so it can grow and
shrink as needed. After you have made all your text and headers the
way you want them to be, you can make the Accordion have a default
setting.

Click on the parent, and make note of its Title in the Inspector.

Click on the pasteboard, then choose Page > Page Actions >
Protaculous from the main menu. In the first Function Body dialog,
enter this;

$(‘item1’).select(‘p’).invoke(‘hide’);

Be sure to put whatever you saw in the Title field in place of item1
above (that’s just what I saw in my page). Now if you want to have
the first paragraph showing, you add this line after that:

$(‘item1’).down(‘p’).show();

Preview in a browser, and you should see the effect you want.

Walter

On Apr 14, 2008, at 6:22 PM, Mitchell wrote:

I would like that feature as well, but right now I don’t see any
quick fix other than coming up with some “if/then” javascript
that’s way over my head. I’ve been real happy with MooTools and
the support from Weaver.


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

Walter,

Walt,

I had some trouble implementing your suggestions, here, too. All I got out of it on the page was the first item (graphic item) in the first pair. Everything else collapsed.

Do you mean, when you state “Now simply copy and paste the header and following paragraph as many times as you need to.” that one should copy and past into the parent, in-line? That’s the only thing that made sense to me, but it didn’t seem to work.

Are we missing a div around each pair, or something, in your instructions?

Looking forward to your example, as I’ve wanted this feature for a while.


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

On 15 Apr. 2008, 6:24 pm, Joe Crnich wrote:

Walter,

Walt,

I had some trouble implementing your suggestions, here, too. All I got out of it on the page was the first item (graphic item) in the first pair. Everything else collapsed.

Do you mean, when you state “Now simply copy and paste the header and following paragraph as many times as you need to.” that one should copy and past into the parent, in-line? That’s the only thing that made sense to me, but it didn’t seem to work.

Are we missing a div around each pair, or something, in your instructions?

Looking forward to your example, as I’ve wanted this feature for a while.

There’s a problem with the directions I posted previously. If you create your headers as inline DIVs, then any text you put inside them will disappear when the page loads. The reason for this is that Freeway will wrap that text in a P, and my hiding script is really aggressive. I have to do some more thinking about how to get this effect to work naturally in Freeway. In the meantime, if you use a graphic header, or if you style your HTML header text as an H2 or H3, then you will see that it does work.

Yes, I did mean that you should copy and paste the header and the following text over and over again, inline, in the one DIV. No additional container DIVs are called for in this recipe.

Walter


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