CODEWITHSUNDEEP
jquerycss
joshft91
joshft91

Reputation: 1885

Changing list-style-image upon click

I have a list with a list image of a little plus sign. Here is the javascript to toggle the lists:

$(document).ready(function(){
      $('#main li ul').hide();
      $('#main li').click(function() {
      $(this).children('ul').slideToggle("slow");
      });
});

What I'd like to be able to do is that when I click one of the months, the sign changes to a minus sign located here

Here is a link to a fiddle of a working list so far.

Any ideas of what would be the simplest way to make the image change? ​

Upvotes: 2

Views: 2963

Answers (2)

Scott Selby
Scott Selby

Reputation: 9570

$(document).ready(function(){
      $('#main li ul').hide();
      $('#main li').click(function() {
        $(this).children('ul').slideToggle("slow");
        $(this).toggleClass('minus');  /*img gets applied to ul - not li */
   });
});

then

.minus{
   list-style-image:url('http://minus_img');
 }

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Check this out: http://jsfiddle.net/RPpgQ/

CSS

#main {
    cursor:pointer;
    padding-left: 20px;
}

#main li {list-style-image: url('http://static.nahoku.com/skin/frontend/enterprise/nahoku/images/plus-icon.gif');}
#main li.open {list-style-image: url('http://avnetexpress.avnet.com/wcsstore/emstore/images/prodnav-minus-sm.gif');}

#main ul {
     list-style-image: none;
}​

JavaScript

$(document).ready(function(){
    $('#main li ul').hide();
    $('#main li').click(function() {
        $(this).children('ul').slideToggle("slow");
        $(this).toggleClass('open');
    });
});
​

Upvotes: 2

Related Questions