Today I will show you how you can do a small and very simple – yet powerful – accordion script.

The html code is very basic and consist in a standard DL/DT/DD structure:

1
2
3
4
5
6
7

<dl class="ntzAccordion">
	<dt>Title</dt>
	<dd>Content</dd>
 
	<dt>Another title</dt>
	<dd>Another content</dd>
</dl>

Because is very possible to want to use this kind of accordion in many places, i did a small function:

1
2
3
4
5
6
7
8
9
10

function ntzAccordion(e) {
	$(e).find('dd').hide();
	$(e).find('dt').bind('mouseover click', function(){
		if($(e).find('dd').is(':animated') || $(this).next('dd').is(':visible')) {return false;}
			$(e).find('dt.opened').removeClass('opened');
			$(e).find('dd:visible').slideUp('slow');
			$(this).next('dd').slideDown('slow').end().addClass('opened');
	});
	$(e).find('.active').trigger('click');
};//ntzAccordion

Of course, we don’t forget to call this function on page load:

1
2
3

$().ready(function(){
	ntzAccordion($('.ntzAccordion')); // we call function with DL selector as parameter
});

Let’s see how is made

1. We find all DD’s inside of the e variable (which is $('.ntzAccordion')) and we hide them;

2. We bind mouse over and click events on DT. You can have both or none of them (you can use almost all events available on javascipt); Also, we will reffer to current DT as $(this);

3. If there is a DD which is hiding or showing in that moment, we return false. This way you can avoid odd behaviour and jumps;

3.1. Also, we check to see if the ‘victim’ (DD) is visible. Again, if this is visible, we return false to avoid repetitive close/open of DD;

4. We remove .opened class from all DT elements. We use this class to be able to add/change different style for different states of DT;

5. If there is an opened DD, we close it.

6. Because we use a structure like DT/DD, the next element right after DT is… a DD (doh!). We slide down that DD and we return back to DT (using .end()) and add the ‘opened’ class. It’s the exactly the one that we remove few steps above;

7. If you want to have a default element that is opened on page load, this line will do the trick: we trigger an event that is binded few lines above.

8. You sit back and enjoy

Attention!

For some reasons that I think is a jQuery bug, you need to add one for those extra CSS for DD’s:

• float:left;clear:left
• position:relative
• height:ZZpx;
• width:ZZpx

If you don’t do this way and the DD have padding/margin, you will have a weird (and annoying too!) jump when the accordion expands or contract.

Also, don’t forget to view source on demo page

In some (weird) cases, Internet Explorer (both 6 and 7, i didn’t use 8 yet) add an extra margin to your list elements (LI). This is very annoying and frustrating if you don’t know how to get rid of it.

You have two solution:

First one, if you already coded your site and you saw the bug very lately, you can add a negative margin to list elements (either top or bottom). Every time i used this method i had no problems, so… I think it works

Second one implies to use some non-semantic code. Actually… Is not always non-semantic. Sounds weird? Well… Did you ever heard of Definition Lists? DL/DT/DD. If yes, then start using it! IE doesn’t have any problems at all with this. If no, read some infos about this and then start using.

Why i tell you that is both semantic and non semantic code? For instance, on a menu, is more adequate to use UL/LI tags. Is a list? Ofcourse! But, you can use, as well DL/DD tags.

I know, is messy, but it works flawless

Ok, as ai said you before, i want to make a tutorial about a more advanced carousel than previous was.

I won’t explain HTML and CSS code (is very simple and intutive):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<div class="carousel">
	<div class="ctrls">
		<a href="#" class="prev">Previous</a>
		<a href="#" class="next">Next</a>
	</div>
<ul class="clearfix">
	<li><img src="http://farm4.static.flickr.com/3164/2719962411_77cf9e1699_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3159/2720786298_d33f97bfcd_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3280/2719962373_f49bb3e2a2_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3001/2720787742_d2f263372c_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3046/2720787680_8f358f938e_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3108/2719963843_f2e963af8f_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3141/2719965289_83902cf96c_t.jpg" alt="" /></li>
 
	<li><img src="http://farm4.static.flickr.com/3164/2719962411_77cf9e1699_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3159/2720786298_d33f97bfcd_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3280/2719962373_f49bb3e2a2_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3001/2720787742_d2f263372c_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3046/2720787680_8f358f938e_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3108/2719963843_f2e963af8f_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3141/2719965289_83902cf96c_t.jpg" alt="" /></li>
</ul>
 
 
</div>

CSS file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

* {margin:0;padding:0;}
 
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-block}
/* Hide from IE Mac \*/
.clearfix {display:block}
/* End hide from IE Mac */
* html .clearfix {height:1px}
.carousel {
	position: relative;
	overflow:hidden;
	height:500px;
	width:540px;
	margin:50px auto
}
	.carousel .ctrls {
		margin:10px
	}
	.carousel ul {
		position: absolute;
		width:8000px;
	}
		.carousel li {
			float:left;
			width:98px;
			height:98px;
			border: 1px solid #fff;
			list-style:none;
			margin-right:10px;
			text-align: center;
		}

The good part of this carousel is that you can have as many as you want in your page. You can have both fixed and fluid width and will work with no problem. Or at least no problem: on fluid layout, some images can be cutted. So, the best use is fixed width. Also, you can have autoscroll (with timers, i will say more later), but is not recommended because you may encounter some performance troubles.

After we include last version of jQuery, we have to do these things:

1) Iterate trough all .carousel containers (if you want to pick another name, this is the place and this is also the time!) and set the width.

1
2
3
4
5

$('.carousel').each(function(){
	var _this=this;
	var elWidth = $(_this).find('li:eq(0)').width()+12;
	$(_this).find('ul').width(elWidth*$(_this).find('li').length).css('left', 0);
});

We assume that all LI have same width, 10px margin and a border. So we adjust the width with 12 px (2px from border). If you have a wider margin (or none) change it, otherwise you will have some serious problems

The previous/next buttons we will control with a separate function, because we don’t have double scroll on double click, right? We put the function INSIDE of the each loop:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

function carouselCtrls () {
	$(_this).find('a.prev').unbind().click(function(){
		$(this).unbind();
		if(parseInt($(_this).find('ul').css('left'))<0) {
			$(_this).find('ul').animate({
				left: '+='+elWidth
			}, function(){
				carouselCtrls();
			});
		}
		return false;
	});
	$(_this).find('a.next').unbind().click(function(){
		$(this).unbind();
		var maxWidth = (parseInt($(_this).find('ul').width())-$(_this).width()-10)-(-parseInt($(_this).find('ul').css('left')));
		if(maxWidth>0){
 
		$(_this).find('ul').animate({
			left: '-='+elWidth
		}, function(){
				carouselCtrls();
			});
		}else {
			$(_this).find('ul').animate({left:0},function(){
				carouselCtrls();
			});
		}
		return false;
	});
	};

Ok, as i said before, i will make an article about what option you have when you want to use a carousel. As a jQuery user as I am, the first option i have is Sorgalla’s Carousel. It’s pretty easy to use but has some disadvantages:

• big size – around 50k, maybe more, without another 20k for jQuery
• some IE6 problems – yes, IE6 still has a huge market share. We still need to pull out our hair to make this piece of crap display good all pages
• you cannot highlight current tab – if you want to use it as a tab pagination, you simply cannot highlight selected tab. Or current page.

So, on an older project of mine, i wanted to use a very light script for doing this. Because i was in a really rush, i didn’t focus on unobtrusive scripts so i put some inline javascript (yes, shame on me).

1
2
3
4

<div id="slideCtrl">
 <a class="s1 s" onclick="showSlide(1);return false;" href="#">Tab 1</a>
 <a class="s2" onclick="showSlide(2);return false;" href="#">Tab 2</a>
 <a class="s3" onclick="showSlide(3);return false;" href="#">Tab 3</a></div>

Ok, this is for control. The most important thing is that you can put this ANYWHERE in your page. For example, you can put controls on header and slider on footer of your page. Only your imagination is the limit.

The next thing you have to do is to put some markup:

1
2
3
4
5
6
7
8
9
10

<div id="slider">
<div class="slider">
<div class="slideWrapper">
<div class="box">Tab 1 content</div>
<div class="box">Tab 2 content</div>
<div class="box">Tab 3 content</div>
</div>
<!--/.slideWrapper--></div>
<!--/.slider--></div>
<!--/slider-->

This script also has some limitation:

• You can have only one on page;
• Is pretty obtrusive;
• Doesn’t do auto slide. Of course, you can set a timer for this, but i wanted an easy example.

The next thing we have to do is to set some CSS.

Width and height for carousel:

#slider {
	width:674px;
	height:185px;
}

(more…)

Ok, as I’ve said HERE, my great psd slicing tutorial is done. Please note that it is my very first video tutorial so I’m sorry for this things:

1. If I cut out too much parts (yes, some parts like ALT-TAB window, start menu showing, and so on are missing). I considered that those parts are not essential so, to reduce size, I’ve cut them out.
2. If it’s taking too long. The tutorial consists in two parts, both are around 30 minutes. I wanted to play them at 150-200% speed, but I quit. I offer a download alternative (besides the online playing), so you can download files and play them in your favorite media player with higher speed.
3. If I have language errors. English is not my native language, so I made mistakes. Some mistakes I’ve seen, some not. But it takes way to long to edit the videos again and again. I consider that errors are acceptable because the final result (which is that you understand how it’s made) is more important.

Download:

Part one Part two. Great for offline views.

Files used in movies: HERE.

EDIT: Because i received complains about codec and browser crash because of videos, i put only FLV version. If you prefer, under each player, you find a link for VMW version (which have waaaay better quality).

Part one

VMW version, higher quality.

Part two

VMW version, higher quality.

I use E-texteditor, which is THE BEST editor i ever seen, so don’t worry if things appear from nowhere. Is just my snippets.

READ THIS PLEASE

I really need feedback on this movies, because i want to know if i should continue or not on creating (video) tutorials. So, you like it? If you don’t like it, what was wrong? What is missing? And the most important: did you understand what’s happening there? After you did this tutorial, you are able to make this on your own?

Thanks and enjoy!

I almost forgot.
The host for videos is provided by Miodrag, because on my host i have limited amount of both space and bandwidth.