Show and hide a div on link click using jQuery

How to show and hide a div when clicking on a link.

In the below example, when the 'Show div' link is clicked, a hidden div containing an image is shown and the link disappears to show a link to hide the div.

Click the link to show the div:

Show div

The CSS:

Ideally you should ad this to your style sheet, otherwise in your document head between the style tags.
We use 'display:none' with a class, which I've named 'hidden', so that we can apply it to both the link and the div.



<a href="#" class="showClick show">Show div</a>
<a href="#" class="hideClick hidden">Hide div</a>

<div class="hidden">
<img src="image.jpg">

Include jQuery after your closing body tag:

<script src=""></script>

Then add the javascript:

<script type="text/javascript">

$(function (){

$('.showClick').click(function (){




$('.hideClick').click(function (){