www.webdeveloper.com
Results 1 to 3 of 3

Thread: Toggle the source of an image.

  1. #1
    Join Date
    Apr 2009
    Posts
    66

    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>		
    <div class="header" onClick="toggle();">
    	<h1>ImageCloud</h1>
    	<img src="images/plus.png" class="icon" alt="" />
    </div>	

    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:
    Code:
    function toggle(){
    	$('.box').slideToggle("fast");
    }
    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

    Thanks!
    FC
    Last edited by Fire Cat; 11-19-2010 at 10:58 AM.

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

    Code:
    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
    BIOSTALL.com
    - Freelancing Services
    - Web Development Snippets, Hints and Tips

  3. #3
    Join Date
    Feb 2012
    Posts
    61
    Good post ..it's helpfull to me..
    Thanks,
    Som
    Full2pune

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