Mário Andrade

Recently I had the chance to develop a very simple and accessible jQuery vertical accordion style menu. I was actually surprised when I was as it took me around 30 minutes. The following tutorial is a step by step guide to creating a jQuery vertical accordion.

Resources

For this tutorial I will try to exclude the use of any unnecessary file and will stick to the basic, feel free to add and customize your project as you wish.

1. For jQuery library I used Google Code AJAX Libraries API
2. Text / Code editor. I used Notepad++, my personal favorite for fast editing / coding.
3. Some free time and curious mentality

Building the HTML Structure

I’m assuming you know HTML and CSS as I will not explain what each tag does.

<ul id="accordion">
  <li>
  <a href="#">Item 1</a>
 <ul>
  <li><a href="http://muiomuio.net/category/wordpress-themes/" target="_blank" title="WordPress Themes (external link)">WordPress Themes</a></li>
  <li><p>This is a paragraph with some text</p></li>
  <li><a href="http://twitter.com/mariorandrade/" target="_blank" title="Twitter (external link)"><img src="http://muiomuio.com/wp-content/themes/lightword/images/mariorandrade.png" alt="Follow me on Twitter" title="Don't forget to follow me on twitter" /></a></li>
  </ul>
  </li>
 <li>
  <a href="#">My Skills</a>
  <ul>
  <li>HTML / XHTML, CSS</li>
  <li>Adobe Photoshop, Fireworks</li>
  <li>PHP, jQuery, Ruby on rails</li>
  <li>And a whole lot more</li>
  </ul>
  </li>
  <li><a href="http://muiomuio.com/web-design/jquery-accordion/" target="_blank">jQuery Accordion tutorial</a></li>
  <li>
  <a href="#">Resources</a>
 <ul>
  <li><a href="http://code.google.com/apis/ajaxlibs/documentation/index.html#jquery" target="_blank">Google jQuery link</a></li>
  <li><a href="http://docs.jquery.com/Tutorials" target="_blank">More jQuery tutorials</a></li>
  </ul>
  </li>
  </ul>

As you can see I created an unordered list with the ID accordion. Inside that list I have a link that works as header to the content inside. The content is hold inside other unordered lists.

Adding the jQuery

Personally I add all javascript at the bottom of the page right after the </body> tag due to accessibility and usability purposes.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
function Accordion() {
  $('#accordion ul').hide(); // hide all unordered lists inside the accordion list
  $('#accordion ul:first').show(); //show the first unordered list inside the accordion
  $('#accordion li a').click(
  function() {
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) { //if you click on an unordered list and this list is opened (visible)
  return false; //nothing happens
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { //if you click on an unordered list and this list is not opened (visible)
  $('#accordion ul:visible').slideUp('normal'); // the list that is visible will close (slideUp)
  checkElement.slideDown('normal'); //the list you clicked will open (slideDown)
  return false;
  }
  }
  );
  }
  $(document).ready(function() {Accordion();}); //when the document is ready to load the script it iniciates the function
</script>

Now you have your accordion built and functional you need to give it some visual appeal.

Adding CSS to jQuery Accordion

<style type="text/css">
ul#accordion {
  padding:0;
  border:1px solid #ececec;
  width:200px;
  }
ul#accordion li a {
  background:#222;
  padding:0.5em;
  display:block;
  color:#ececec;
  font-weight:bold;
  font:0.8em Verdana, Arial, Helvetica, sans-serif;
  text-decoration:none;
  }
ul > li {
  list-style:none;
  padding:0;
  margin:0;
  }
ul#accordion li ul {
  margin:0;
  padding:0;
  }
ul#accordion li ul li {
  padding:2px;
  margin:0;
  border-bottom:1px dashed #ccc;
  font:0.8em Verdana, Arial, Helvetica, sans-serif;
  }
ul#accordion li ul li a {
  padding:5px 0;
  font:0.8em Verdana, Arial, Helvetica, sans-serif;
  color:#222;
  background:none;
}
ul#accordion li ul li a:hover {
  color:#C90;
  }
</style>

And there you go. This is a very simple, valid and accessible jQuery vertical accordion tutorial. Feel free to play with the CSS. It’s easily adapted to an horizontal accordion.

If you liked this tutorial please help spreading the word by sharing this tutorial with other users. Thanks in advanced.