Jquery Tutorial : Toggle Effect on Hover/Click

Today we will learn how to get simple toggle effect on hover/click with jQuery. We will use Css and Jquery to get our final output. Check out the demo before getting into the tutorial.

Demo

Step 1 : HTML

So now we will document our page. First of all we need heading and toggle box for hide and show. Check out the below html code to get it clear.

<h2>Move Cursor</h2>
<div class="togglebox">
<div class="content">
<h3>Content Here</h3>
<!--Content Here--></div>
</div>

Step 2 : Styling Our HTML Document

Now we need to style our html elements like heading, togglebox and content. See the codes below.

h2 {
    padding:10px;
    font-size:20px;
    color:#243953;
    background-color:#fafafa;
    border: 1px solid #a9a9a9;
    -moz-border-radius: 7px; /* Rounder Corner */
       -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
    text-align:center;
    font-family:Georgia, "Times New Roman", Times, serif;
    margin-bottom:5px;
}
.togglebox {
    background-color:#CCC;
    border: 1px solid #a9a9a9;
    /* Rounder Corner */
    -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
    overflow: hidden;
    font-size: 1.2em;
    width: 295px;
    clear: both;
    margin-bottom:10px;
}
.togglebox .content {
    padding: 20px;
}

Step 3 : Jquery Time

Create a new JS file and then Link Jquery and new js file to Html document

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script> <script src="toggle.js" type="text/javascript"><!--mce:1-->
</script>

Now to give some smoth toggle effect we need to write some simple jquery code to give it a life. Below are the codes with explanation.

Toggle Effect On Hover

$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when hover over heading 2
$("h2").hover(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).next(".togglebox").slideToggle("slow");
return true;
});
});

Toggle Effect On Click

$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).next(".togglebox").slideToggle("slow");
return true;
});
});