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.
Used with options
showText: 'Show Advanced Options',
hideText: 'Hide Advanced Options',
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.