Menu

Home » »Unlabelled » Exactly How to Create a Custom jQuery Accordion

Exactly How to Create a Custom jQuery Accordion

Accordions can be very useful for showing lots of different sections of data in a small amount of space. jQuery UI has a built in Accordion function, but according to the jQuery UI Build your Download, the size of the Core jQuery UI and Accordion scripts are 25kb and 16.6kb, respectively. Today, I’ll show you how to build a custom accordion that is more “bandwidth efficient”.

That seems like a lot for just one simple accordion. Especially when you add in the normal jQuery script, which is 18kb minified and Gzipped. So instead of increasing your page load time with the extra unneeded functionality, why not create something from scratch?
I also think that writing things from scratch really gives you a much better understand of how to use jQuery effectively, without always turning to use someone else’s code.
So the plan for this tutorial is to show create an accordion using the jQuery UI function, then create one using some custom coding. Let’s use a blog sidebar as an example.

The Markup

The markup is very simple, just a list item for each section in the accordion:

view plain copy to clipboard print ?

<ul id="accordion">
<li>
<a href="#recent" class="heading">Recent Entries</a>
<ul id="recent">
<li><span class="date">01.19.2009</span> <a href="#">Recent Entry Title</a></li>
<li><span class="date">01.15.2009</span> <a href="#">Recent Entry Title</a></li>
<li><span class="date">01.13.2009</span> <a href="#">Recent Entry Title</a></li>
<li><span class="date">01.11.2009</span> <a href="#">Recent Entry Title</a></li>
<li><span class="date">01.10.2009</span> <a href="#">Recent Entry Title</a></li>
</ul>
</li>
<li>
<a href="#popular" class="heading">Popular Entries</a>
<ul id="popular">
<li><span class="date">08.16.2008</span> <a href="#">Popular Entry Title</a></li>
<li><span class="date">06.12.2008</span> <a href="#">Popular Entry Title</a></li>
<li><span class="date">04.12.2008</span> <a href="#">Popular Entry Title</a></li>
<li><span class="date">06.12.2007</span> <a href="#">Popular Entry Title</a></li>
<li><span class="date">03.12.2007</span> <a href="#">Popular Entry Title</a></li>
</ul>
</li>
<li>
<a href="#categories" class="heading">Categories</a>
<ul id="categories">
<li><a href="#">Category Name</a> <span class="count">7</span></li>
<li><a href="#">Category Name</a> <span class="count">4</span></li>
<li><a href="#">Category Name</a> <span class="count">15</span></li>
<li><a href="#">Category Name</a> <span class="count">29</span></li>
<li><a href="#">Category Name</a> <span class="count">8</span></li>
</ul>
</li>
<li>
<a href="#archive" class="heading">Archive</a>
<ul id="archive">
<li><a href="#">January 2009</a> <span class="count">4</span></li>
<li><a href="#">December 2008</a> <span class="count">14</span></li>
<li><a href="#">November 2008</a> <span class="count">12</span></li>
<li><a href="#">October 2008</a> <span class="count">8</span></li>
<li><a href="#">September 2008</a> <span class="count">18</span></li>
</ul>
</li>
</ul>

The CSS

We are going to add some very basic styling so that the accordion looks more presentable. Since this tutorial is mainly focused on the JavaScript, I am going to run through what we are doing with the CSS quickly.
Since I always start from my own simple framework stylesheet, I’m going to use it here too:

view plain copy to clipboard print ?

/*****Reset*****/
html, body, div, h1, h3, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
/*****Basic Definitions*****/
body { background: #fff; color: #333; font: 14px/20px Georgia, "Times New Roman", Times, serif; }
h1 { font-size: 24px; line-height: 30px; margin-bottom: 18px; }
a { }
a:visited { }
a:hover { text-decoration: none; }
img { border: none; }
p, ul, ol, dl, table { margin-bottom: 18px; }
ul, ol, dd { margin-left: 36px; }
/*****Custom Classes*****/
.clearing { clear: both; }
.clearfix { overflow: hidden; }
.last { margin-bottom: 0; }
.screenReader { left: -9999px; position: absolute; top: -9999px; }

Next, I am going to remove the margin and list-style from the accordion unordered list and the descendant lists and add a bottom border to the accordion unordered list (you will see why it is only a bottom border shortly).

view plain copy to clipboard print ?

ul#accordion, ul#accordion ul { list-style: none; margin: 0; }
ul#accordion { border-bottom: 1px solid #000E2E; }

Then, I am going to add a border around each accordion section, except the bottom border. Also, I am going to remove the border from list items that are descendants of the accordion section and add only a bottom border. If it is the last child of a descendant unordered list, I am going to remove the bottom border. Yes, I know this will not work in IE, but it’s not essential.

view plain copy to clipboard print ?

ul#accordion li { border: 1px solid #000E2E; border-bottom: none; }
ul#accordion ul li {
border: none;
border-bottom: 1px solid #C2C8D1;
color: #999;
padding: 5px 10px;
}
ul#accordion ul li:last-child { border-bottom: none; }

Next, I am going to style the main link that will toggle the accordion so that they stand out more:

view plain copy to clipboard print ?

ul#accordion a.heading {
background: #F4FFF9;
color: #999;
display: block;
font-size: 18px;
line-height: 18px;
padding: 10px 5px;
text-decoration: none;
}
ul#accordion a.heading:hover { background: #00B9D2; color: #fff; }

Finally, I am just going to do some basic styling on the sub lists of the accordion so that they look a little nicer:

view plain copy to clipboard print ?

ul#accordion li ul a { border-bottom: 1px solid #00B9D2; color: #025185; text-decoration: none; }
ul#accordion li ul a:hover { border-bottom: none; }
ul#accordion li ul .date { padding-right: 10px; }
ul#accordion li ul .count { padding-left: 10px; }

Let’s take a look at where we are so far. This is also what the accordion will look like when we are using the jQuery UI Accordion and JavaScript is disabled.

Accordion Markup

It looks like we will need to add some additional CSS for IE6 to account for the whitespace bug:

view plain copy to clipboard print ?

ul#accordion { float: left; width: 300px; }
ul#accordion li { float: left; width: 298px; }
ul#accordion a.heading { width: 298px; }
ul#accordion ul li { float: none; width: auto; }

The jQuery UI Accordion

jQuery UI Home Page

Now that we’ve got all the markup and styling complete, it is very simple to implement the jQuery UI accordion. First, we just need to include jQuery and our jQuery UI script.

view plain copy to clipboard print ?

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-accordion.js"></script>

Then, we need to initialize the accordion on our unordered list with an id of accordion:

view plain copy to clipboard print ?

<script type="text/javascript">
$(document).ready(function() {
$('#accordion').accordion();
});
</script>

And there you have it, a working accordion.

Working Accordion

To make the currently open accordion item stand out more, I added a little extra CSS:

view plain copy to clipboard print ?

ul#accordion li.ui-accordion-selected a.heading { background: #025185; color: #fff; }

The class name of ui-accordion-selected is automatically added to the current accordion section.

Our Custom jQuery Accordion

Now that we have done the jQuery UI accordion, it’s time to create our own. One thing that I don’t necessarily like about the jQuery UI version is the way it displays when JavaScript is disabled. I would prefer to have it so that only one section is open at a time.
To accomplish this, I am going to add in a little PHP. You could easily accomplish this with any programming language as well.
The idea behind this is that we are going to pass a variable in the URL, and if the variable coincides with each section, we assign a class of current to that section. It is much easier to see this in code, so have a look:

view plain copy to clipboard print ?

<?php $section = $_GET['section']; ?>
<ul id="accordion">
<li<?php if($section == '' || $section == 'recent'): ?> class="current"<?php endif; ?>>
<a href="?section=recent" class="heading">Recent Entries</a>
<ul id="recent">
<li><span class="date">01.19.2009</span> <a href="#">Recent Entry Title</a></li>
<li><span class="date">01.15.2009</span> <a href="#">Recent Entry Title</a></li>
<li><span class="date">01.13.2009</span> <a href="#">Recent Entry Title</a></li>
<li><span class="date">01.11.2009</span> <a href="#">Recent Entry Title</a></li>
<li><span class="date">01.10.2009</span> <a href="#">Recent Entry Title</a></li>
</ul>
</li>
<li<?php if($section == 'popular'): ?> class="current"<?php endif; ?>>
<a href="?section=popular" class="heading">Popular Entries</a>
<ul id="popular">
<li><span class="date">08.16.2008</span> <a href="#">Popular Entry Title</a></li>
<li><span class="date">06.12.2008</span> <a href="#">Popular Entry Title</a></li>
<li><span class="date">04.12.2008</span> <a href="#">Popular Entry Title</a></li>
<li><span class="date">06.12.2007</span> <a href="#">Popular Entry Title</a></li>
<li><span class="date">03.12.2007</span> <a href="#">Popular Entry Title</a></li>
</ul>
</li>
<li<?php if($section == 'categories'): ?> class="current"<?php endif; ?>>
<a href="?section=categories" class="heading">Categories</a>
<ul id="categories">
<li><a href="#">Category Name</a> <span class="count">7</span></li>
<li><a href="#">Category Name</a> <span class="count">4</span></li>
<li><a href="#">Category Name</a> <span class="count">15</span></li>
<li><a href="#">Category Name</a> <span class="count">29</span></li>
<li><a href="#">Category Name</a> <span class="count">8</span></li>
</ul>
</li>
<li<?php if($section == 'archive'): ?> class="current"<?php endif; ?>>
<a href="?section=archive" class="heading">Archive</a>
<ul id="archive">
<li><a href="#">January 2009</a> <span class="count">4</span></li>
<li><a href="#">December 2008</a> <span class="count">14</span></li>
<li><a href="#">November 2008</a> <span class="count">12</span></li>
<li><a href="#">October 2008</a> <span class="count">8</span></li>
<li><a href="#">September 2008</a> <span class="count">18</span></li>
</ul>
</li>
</ul>

You should also notice that I changed the url of each of the links the toggle the accordion sections to match up with the if statement for the section. So basically, if JavaScript is disabled, you will be taken to a new page with that section open.

We also need to remove the jQuery UI accordion script, and include our own:

view plain copy to clipboard print ?

<script type="text/javascript" src="scripts/accordion.js"></script>

Additional CSS

With this slight change to the markup, we need to add in a little additional CSS. We no longer have the ui-accordion-selected class being assigned to the list items; it is now a class of current. We also have to account for this class name change in the on state for the accordion:

view plain copy to clipboard print ?

ul#accordion li.current a.heading { background: #025185; color: #fff; }

So what we want to do is hide all of the unordered lists, unless they are a descendant of the list item with a class of current. I have also added a body id to this demo page so that we can use the same stylesheet for both examples.

view plain copy to clipboard print ?

body#customAccordion ul#accordion li ul { display: none; }
body#customAccordion ul#accordion li.current ul { display: block; }

The Custom JavaScript

First, we want to execute the script once the document is loaded, so we start with this:

view plain copy to clipboard print ?

$(document).ready(function() {
});

We want the accordion to function when the heading links are clicked, but we don’t want to leave the page so we need to make sure and return false:

view plain copy to clipboard print ?

$(document).ready(function() {
<strong>$('ul#accordion a.heading').click(function() {
return false;
});</strong>
});

Next, I don’t like the outline that shows up around the links when they are clicked, so I set that to none:

view plain copy to clipboard print ?

$(document).ready(function() {
$('ul#accordion a.heading').click(function() {
<strong>$(this).css('outline','none');</strong>
return false;
});
});

There are two different cases for this script.

The link being clicked is the section that is already open.
The link being clicked is not the section that is already open.

The First Case

This is not functionality that the jQuery UI version has, but I think a user should be able to close all sections if they want. If the link clicked has a parent that has a class of current, we want to slide up the unordered list and remove the class of current.

view plain copy to clipboard print ?

$(document).ready(function() {
$('ul#accordion a.heading').click(function() {
$(this).css('outline','none');
<strong>if($(this).parent().hasClass('current')) {
$(this).siblings('ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
});
}</strong>
return false;
});
});

Another thing that bugs me about the jQuery UI version, is that you can scroll the accordion so it is almost out of view, click it, and then the interaction happens above what you can see. Scroll down on the jQuery UI example and give it a try.
So my solution is to use this wonderful little script called jQuery ScrollTo. It is a very small script that adds smooth page scrolling.
Let’s add that to the head of the document before our accordion script:

view plain copy to clipboard print ?

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery-scrollTo.js"></script>
<script type="text/javascript" src="scripts/accordion.js"></script>

When the section scrolls up, I want to scroll the window to the top of the accordion:

view plain copy to clipboard print ?

$(document).ready(function() {
$('ul#accordion a.heading').click(function() {
$(this).css('outline','none');
if($(this).parent().hasClass('current')) {
$(this).siblings('ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
<strong>$.scrollTo('#accordion',1000);</strong>
});
}
return false;
});
});

The first parameter of the function is the target to scroll to, and the second is the amount of time it should take.

The Second Case

This case occurs when the section that is clicking is not currently open. So the first thing we want to do is hide the currently open section and remove the class of current (this piece of the code is very similar to the first case):

view plain copy to clipboard print ?

$(document).ready(function() {
$('ul#accordion a.heading').click(function() {
$(this).css('outline','none');
if($(this).parent().hasClass('current')) {
$(this).siblings('ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
$.scrollTo('#accordion',1000);
});
} else {
<strong>$('ul#accordion li.current ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
});</strong>
}
return false;
});
});

Next, we want to open the section we clicked and add the class of current:

view plain copy to clipboard print ?

$(document).ready(function() {
$('ul#accordion a.heading').click(function() {
$(this).css('outline','none');
if($(this).parent().hasClass('current')) {
$(this).siblings('ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
$.scrollTo('#accordion',1000);
});
} else {
$('ul#accordion li.current ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
});
<strong>$(this).siblings('ul').slideToggle('slow',function() {
$(this).parent().toggleClass('current');
});</strong>
}
return false;
});
});

Finally, let’s scroll the window to the top of the accordion, just like we did in the first case:

view plain copy to clipboard print ?

$(document).ready(function() {
$('ul#accordion a.heading').click(function() {
$(this).css('outline','none');
if($(this).parent().hasClass('current')) {
$(this).siblings('ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
$.scrollTo('#accordion',1000);
});
} else {
$('ul#accordion li.current ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
});
$(this).siblings('ul').slideToggle('slow',function() {
$(this).parent().toggleClass('current');
});
<strong>$.scrollTo('#accordion',1000);</strong>
}
return false;
});
});

Take a look at our custom jQuery accordion.
That’s it. Seriously. Did you think creating an accordion could be that simple?

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Top