Ciao everyone- I am new at this!!! ---- what are the procedures in
putting this on your website. I uploaded Scriptaculous and using Serif
Webplus for construction of the site. When I insert a html box into
the website where does all this go? I tried putting it all in the body
and then part of it in the head (the java) but it doesn't work as it
just shows each box but does not utilize the accordion effect
HTML:
<style>
#accordion {
border: 1px solid #1F669B;
width: 600px;
height: 310px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 11px;
}
h3 {
font-size: 12px;
padding: 4px 6px 4px 6px;
margin: 0;
border-style: solid none solid none;
border-top-color: #BDC7E7;
border-bottom-color: #182052;
border-width: 1px 0px 1px 0px;
color:#fff;
background-color: #63699C;
cursor:pointer;
}
#visible {
color:#CED7EF;
background-color: #63699C;
}
#panel1, #panel2, #panel3, #panel4 {
margin: 0;
padding-bottom: 0;
border: none;
}
.panel_body {
height:199px;
}
</style>
</head>
<body>
<div id="accordion">
<div id="panel1">
<h3 id="visible" onClick="accordion(this)">Panel 1</h3>
<div id="panel1-body" class="panel_body">
<div>
This is the contents of this panel.
</div>
</div>
</div>
<div id="panel2">
<h3 onClick="accordion(this)">Panel 2</h3>
<div id="panel2-body" class="panel_body">
<div>
This is the contents of this panel.
</div>
</div>
</div>
<div id="panel3">
<h3 onClick="accordion(this)">Panel 3</h3>
<div id="panel3-body" class="panel_body">
<div>
This is the contents of this panel.
</div>
</div>
</div>
<div id="panel4">
<h3 onClick="accordion(this)">Panel 4</h3>
<div id="panel4-body" class="panel_body">
<div>
This is the contents of this panel.
</div>
</div>
</div>
</div>
Javascript:
function accordion(el) {
if ($('visible') == el) {
return;
}
if ($('visible')) {
var eldown = el.parentNode.id+'-body';
var elup = $('visible').parentNode.id+'-body';
new Effect.Parallel(
[
new Effect.SlideUp(elup),
new Effect.SlideDown(eldown)
], {
duration: 0.1
});
$('visible').id = '';
}
el.id = 'visible';
}
function init() {
// hide all elements apart from the one with id visible
var acc = document.getElementById('accordion');
var apanels = acc.getElementsByTagName('div');
for (i = 0; i < apanels.length; i++) {
if (apanels[i].className == 'panel_body') {
apanels[i].style.display = 'none';
}
}
var avis = document.getElementById('visible').parentNode.id+'-
body';
document.getElementById(avis).style.display = 'block';
}
function addEvent(elm, evType, fn, useCapture) {
elm["on"+evType]=fn;return;
}
addEvent(window, "load", init);
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
