jQuery is a javascript frame­work that makes it easy to do pro­gram­matic ani­ma­tion, event han­dling, and AJAX style inter­ac­tions. It vastly sim­pli­fies web pro­gram­ming and the manip­u­la­tion of web pages. You don’t need to be a pro­gram­mer to use jQuery. I’ll be post­ing ideas and exam­ples of how to use jQuery over the com­ing months.

On Sidearm I use jQuery for sev­eral effects. For this post, I’m going to start with my favorite one. On the side­bar to the right each sec­tion is collapsable/expandable and can be tog­gled by acti­vat­ing the small plus/minus sym­bols. The side­bar keeps get­ting big­ger and in a few years the archive alone will take up a large por­tion of the screen, so sav­ing space is becom­ing increas­ingly nec­es­sary. At the same time, I don’t want to make nav­i­gat­ing the site any more dif­fi­cult than it needs to be, so I made “smart” default set­tings for which sec­tions should load in the col­lapsed state. Also, to be true to the orig­i­nal design, I wanted the side­bar to always be shorter than the con­tent area. To accom­plish this I used jQuery to mea­sure the height of the con­tent area and the side­bar, com­pare them, and then col­lapse the appro­pri­ate amount of sec­tions to keep the side­bar shorter.

One of the best fea­tures of jQuery is that you can select an HTML object by HTML tag, ID, or class the same way you would in CSS. In the fol­low­ing exam­ple, H5 ele­ments with a class are selected, then the “.append” func­tion is called which adds the ele­ment found within paren­the­sis, in this case “<a></a>”.

// dynamically add sidebar toggle buttons
$('h5.categories').append('<a></a>');
$('h5.archives').append('<a></a>');
$('h5.audio').append('<a></a>');
$('h5.audio + div').hide();
$('h5.audio a').addClass('expand');
$('h5.links').append('<a></a>');
$('h5.connect').append('<a></a>');

By adding these in dynam­i­cally, we effec­tively hide the tog­gle but­tons from any­one who doesn’t have javascript sup­port, which we want to do because the col­lapse func­tion wouldn’t work for them anyways.

In the fol­low­ing exam­ple, I’m assign­ing the value of #content_one’s height to the vari­able “c_one” and like­wise for #content_two and “c_two”.

// get height of column one and column two
var c_one = $('#content_one').height();
var c_two = $('#content_two').height();

Next, these vari­ables need to be com­pared. To do this, an “if” state­ment is used along with a some com­par­a­tive math. Our state­ment is say­ing “if c_two is greater than or equal to c_one then exe­cute the code within the brackets.”

// compare heights and collapse the appropriate amount of sections
// Note: This code could be improved and I welcome suggestions, but it works.
if(c_two >= c_one) {
	$('h5.connect + ul').hide();
	$('h5.connect a').addClass('expand');
	c_two = $('#content_two').height();
	if(c_two >= c_one) {
		$('h5.links + ul').hide();
		$('h5.links a').addClass('expand');
		c_two = $('#content_two').height();
		if(c_two >= c_one) {
			$('h5.archives + ul').hide();
			$('h5.archives a').addClass('expand');
			c_two = $('#content_two').height();
			if(c_two >= c_one) {
				$('h5.categories + ul').hide();
				$('h5.categories a').addClass('expand');
			}
		}
	}
}

Lets go over the first three lines inside the brack­ets. Line one hides the Con­nect UL ele­ment, effec­tively load­ing it in the col­lapsed state. Line two changes the tog­gle but­ton from it’s default “col­lapse” state to the “expand” state because we’ve already col­lapsed it. And, line three mea­sures the sidebar’s updated height for fur­ther com­par­i­son. After that sec­tion is eval­u­ated, each sub­se­quent sec­tion is mea­sured and col­lapsed until c_two is smaller than c_one.

For more infor­ma­tion about jQuery head to the site and dig into the doc­u­men­ta­tion. You won’t believe how easy it is to get started.