Archive for January 2008

JQuery and “Automagic” toggling div tags

inserting the following jquery code in the page:

$(document).ready(function(){
	$("a[name^='pack-']").click(function () {
		var _name = $(this).attr('name');
		//$("div[name='"+_name+"']").slideToggle("slow", function () {
		$("div[name='"+_name+"']").toggle("slow", function () {
			if( $("a[name^='"+_name+"']").text()=='[-]' ) {
				$("a[name^='"+_name+"']").text('[+]');
			}
			else {
				$("a[name^='"+_name+"']").text('[-]');
			}
		});
	});
});

the div will toggle it’s visibility as per the toggle() or slideToggle() methods, and alter the link text used to activate the behavior.

this allows the following simple HTML to be used to enable the jquery element toggling effect.

<span>Title<a name="pack-1">[-]</a></span>
<div name="pack-1">
content content content content content.
</div>

even better, disabling it is as simple as commenting out the chunk in the $(document).ready()), or by not including the javascript at all.

  • Categories

  • Need Code Written?

  • Need a Coding Job?

  • Tags

  • Archives