|
// Hide all accordion item bodies except the first
for ( var i = 1; i < accordionItems.length; i++ ) {
accordionItems[i].className = 'accordionItem hide';
}
// Hide all accordion item bodies except one
for ( var i = 0; i < accordionItems.length; i++ ) {
if ( i != 2 ) accordionItems[i].className = 'accordionItem hide';
}
Feel free to ask if you need any more help.
document.location.hash = (the hash value);
<!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>
<!-- This page is copyright Elated Communications Ltd. (www.elated.com) -->
<title>JavaScript accordion example</title>
<style type="text/css">
body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
.accordionItem h2 { margin: 0; font-size: 1.1em; padding: 0.4em; color: #fff; background-color: #944; border-bottom: 1px solid #66d; }
.accordionItem h2:hover { cursor: pointer; }
.accordionItem div { margin: 0; padding: 1em 0.4em; background-color: #eef; border-bottom: 1px solid #66d; }
.accordionItem.hide h2 { color: #000; background-color: #88f; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
var accordionItems = new Array();
function init() {
// Grab the accordion items from the page
var divs = document.getElementsByTagName( 'div' );
for ( var i = 0; i < divs.length; i++ ) {
if ( divs[i].className == 'accordionItem' ) accordionItems.push( divs[i] );
}
// Assign onclick events to the accordion item headings
for ( var i = 0; i < accordionItems.length; i++ ) {
var h2 = getFirstChildWithTagName( accordionItems[i], 'H2' );
h2.onclick = toggleItem;
}
// Hide all accordion item bodies except the first
for ( var i = 1; i < accordionItems.length; i++ ) {
accordionItems[i].className = 'accordionItem hide';
$(accordionItems[i]).find('div').slideUp();
}
}
function toggleItem() {
var itemClass = this.parentNode.className;
// Hide all items
for ( var i = 0; i < accordionItems.length; i++ ) {
accordionItems[i].className = 'accordionItem hide';
$(accordionItems[i]).find('div').slideUp();
}
// Show this item if it was previously hidden
if ( itemClass == 'accordionItem hide' ) {
this.parentNode.className = 'accordionItem';
$(this).parent().find('div').slideDown();
}
}
function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
}
}
//]]>
</script>
</head>
<body onload="init()">
<h1>JavaScript accordion example</h1>
<div class="accordionItem">
<h2>About accordions</h2>
<div>
<p>JavaScript accordions let you squeeze a lot of content into a small space in a Web page.</p>
<p>This simple accordion degrades gracefully in browsers that don't support JavaScript or CSS.</p>
</div>
</div>
<div class="accordionItem">
<h2>Accordion items</h2>
<div>
<p>A JavaScript accordion is made up of a number of expandable/collapsible items. Only one item is ever shown at a time.</p>
<p>You can include any content you want inside an accordion item. Here's a bullet list:</p>
<ul>
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
</ul>
</div>
</div>
<div class="accordionItem">
<h2>How to use a JavaScript accordion</h2>
<div>
<p>Click an accordion item's heading to expand it. To collapse the item, click it again, or click another item heading.</p>
</div>
</div>
<p><a href="/articles/javascript-accordion/">Return to the JavaScript Accordion article</a></p>
</body>
</html>
// Assign onclick events to the accordion item category image
for ( var i = 0; i < accordionItems.length; i++ ) {
var img = getFirstChildWithTagName( accordionItems[i], 'img' );
img.onclick = toggleItem;
}
// Hide all accordion item bodies except the first
for ( var i = 1; i < accordionItems.length; i++ ) {
accordionItems[i].className = 'accordionItem hide';
}
// Hide all accordion item bodies
for ( var i = 0; i < accordionItems.length; i++ ) {
accordionItems[i].className = 'accordionItem hide';
}
...
function toggleItem() {
var itemClass = this.parentNode.className;
// Hide all items
for ( var i = 0; i < accordionItems.length; i++ ) {
if ( accordionItems[i].className == 'accordionItem hide' ) accordionItems[i].className = 'accordionItem hide';
//if ( accordionItems[i].className == 'accordionItem' ) accordionItems[i].className = 'accordionItem hide';
}
// Show this item if it was previously hidden
//if ( itemClass == 'accordionItem hide' || itemClass == 'accordionItem') {
this.parentNode.className = 'accordionItem';
if ( itemClass == 'accordionItem') {
this.parentNode.className = 'accordionItem hide';
}
//}
}
<BODY onload=init()>
window.onload = init;
<script>
init();
</script>
Got a question about making a website? Ask it in the forums — we'd love to help you. All questions answered!
Never made a website before? Read How to Make a Website.
This site © Elated Communications 1996-2013. Unauthorised copying or redistribution prohibited. By using this Website, you are indicating your acceptance of our Terms of Use.
Please read our Privacy Policy.
