Mário Andrade

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.

Creating the markup

In this example I’m going to create text field and 2 buttons that will allow me to add and remove text fields. Similar to online apps that allow you to create web form.

<a href="#" id="add">Add</a>
<a href="#" id="remove">Remove</a>
<p><input type="text" value="1" /></p>

The <p> around the input is just to add a new line when I add now input’s.

Applying jQuery to the markup

First you need to get jQuery. You can download it from the official jQuery website or use the link from Google Code: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

Now you need to call jQuery in the <head> section of you HTML Template using the script tag:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">&lt/script>

Now you need to add the jQuery under the script you just called:

<script type="text/javascript">
$(function() { // when document has loaded
	var i = $('input').size() + 1; // check how many input exists on the document and add 1 for the add command to work
	$('a#add').click(function() { // when you click the add link
		$('<p><input type="text" value="' + i + '" /></p>').appendTo('body'); // append (add) a new input to the document.
// if you have the input inside a form, change body to form in the appendTo
		i++; //after the click i will be i = 3 if you click again i will be i = 4
	});
	$('a#remove').click(function() { // similar to the previous, when you click remove link
	if(i > 1) { // if you have at least 1 input on the form
		$('input:last').remove(); //remove the last input
		i--; //deduct 1 from i so if i = 3, after i--, i will be i = 2
	}
	});
	$('a.reset').click(function() {
	while(i > 2) { // while you have more than 1 input on the page
		$('input:last').remove(); // remove inputs
		i--;
	}
	});
});
</script>

Here you have it a simple . You need to keep in mind that every time you refresh the page the items will be gone. You’ll need more codding in order to keep the variables on a database. This is just to cover the basic add / remove functions from jQuery.

Add / Remove input with jQuery Demo

Usefull links
Theme Forest – Jquery for Absolute Beginners – Day 5
jQuery Homepage