Question

I am using the following code (which I found elsewhere and am trying to modify to suit my needs) to create a div that slides from the right side onto my screen. How would I go about making it slide out when I click instead of hover? Thanks, in advance for your help.

jQuery(function($) {
$(document).ready(function() {
    $('#introbutton').hover(function() {
        $('#intro-container').stop(true, false).animate({
            'left': '0px'
        }, 900);
    }, function() {
        jQuery.noConflict();
    });

    jQuery('#introbutton').hover(function() {
        // Do nothing
    }, function() {

        jQuery.noConflict();
        jQuery('#intro-container').animate({
            left: '100%'
        }, 800);

    });
});
}); 

Answer 1

Well, instead of using

 
 $('#introbutton').hover(function(){})
 

use

 
  $('#introbutton').click(function(){})
 

Of course, you have to realize that unlike hover, which returns back to its previous state, the div won’t return back to its original state after the click function has run. You might want to factor that into the overall solution.

Hope this helps.

Edit

This code snippet resolves all the problem

 
var is_show = true;
jQuery(function($) {
  $(document).ready(function() {
    $("#introbutton").click(function(){return runFunction();});    
  });
});


function runFunction(){
    if (is_show){ //show div
        is_show = false;
        $('#intro-container').animate({
            'left': '0px'
        }, 900);       
    }
    else{ //hide div
        is_show = true;
        $('#intro-container').animate({
            'left': '100%'
        }, 800);         
    }
    return false;
}