Results 1 to 3 of 3

Thread: Toggle the source of an image.

  1. #1
    Join Date
    Apr 2009

    Toggle the source of an image.

    Heya guys. It's been a while since I've been here

    So, I recently discovered the awesomeness of jQuery, and decided to use it.
    I'm currently using the slideToggle() to toggle my div nicely.
    The thing is, I also want to have a small icon to change according to wether the div is visible or not.

    Here's my HTML:
    HTML Code:
    <div class="box">
       <!-- Content of this box will come later -->
    <div class="header" onClick="toggle();">
    	<img src="images/plus.png" class="icon" alt="" />

    Pretty simple. Now, when I click on the header bar (header), it toggles the div "box" into view. No problem there.
    Now, I want to have the src of the image "icon" to toggle as well.

    My JS:
    function toggle(){
    I've tried quite a few things, but none seem to work.
    Note that it doesn't need to be jQuery - but it's so awesome you'll probably need to use it anyway

    Last edited by Fire Cat; 11-19-2010 at 11:58 AM.

  2. #2
    Join Date
    Oct 2005
    Cambridgeshire, UK
    What about something like so:

    function toggle(){
        $('.box').slideToggle("fast", function() { // add callback for once the toggle has occured
            if ($('.box').css("display")=="block") { // is the div showing?
                $(".icon").attr("src", "images/minus.png");
            }else{ // is the div hidden?
                $(".icon").attr("src", "images/plus.png");
    I haven't tested this but should point you in the right direction. Let us know how you get on

  3. #3
    Join Date
    Feb 2012
    Good post ..it's helpfull to me..

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center

Recent Articles