Treehouse: Grow your CSS skills. Land your dream job.

How to make an image change on click

  • # February 11, 2011 at 5:48 am

    Hello all,

    I dont know javascript so I download all the dynamic content for my sites.

    On my own website I have a list of services and I got some code so that when the user clicks one of the services more information appears. I have a little plus sign beside each service and I want it to turn into a minus sign that I have as an image. How can I do this ?

    Heres a link to the page.

    Thanks alot,

    # February 11, 2011 at 6:17 am

    Have a look at this – You could probably manipulate it to get the effect you would like:

    # February 11, 2011 at 6:56 am

    jamy_za, I already have something similar to this. Click the link I gave. I want something to make the plus image change when clicked. Note that I only have the “Websites in XHTML and HTML5″ set up to do this.

    # February 11, 2011 at 7:16 am

    @michaeloneill the link you gave doesn’t load. I get this error: Content Encoding Error

    # February 11, 2011 at 7:28 am

    jamy_za – The link should work fine now :)

    # February 11, 2011 at 10:09 am

    You can use jquery and change the src attribute:

    $('#plus-symbol-button).click(function() {
    $(this).attr('src', 'images/minus-symbol.png');

    Something like that should work.

    # February 11, 2011 at 10:20 am

    @johnnyb I have put that code onto the page making the necessary changes… However it still wont work! :L Check out the link


    # February 11, 2011 at 10:55 am

    I think you may need to include the switch within your showslidingdiv function.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.