Michael's Scriptaculous Effects Tutorial Expansion

[kcsportsguy]

I'd like some help regarding Michael's tutorial. (http://24ways.org/advent/introduction-to-scriptaculous-effects)

I have it working, however I have multiple things I want to expand, which is fine, as they all work. However, I want it to collapse any already open ones before displaying the other. I know this is possible on moofx, but I don't know how to accomplish this using prototype.js.

Any help is much appriciated!

Thanks,
KCSG
Really wants to get this to work.

[kcsportsguy]

Should I just use moofx, or do both not mix well?

[Oompa]

They don't mix well. Plus you're wasting bandwidth making your users download both.

[kcsportsguy]

Well then, I gotta figure out how to make it collapse those that are open.

Any suggestions?

[Dancameron]

I'd have to say that moo.fx was the only thing that I could get working. All you need to do to get moo.fx working is include the script paths in the header and put

myHeight1 = new fx.Height('container1', {duration: 400});
myHeight1.hide('height');

after

<script type="text/javascript">//<![CDATA[
window.onload=function() {
liveSearchInit();
<?php if( !is_user_logged_in() && is_single() && ($comment_author = $_COOKIE['comment_author_'.COOKIEHASH]) and ('open' == $post-> comment_status) or ('comment' == $post-> comment_type) ) { ?>HideUtils();<?php } ?>

So it looks like this:

<script type="text/javascript">//<![CDATA[
window.onload=function() {
liveSearchInit();
<?php if( !is_user_logged_in() && is_single() && ($comment_author = $_COOKIE['comment_author_'.COOKIEHASH]) and ('open' == $post-> comment_status) or ('comment' == $post-> comment_type) ) { ?>HideUtils();<?php } ?>

myHeight1 = new fx.Height('container1', {duration: 400});

myHeight1.hide('height');
}
//]]></script>

[kcsportsguy]

Thank you.

Have you mixed moofx and prototype?

Btw, a coder I know gave me a working version using prototype. I'll try to see which is better.

[Dancameron]

Please share if you get it to work. I don't like the mixing but I really like the way I have it now.

[kcsportsguy]

// JavaScript Document
var openElm;

Effect.OpenUp = function(element) {
element = $(element);
new Effect.BlindDown(element, arguments[1] || {});
}

Effect.CloseDown = function(element) {
element = $(element);
new Effect.BlindUp(element, arguments[1] || {});
}

Effect.Combo = function(element) {
element = $(element);
if(element.style.display == 'none') {
if(openElm != null) {
new Effect.CloseDown(openElm, arguments[1] || {});
}
new Effect.OpenUp(element, arguments[1] || {});
openElm = element;
}else {
new Effect.CloseDown(element, arguments[1] || {});
openElm = null;
}
}

I don't take credit for it. It also isn't as smooth as some of moofx, but it does the job so I won't complain.