> ## Content Index
> Fetch the complete content index at: https://blog.tsd.digital/llms.txt
> Use this file to discover other available public pages before exploring further.

# Automatically add a show and hide link to any object with jQuery
- URL: https://blog.tsd.digital/automatically-add-a-show-and-hide-link-to-any-object-with-jquery/
- Published: 2010-07-12T18:09:58.000Z
- Updated: 2010-07-12T18:09:58.000Z
- Author: Tim Gaunt
- Tags: JavaScript, jQuery, Web Development, The Site Doctor, #Import 2025-04-01 05:37

![jquery-logo_png[1]](https://storage.ghost.io/c/64/5b/645b11c2-b436-444c-a523-58dca4ca7bd8/content/images/tim/images/Automaticallyaddashowandhidelinktoanyobj_11746/jquerylogo_png1.png)

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](http://www.google.co.uk/search?hl=en&q=jquery+show+hide+div+link&meta=&ref=blog.tsd.digital) 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](http://www.crisiscover.co.uk/?ref=blog.tsd.digital) 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/](http://blogs.thesitedoctor.co.uk/tim/Plugins/addShowHideLink/?ref=blog.tsd.digital) so you can get a quick idea of what it does.

You can [download the plug-in here](http://blogs.thesitedoctor.co.uk/tim/files/jquery.addshowhidelink.zip?ref=blog.tsd.digital).

Thanks to Trevor Morris for his [jQuery skeleton starter framework](http://www.trovster.com/lab/plugins/skeleton/?ref=blog.tsd.digital).