Monday, July 12, 2010

Automatically add a show and hide link to any object with jQuery

There are plenty of tutorials around that show you how to show or hide a div with jQuery, you can find a load on Google but I wanted something that was re-usable throughout our projects so I created the addShowHideLink jQuery plugin.

We’ve been using it across a few projects including Crisis Cover for a while now and it’s catered for all our needs. Let me know if there’s any other options you want added.

I’ve not published any of our plug-ins before so forgive me if there are some obvious errors but I figured someone else would find it useful.

What does it do?

Simple: It hides the specified object and adds a link that shows the object when clicked. It also swaps the show text to the specified hide text automatically.

How do I use it?

I’ve kept it as simple as possible but have hopefully given it enough functionality to suit your needs.

Basic Usage

$('#objectToHide').addShowHideLink();

Used with options

$('#objectToHide').addShowHideLink({ 
		linkClass: 'showHideLnk',
		paraClass: 'showHide',
		openClass: 'showHideOpen',
		showText: 'Show Advanced Options',
		hideText: 'Hide Advanced Options',
		linkActions: function(){
			alert('The link was clicked');
		}
	});

How do I get it?

I’ve uploaded a more complete example to: http://blogs.thesitedoctor.co.uk/tim/Plugins/addShowHideLink/ so you can get a quick idea of what it does.

You can download the plug-in here.

Thanks to Trevor Morris for his jQuery skeleton starter framework.

Automatically add a show and hide link to any object with jQuery

Useful Links:            Comments [0]  Trackback

Tags: JavaScript | jQuery | The Site Doctor | Web Development