Toggling icon images using jQuery

Question

I have about 5 of these but I can't figure out how to consolidate them.

$('#togglemass').toggle(function () {
    $("#plusmass").attr("src", "minus.png");
  },

  function () {
    $(".plusmass").attr("src", "plus.png");

  });


$('#togglestar').toggle(function () {
    $(".plusstar").attr("src", "minus.png");
  },

  function () {
    $(".plusstar").attr("src", "plus.png");
  });

You should explain your use case and show the HTML to this, because I think the optimization could start on the HTML level. For example, I think you should't need to hard code the selector to the "plus" image in the JavaScript, but refer to it via the HTML structure. — RoToRa
– RoToRa, Commented Mar 21, 2012 at 9:03

seand · Accepted Answer · 2012-03-21 02:42:13Z

1

$(function() {

    var togglePlusMin = function(clicker, img) {
        $(clicker).toggle(function() {
            $(img).attr("src", "minus.png");
        }, function() {
            $(img).attr("src", "plus.png");
        });
    };

    // can be used by
    togglePlusMin('#togglemass', '#plusmass');      

    // BONUS: this will also work:
    var star = $('#togglestar'),
        starIcon = $('img.plusstar');

    togglePlusMin(star, starIcon);
})

As a comment, its generally a bad idea to use ids without a second context parameter

edited Mar 21, 2012 at 2:42

seand

2,4651 gold badge20 silver badges29 bronze badges

answered Mar 21, 2012 at 2:36

George Mauer

1,63211 silver badges13 bronze badges

\$\begingroup\$ I have the worst luck, this is the 2nd time in a week someone beat me to an answer by a few seconds. \$\endgroup\$

seand
– seand

2012-03-21 02:43:02 +00:00
Commented Mar 21, 2012 at 2:43

Add a comment |

Stack Exchange Network

Toggling icon images using jQuery

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Toggling icon images using jQuery

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions