Embedded scriptaculous Accordion 2.0 Effect
This is a tip I use to create accordions within accordions using a slightly modified scriptaculous Accordion 2.0. effect
What is an accordion effect?
A quick definition: A set of panels of fixed size that slide open to reveal the contents of a panel. Usually you would open only one panel at a time, almost like seperate pages.
The details
I altered some of the code in the above referenced article to enable me to have accordions embedded in other accordions. I wanted to use the accordions like sections on the same page. That way, only the specific panel of interest needed to be opened, reducing the amount of scrolling that had to be done for long pages.
I used the scriptaculous 1.6.5 effect library and created the required javascript, css and html files.
For the Javascript code, I slightly altered the ‘function accordion()’ and added ‘function accordion_init_all()’ to be used when the document is loaded in a browser.
Javascript File
function accordion(el) {
var elup;
if (Element.hasClassName(el.parentNode.id+'-body','visible')){
//do not need to perform an actions
return;
}
var eldown = el.parentNode.id+'-body';
var apanels = document.getElementsByClassName('panel_body',el.parentNode.parentNode);
for (var i=0;i<apanels.length;i++){
if (Element.hasClassName(apanels[i].parentNode.id+'-body','visible'))
var elup = apanels[i].parentNode.id+'-body';
}
if (elup){
new Effect.Parallel([ new Effect.SlideUp(elup), new Effect.SlideDown(eldown) ], {duration: 0.5});
Element.removeClassName(elup,'visible');
Element.addClassName(eldown,'visible');
} else {
//DNA: Added for when no panels are open.
new Effect.SlideDown(eldown, {duration: 0.5});
Element.addClassName(eldown,'visible');
}
}
//pass in ID of container element that has all instances of apanels
function accordion_init(id) {
var apanels = document.getElementsByClassName('panel_body',id);
for (var i=0;i<apanels.length;i++){
apanels[i].style.display = 'none';
}
var velems = document.getElementsByClassName('visible');
for (var i=0;i<velems.length;i++){
$(velems[i]).style.display = 'block';
}
}
function accordion_init_all() {
var apanels = document.getElementsByClassName('panel_body');
for (var i=0;i<apanels.length;i++){
apanels[i].style.display = 'none';
}
var velems = document.getElementsByClassName('visible');
for (var i=0;i<velems.length;i++){
$(velems[i]).style.display = 'block';
}
}
//The following line was added as I couldn't get the addEvent() lines to work from Brian's Code sample on the scriptaculous wiki. This approach works in both Firefox 1.5 and IE 6.
window.onload = accordion_init_all;
The CSS code is exactly the same as the Accordion 2.0 example.
CSS File
h5{
font-size:12px;
padding: 3px 5px 3px 5px;
margin: 0;
border-style: solid none solid none;
border-top-color:#BDC7E7;
border-bottom-color:#A1BBE4;
border-width: 1px 0px 1px 0px;
color:#fff;
background-color: #63699C;
cursor:pointer;
}
.accordion{
border: 1px solid #1F669B;
width: 400px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 11px;
overflow: auto;
}
.panel_title{
color: #878285;
background-color: #63699C;
background:url(images/shade.gif) 0 0 repeat-x;
}
.panel{
margin: 0;
padding-bottom: 0;
border: none;
/*
border: solid;
border-color: red;
*/
}
.panel_body{
padding: 5px;
}
The HTML code is below.
HTML File
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Need to produce HTML, PDF, Text and RTF versions of the same document in seconds?</title>
<meta content="Dawn Ahukanna; charset=UTF-8" http-equiv="Author">
<!-- prototype-1.5.0_rc1-->
<script type="text/javascript" src="prototype.js"></script>
<!-- scriptaculous-1.6.5-->
<script type="text/javascript" src="scriptaculous.js"></script>
<!-- scriptaculous accordian code-->
<script type="text/javascript" src="sample.js"></script>
<!-- scriptaculous accordian styles-->
<link media="all" type="text/css" rel="stylesheet" href="sample.css">
</head>
<body>
<div id="body_accordion">
<div class="panel" id="panel01">
<h5 onClick="accordion(this)" class="panel_title">Panel01</h5>
<div class="panel_body" id="panel01-body">
<div>Panel01 content</div>
</div>
</div>
<div class="panel" id="panel02">
<h5 onclick="accordion(this);" class="panel_title">Panel02</h5>
<div class="panel_body" id="panel02-body">
<div>Panel02 Content</div>
</div>
</div>
<div class="panel" id="panel03">
<h5 onclick="accordion(this);" class="panel_title">Panel03</h5>
<div class="panel_body" id="panel03-body">
<div>Panel03 Content</div>
</div>
</div>
<div class="panel" id="panel04">
<h5 class="panel_title" onClick="accordion(this)">Panel04</h5>
<div class="panel_body" id="panel04-body">
<div>
<!-- Start of second set of panels as contents of Panel04 -->
<div class="panel" id="panel1001">
<h5 class="panel_title" onClick="accordion(this)">Panel001</h5>
<div class="panel_body" id="panel1001-body">
<div>Panel001 Content</div>
</div>
</div>
<div class="panel" id="panel1002">
<h5 class="panel_title" onClick="accordion(this)">Panel002</h5>
<div class="panel_body" id="panel1002-body">
<div>Panel002 Content</div>
</div>
</div>
<!-- End of second set of panels as contents of Panel04 -->
</div>
</div>
</div>
</div>
</body>
</html>
Download a working sample of the above code from this package - Embedded Accordion 2.0. Unzip the package into an empty directory and open ’sample.htm’.
References
Ref0:Scriptaculous Accordion 2.0
Technorati Tags:
Tip scriptaculous Accordion2