I have come into the need lately of solid show/hide plugin for jQuery and couldn’t find anything out there that suited my needs so I created on myself. Learn how to use it in this tutorial.

So I’ve created another jQuery plugin recently called jquery-showhide:

http://code.google.com/p/jquery-showhide/

Overview

jquery-showhide is a more robust “toggle” function that allows you to do a few cool things that the default jQuery .toggle() function does not. Please check out the video below to see an example usage of the plugin:

This video shows you what you can do with the plugin, including using the “autofocus” feature.

Features

First off, you can toggle the text of the toggle object to whatever you want. For example, if you have a hidden “categories” table, you can have the toggle link say “Show categories” and after it is clicked and the categories table is shown, you can have it say “Hide categories”.

Another useful thing is “autofocusing” which lets you define a field within your hidden object to autofocus when showing it. This is useful if you have a hidden form that you want a user to be able to type in as soon as it is visible, rather than having to click on the field manually. I’ve been using this on some personal projects and it really does make things much quicker.

Since jquery-showhide is completely “class” based (it uses classes to show/hide objects, rather than applying style="dispaly: none"/style="display: block"), it is a little more robust, especially if you would like to do more than just show/hide a field (such as changing it’s display or size).

Using

If you want to use the plugin, go to http://code.google.com/p/jquery-showhide/ and download the latest release and view the demo/demo.html file to see how to use it. Also check out the notes on the Google Code page for more info.

I hope you enjoy the feature and if you need to get in touch with me or find a bug, please leave a comment or submit a bug to Google Code.