_jQuery Accordion with 8 Lines of Code
Ok. Maybe more than 8 lines of code but very little. I have been working with another agency (that will rename nameless) on a mobile web site for a client of ours. The agency provided the HTML/CSS/Images and Script for our technology team to implement. We hook up all the back end and call it a day.
The section that came into question was an ‘accordion’ style UI for a set of FAQ’s and other content. When I first loaded up their pages, everything worked fine. Upon further inspection of their code I noticed a lot of JavaScript libraries that were not needed. They included jQuery AND Prototype along with some effects and accordion scripts. (Prototype alone is almost 100kb in file size and the other scripts were 42kb. That still does not include the 70kb for jQuery) I thought to myself, this is a mobile site…why have extra scripts if not needed. To make matters even more funny, we are supporting Mobile Safari (iOS), Mobile Chrome (Android) and the BlackBerry Browser (RIM), it does not work in BlackBerry at all. Forget enabling or disabling JavaScript it just does not work. Even the elements are hidden.
So it got me thinking about the old saying, “if you want something done right you have to do it yourself”. So I did.
I removed all the libraries except for jQuery and made all of the elements visible by default. Basically if a user does not have JavaScript enabled then they can see everything.
Here is my HTML
<div>
<a href="#">Really Great Information</a>
<div class="accordion_content">
Content that will expand
</div>
<a href="#">Really Great Information</a>
<div class="accordion_content">
Content that will expand again
</div>
</div>
Styles and other HTML can be wrapped around it. You can change the paragraph tags to div’s if needed but that is the structure you need more or less.
Now for the JavaScript.
Make sure you embed jQuery (I did from Google)
$('.accordion_content').hide();
//If JavaScript is not enabled, all content containers stay open, which is nice.
//Next, bind the click event to all of the targets, in this case all 'a' elements in the 'accordion_toggle' class
$('.accordion_toggle a').click(function(e){
//code to come
});
//Within the click function we need to first check if the element being clicked is set as the 'current' which means open. If it is, we need to remove the class 'current' and close the content container.
if($(this).parent().hasClass('current')) {
$(this).parent()
.removeClass('current')
.next('.accordion_content').slideUp();
} else {
...
}
Then hide all open content containers:
If the element does not have the ‘current’ class then we need to first remove the ‘old’ ‘current’, close the ‘old’ ‘current’ and open and set the new ‘current’.
$(document).find('.current')
.removeClass('current')
.next('.accordion_content').slideUp();
$(this).parent()
.addClass('current')
.next('.accordion_content').slideDown();
Done.
Here is the final:
$(function() {
$('.accordion_content').hide();
$('.accordion_toggle a').click(function(e){
if($(this).parent().hasClass('current')) {
$(this).parent()
.removeClass('current')
.next('.accordion_content').slideUp();
} else {
$(document).find('.current')
.removeClass('current')
.next('.accordion_content').slideUp();
$(this).parent()
.addClass('current')
.next('.accordion_content').slideDown();
}
e.preventDefault();
});
});
Depending on how you format the code and what you count as a ‘line’ it can be about 8 lines 
Demo here – View in Mobile Browser. Desktop browser will work as well. Works on iOS, Android, BlackBerry.