Submit your widget
HomeAccordionjQuery accordion menu

jQuery accordion menu

Created 14 years ago   Views 7489   downloads 1411    Author n/a
jQuery accordion menu
View DemoDownload
91
Share |

Through the creation of a jQuery accordion menu. There is a little twist to this: the menu contains content. Instead of it being links to multiple pages, it is a choice of what content should appear.

Let’s start off with the HTML markup: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Accordion Menu</title> 

<style type="text/css">
* {
 margin: 0;
 padding: 0;
}

body {
 text-align: justify;
 font-size: 14px;
 line-height: 24px;
 font-family: "Trebuchet MS", Helvetica, Sans-Serif;
}

.accordian {
 width: 400px;
 margin: 50px auto;
}

.accordian li {
 list-style-type: none;
 padding: 0 5px;
}

.dimension {
 height: 400px;
}

.even, .odd {
 font-weight: bold;
 height: 27px;
 padding-top: 3px;
 padding-left: 10px;
}

.even {
 border: 1px solid #d8d8d8;
 background-color: #ececec;
}

.odd {
 border: 1px solid black;
 background: #333;
 color: white;
}
</style>

</head>
<body> 

<div class="accordian">
 <ul>
  <li>Quisque at erat vitae</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, lorem et consectetur ultricies, nulla lacus iaculis odio, in laoreet lacus nisi vitae dolor. In commodo aliquet orci. Etiam pellentesque, sapien quis egestas gravida, velit dui tristique mi, at fringilla pede mauris id dolor. Integer bibendum ultrices enim. Integer tristique velit sollicitudin enim. Cras dapibus ullamcorper tellus. Suspendisse potenti. Nunc dolor mauris, tincidunt vitae, consectetur vel, feugiat vel, mauris. Nam purus nisi, volutpat in, lacinia eu, elementum id, lectus. Curabitur volutpat convallis tortor. Nulla eget neque. Donec id urna. Nulla ullamcorper tincidunt quam. Mauris quis enim. Praesent vulputate ipsum quis tortor. Nunc metus sem, malesuada nec, bibendum in, egestas eu, enim. Integer in purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</li>
  <li>Sed euismod massa</li>
  <li>Mauris bibendum justo sit amet lectus laoreet faucibus. Aliquam cursus, diam sed lacinia ultrices, urna ipsum auctor lacus, id vulputate ante ligula aliquam odio. Fusce feugiat risus at nisl. Sed cursus, tortor et iaculis viverra, augue quam interdum ligula, nec sollicitudin libero urna nec felis. Quisque rutrum, sapien ac euismod commodo, nibh metus ultrices erat, eu euismod mi magna non pede. Fusce magna velit, interdum ut, rutrum et, ultrices sed, risus. Praesent malesuada metus ut nibh. Suspendisse nec purus. Aenean est. Donec lectus. Pellentesque enim. Nulla tempus, ipsum sed placerat consectetur, nisl pede euismod sapien, in aliquam sapien erat a elit. Aliquam ac est. Etiam id dolor. In eget augue. Morbi varius sapien quis velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a diam. Etiam pretium consectetur enim. Cras aliquam ipsum in augue.</li>
  <li>Proin et orci sit amet</li>
  <li>Sed vitae magna. Aliquam faucibus, felis ullamcorper feugiat semper, tortor leo tincidunt nibh, a faucibus lorem magna a nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet mauris eget elit tincidunt hendrerit. Suspendisse vulputate, risus vitae sagittis blandit, arcu tortor venenatis nisl, vitae pharetra pede pede vulputate massa. Sed varius lectus a est. Nam vehicula. Pellentesque condimentum pellentesque pede. Praesent euismod felis quis augue. Morbi consequat eleifend tortor. Donec sed lorem. Cras facilisis, lacus a adipiscing interdum, augue elit feugiat odio, vel tempor justo sapien vitae tortor. Donec suscipit libero vel lectus. Vestibulum ipsum diam, laoreet nec, fringilla ac, vehicula nec, diam. Nulla tempus cursus dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
 </ul>
</div>

<!-- Add jQuery From the Google AJAX Libraries -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 

<!-- Import The jQuery Script -->
<script type="text/javascript" src="jMenu.js"></script> 

</body>
</html>

 

 

 

This code sets up the accordion menu inside a divider.

Each even list element (remember that list elements are indexed starting from 0) is the title given to our content. For example, Quisque at erat vitae is the first title in our menu. Each odd list element is the content itself.

Note that there is also some inline CSS in this markup. Most of it very simple. There are a few irregularities:

  • The .dimension, .even, and .odd classes are never used directly in the HTML. These classes are applied by JavaScript.
  • Code inside the.dimension class should specify the height of each list element that contains content.
  • All even content titles may have separate styles from those that are odd. These go inside the .even and .odd classes.

The final task is to complete the JavaScript. This will go in its own file called jMenu.js.

First, we must hide all the content. Only the first list element with content should be visible: 

$('.accordian li:odd:gt(0)').hide();

 

 

To make it easy for the reader to see what content he is viewing, we can add a slight padding to the corresponding title. In this case, we should add this to the first title: 

$('.accordian li:first').animate( {
 paddingLeft:"30px"
} );

 

 

 

At this point, we should add the .dimension, .even, and .odd classes to our jQuery accordion menu through [removed] 

$('.accordian li:odd').addClass('dimension');
$('.accordian li:even:even').addClass('even');
$('.accordian li:even:odd').addClass('odd');

 

 

 

We have to set the correct cursor for the title links: 

$('.accordian li:even').css('cursor', 'pointer');

 

 

Now it’s time to handle the click event. When a title is clicked, we have to show the corresponding content. Because this is an accordion menu, it is also necessary to hide the content that was previously shown. Some animation may also be added for better effects: 

$('.accordian li:even').click( function() {
 var cur = $(this).next();
 var old = $('.accordian li:odd:visible');

 if ( cur.is(':visible') )
  return false;

 old.slideToggle(500);
 cur.stop().slideToggle(500);

 $(this).stop().animate( {
  paddingLeft:"30px"
 } );

 old.prev().stop().animate( {
  paddingLeft:"10px"
 } );
} );

 

You might also like