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.

.hidden{
display:none;
}

The HTML:

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

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

Include jQuery after your closing body tag:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Then add the javascript:

<script type="text/javascript">

$(function (){

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

$('.hidden').show();

$('.show').hide();

});

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

$('.hidden').hide();

$('.show').show();

});

});

</script>