Question

I want to have multiple functions to my JS file. Just not sure how to do that, since I’m really inexperienced with JavaScript. Here’s what I have.

$(function(){
  $('.incentives').hide();

  $('.incentives-click').on("click", function(){
    $('.incentives').fadeToggle();
  });

    $('.incentivesB').hide();

  $('.incentivesB-click').on("click", function(){
    $('.incentivesB').fadeToggle();
  });

})();

I’m trying to add a bit that will make an image change when I hover over it.

$(function onHover(){
    $(".button").attr('src', 'images/donate2.png');
)}

$(function offHover(){
    $(".button").attr('src', 'images/donate1.png');
)}

BONUS

Also trying to get the image (.incentives-click) to toggle when clicked as well. I have an idea about how to go about this, but will appreciate if anyone wanted to help with this as well.

Thanks.

Answer 1

$(function(){
    $('.button').hover(function(){
        $(this).attr('src', 'images/donate2.png')
    }, function(){
        $(this). attr('src', 'images/donate1.png');
    });

    $('.button').on('click',function(){
        $(this).toggle(function(){
             #change_image1
        }, function(){
             #change_image2
        });
    });
});