Delphinidin

You may encounter a situation where you need to toggle between the show effect and the hide effect. jQuery has a nice solution to that called toggle(). The toggle() method binds an event handler to the click event and lets you toggle between show and hide, based on what the current visibility of the element. The important part of the following example is to set the recipe element to hidden using CSS; the toggle works based off of that property.

<style>
.recipe {display:none;}
</style>
$('.recipe-name').toggle(
function() {
$('.recipe').show();
},
function() {
$('.recipe').hide();
}
);
<a href="#" class="recipe-name">Key Lime Pie</a>
<div class="recipe">Key lime pie is an American dessert made of key lime juice, egg
yolks, and sweetened condensed milk in a pie crust.</div>