Slide effect for content

Question

Is it possible to have something like this: http://pr0digy.com/sandbox/mootools/slide-effect/ on a iweb page?? How do I do it?? I'm lost with coding so give me the "for dummies" approach :P

Answer 1

This:
<script type="text/javascript">
//<![CDATA[
var Site = {
start: function(){
if($('vertical')) Site.vertical();
if($('horizontal')) Site.horizontal();
if($('accordion')) Site.accordion();
vertical: function(){
var list = $$('#vertical li div.collapse');
var headings = $$('#vertical li h3');
var collapsibles = new Array();
headings.each( function(heading, i) {
var collapsible = new Fx.Slide(list, {
duration: 500,
transition: Fx.Transitions.linear,
onComplete: function(request){
var open = request.getStyle('margin-top').toInt();
if(open >= 0) new Fx.Scroll(window).toElement(headings);
collapsibles = collapsible;
heading.onclick = function(){
var span = $E('span', heading);
if(span){
var newHTML = span.innerHTML == '+' ? '-' : '+';
span.setHTML(newHTML);
collapsible.toggle();
return false;
collapsible.hide();
$('collapse-all').onclick = function(){
headings.each( function(heading, i) {
collapsibles.hide();
var span = $E('span', heading);
if(span) span.setHTML('+');
return false;
$('expand-all').onclick = function(){
headings.each( function(heading, i) {
collapsibles.show();
var span = $E('span', heading);
if(span) span.setHTML('-');
return false;
horizontal: function(){
var list = $$('#horizontal li div.collapse');
var headings = $$('#horizontal li h3');
var collapsibles = new Array();
headings.each( function(heading, i) {
var collapsible = new Fx.Slide(list, {
duration: 500,
transition: Fx.Transitions.linear
collapsibles = collapsible;
heading.onclick = function(){
var span = $E('span', heading);
if(span){
var newHTML = span.innerHTML == '+' ? '-' : '+';
span.setHTML(newHTML);
collapsible.toggle('horizontal');
return false;
$('slideout-all').onclick = function(){
headings.each( function(heading, i) {
collapsibles.hide('horizontal');
var span = $E('span', heading);
if(span) span.setHTML('+');
return false;
$('slidein-all').onclick = function(){
headings.each( function(heading, i) {
collapsibles.show('horizontal');
var span = $E('span', heading);
if(span) span.setHTML('-');
return false;
accordion: function(){
var list = $$('#accordion li div.collapse');
var headings = $$('#accordion li h3');
var collapsibles = new Array();
var spans = new Array();
headings.each( function(heading, i) {
var collapsible = new Fx.Slide(list, {
duration: 500,
transition: Fx.Transitions.quadIn
collapsibles = collapsible;
spans = $E('span', heading);
heading.onclick = function(){
var span = $E('span', heading);
if(span){
var newHTML = span.innerHTML == '+' ? '-' : '+';
span.setHTML(newHTML);
for(var j = 0; j < collapsibles.length; j++){
if(j!=i) {
collapsibles[j].slideOut();
if(spans[j]) spans[j].setHTML('+');
collapsible.toggle();
return false;
collapsible.hide();
window.addEvent('domready', Site.start);
/>]>
</script>
Plus this:
http://pr0digy.com/sandbox/mootools/slide-effect/js/mootools.v1.11.js
None of it is for "dummies". It would require "hand editing" of the iWeb Published pages.