Jquery Image Toggle Script Tutorial

This tutorial will show you just how easy it is to create a fancy toggle effect in jquery. to see the demo in action click here

Step1 – create you page

So firstly you will need jquery attached to you page, if you dont already have a copy, you can download it from google. Once you have this, simply upload it to you directory and call it into your page like so:

<script type="text/javascript" src="resources/js/jquery.js"></script>

Step 2 – the page elements

We want our toggle function to effect an element on the page, so just to keep things simple I have created a couple of divs on the page, one to hold our toggling image and another to hold some text, which we will show and hide depending on the toggle state.

<div id="box">
click to see the box toggle =><img id="show" src="images/add.png"/>
<div class="row1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed porta, neque pulvinar placerat suscipit,   erat   mi commodo enim, non placerat neque nisi eu purus.       Nam nisl. Nullam in ipsum quis odio euismod tincidunt.    Nunc in tellus vitae lacus sodales volutpat.
</div>
</div>

Step 3 – writting the code

To start things off we want to activate our code as soon as the page loads, which means we need an onload function. Inside of this we want to hide the box containing the text, so we select the div class “row1″ and hide it.

$( function() {
  $('.row1').hide();
} );

Now comes the clever part. To begin, we select the id of the image and set a toggle function to initiate when we click the element. when this is triggered we set several events in motion.

$('#show').toggle(function(){
  $('.row1').slideDown("slow");
  $(this).attr("src","images/cancel.png" );
});

firstly to display the text we were hiding we use slideDown() which gives us a pretty effect. Then we declare a change in the src location of the toggle image, $(this) is used an awful lot in jquery, its simply a reference to the element that we are acting upon, in this case <div id=”show”> as you can see above. the attr() describes the attribute of the element, which we want to change from images/add.png to images/cancel.png. Then we simply close the funciton.

Step 4 – The really clever part

executing the above code will, work in displaying the text and switching the image, but what about when we want to switch it back? Well this is where the toggle function excels. Unlike a click() function which will execute its function the same way everytime, toggle() alternates between 2 function in effect toggling(what a suprise). So immediatly after the first function we use a ‘,‘ to chain another function, which looks like so.

,function(){
  $('.row1').slideUp("slow");
  $(this).attr("src", "images/add.png" );
}

Above we are simply reversing the intial function , by sliding the text back up and switching the image back to the original.

Step 5 – Putting it all together

Put it together and your code should look someting like this.

$(function(){
  $('.row1').hide();
  $('#show').toggle(function(){
    $('.row1').slideDown("slow");
    $(this).attr("src","images/cancel.png" );
  },function(){
    $('.row1').slideUp("slow");
    $(this).attr("src", "images/add.png" );
  });
});

In just a few short lines of code jquery has enabled us to pull off some pretty sweet moves. To see a working demo of the code click here. happy coding.