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.