<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/11">
<title>Accordion v1.0 Demo</title>
<!-- Meta Tags -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="accordion, javascript accordion, scriptaculous" />
<meta name="description" content="The ultimate modal window system, LightWindow, allows you to build your own theem, create mixed media galleries including flash, quictkime and images. Through a variety of parameters this system can do it all and recreate any other system out there!" />
<meta name="robots" content="index, follow" />
<!-- JavaScript -->
<!-- <script type="text/javascript" src="combine.php?type=javascript&files=prototype.js,effects.js,accordion.js,code_highlighter.js,javascript.js,html.js"></script> -->
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/accordion.js"></script>
<script type="text/javascript" src="javascript/code_highlighter.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
<script type="text/javascript" src="javascript/html.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/default.css" />
<script type="text/javascript">
//
// In my case I want to load them onload, this is how you do it!
//
Event.observe(window, 'load', loadAccordions, false);
//
// Set up all accordions
//
function loadAccordions() {
var topAccordion = new accordion('horizontal_container', {
classNames : {
toggle : 'horizontal_accordion_toggle',
toggleActive : 'horizontal_accordion_toggle_active',
content : 'horizontal_accordion_content'
},
defaultSize : {
width : 525
},
direction : 'horizontal'
});
var bottomAccordion = new accordion('vertical_container');
var nestedVerticalAccordion = new accordion('vertical_nested_container', {
classNames : {
toggle : 'vertical_accordion_toggle',
toggleActive : 'vertical_accordion_toggle_active',
content : 'vertical_accordion_content'
}
});
// Open first one
bottomAccordion.activate($$('#vertical_container .accordion_toggle')[0]);
// Open second one
topAccordion.activate($$('#horizontal_container .horizontal_accordion_toggle')[2]);
}
</script>
<!-- CSS -->
<style type="text/css" >
/*
Vertical Accordions
*/
.accordion_toggle {
display: block;
height: 30px;
width: 680px;
background: url(images/accordion_toggle.jpg) no-repeat top right #a9d06a;
padding: 0 10px 0 10px;
line-height: 30px;
color: #ffffff;
font-weight: normal;
text-decoration: none;
outline: none;
font-size: 12px;
color: #000000;
border-bottom: 1px solid #cde99f;
cursor: pointer;
margin: 0 0 0 0;
}
.accordion_toggle_active {
background: url(images/accordion_toggle_active.jpg) no-repeat top right #e0542f;
color: #ffffff;
border-bottom: 1px solid #f68263;
}
.accordion_content {
background-color: #ffffff;
color: #444444;
overflow: hidden;
}
.accordion_content h2 {
margin: 15px 0 5px 10px;
color: #0099FF;
}
.accordion_content p {
line-height: 150%;
padding: 5px 10px 15px 10px;
}
.vertical_accordion_toggle {
display: block;
height: 30px;
width: 600px;
background: url(images/accordion_toggle.jpg) no-repeat top right #a9d06a;
padding: 0 10px 0 10px;
line-height: 30px;
color: #ffffff;
font-weight: normal;
text-decoration: none;
outline: none;
font-size: 12px;
color: #000000;
border-bottom: 1px solid #cde99f;
cursor: pointer;
margin: 0 0 0 0;
}
.vertical_accordion_toggle_active {
background: url(images/accordion_toggle_active.jpg) no-repeat top right #e0542f;
color: #ffffff;
border-bottom: 1px solid #f68263;
}
.vertical_accordion_content {
background-color: #ffffff;
color: #444444;
overflow: hidden;
}
.vertical_accordion_content h2 {
margin: 15px 0 5px 10px;
color: #0099FF;
}
.vertical_accordion_content p {
line-height: 150%;
padding: 5px 10px 15px 10px;
}
/*
Horizontal Accordion
*/
.horizontal_accordion_toggle {
/* REQUIRED */
float: left; /* This make sure it stays horizontal */
/* REQUIRED */
display: block;
height: 100px;
width: 30px;
background: url(images/h_accordion_toggle.jpg) no-repeat top left #a9d06a;
color: #ffffff;
text-decoration: none;
outline: none;
border-right: 1px solid #cde99f;
cursor: pointer;
margin: 0 0 0 0;
}
.horizontal_accordion_toggle_active {
background: url(images/h_accordion_toggle_active.jpg) no-repeat top left #e0542f;
border-right: 1px solid #f68263;
}
.horizontal_accordion_content {
/* REQUIRED */
height: 100px; /* We need to define a height for the accordion as it stretches the width */
float: left; /* This make sure it stays horizontal */
/* REQUIRED */
overflow: hidden;
background-color: #ffffff;
color: #444444;
}
.horizontal_accordion_content p {
width: 450px;
line-height: 150%;
padding: 5px 10px 15px 10px;
}
/* Container styling*/
#horizontal_container {
margin: 20px auto 20px auto;
width: 680px;
height: 100px;
}
#vertical_nested_container {
margin: 20px auto 20px auto;
width: 620px;
}
</style>
</head>
<body>
<div id="container">
<h1><span>Accordion</span> v2.0</h1>
<p class="description" >Finally a lightweight accordion that is built with scriptaculous and works properly in every browser.</p>
<div id="vertical_container" >
<h1 class="accordion_toggle">Changelog</h1>
<div class="accordion_content">
<h2>What's new in v2.0?</h2>
<p>Well i listened to all you guys out there in my forum and my blog and now all those wishes have been granted!</p>
<p>
<ul style="margin: 0 0 0 50px;">
<li>Open/Close functionality added (Click on an active accordion).</li>
<li>Nested Vertical Accordions</li>
<li>Accordions will dynamically resize on content added REAL TIME!</li>
<li>...lots of bug fixes!</li>
</ul>
</p>
</div>
<h1 class="accordion_toggle">Donate! Help me get a MacBook Pro</h1>
<div class="accordion_content">
<img src="images/macbook.png" align="left" style="padding: 10px 10px 0 10px;" />
<h2>Help me get a MacBook Pro!</h2>
<p>
Hello everyone, I have now released my accordion script and its better than any other one out there! That's right I said it. I will be releasing a few more of my scripts in the weeks to come. In the meantime though help me get a MacBook Pro so I have a mac to test on! Anything you could throw my way would be appreciated, I will also give back in my <a href="http://forum.stickmanlabs.com">forums</a>, so no worries, I give back even more!
</p>
<p> </p>
<div align="center" style="width: 50%; float: left;" >
<strong>$5 donation</strong>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but21.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----MIIHsQYJKoZIhvc
qq下拉效果.zip （11个子文件） 
accordion images 
accordion_toggle_active.jpg 1KB accordion_toggle.jpg 1KB h_accordion_toggle_active.jpg 1KB h_accordion_toggle.jpg 1KB
.DS_Store 6KB javascript accordion.js 5KB effects.js 37KB .DS_Store 12KB prototype.js 97KB
index.html 32KB .DS_Store 6KB资源评论
