3 replies to this topic

[Headshot]

 $(".collapse").click(function(){  
	 $(this).parents(".comment").next(".commenttext").slideToggle(700);  
	 $(this).toggleClass("change");  
 });

I have this jQuery to slideup my comment, that works, but i have a problem with the toggleClass function.

By default it displays the delete.png:

<span class="collapse"></span>

CSS

 
.collapse{
background: url('images/delete.png') no-repeat;
width: 16px 
height: 16px;
}

Now when somebody clicks the image the comment slides up and the class changes to:

<span class="collapse change"></span>

CSS

.change{
  background: url('images/add.png') no-repeat; 
  border: 1px solid #000; /* For testing */
}

Now when i click the image, it will change the class and the border will be displayed, but for some reason the image does not change.

Can anyone help me with this ?

Thanks!

Edited by Headshot, 20 August 2008 - 05:40 AM.

[Blaatzorrr]

You haven't css for the class collapse change.. ?

[Headshot]

RicardoC, on Aug 20 2008, 01:55 PM, said:

You haven't css for the class collapse change.. ?

.collapse{
background: url('images/delete.png') no-repeat;
width: 16px
height: 16px;
}

.change{
  background: url('images/add.png') no-repeat;
  border: 1px solid #000; /* For testing */
}

This works except that the image doesn't change.
You could also apply the CSS like this, but gives the same result:

.collapse change{
  background: url('images/add.png') no-repeat;
  border: 1px solid #000; /* For testing */
}

Edited by Headshot, 20 August 2008 - 08:09 AM.

[rc69]

If the border appears but the image doesn't change, change the .change background declaration to !important.