.slideToggle dependant image change

JavaScript
1

Hey guys, I’m a JS n00b but I’m looking to create a simple edit to this script. I’m using this JS to show/hide a section of my website. I want an image to change when the image is toggled.


<script type="text/javascript">
	 
	$(document).ready(function(){
	 
	        $(".slidingDiv").hide();
	        $(".show_hide").show();
	 
	    $('.show_hide').click(function(){
	    $(".slidingDiv").slideToggle();
	    });
	 
	}); 
</script>

<a href="#" class="show_hide"><img src="http://www.sitepoint.com/forums/images/newsletterOpen.gif" alt="Newsletter Sign Up" /></a>
2

In the click event, the this keyword will refer to the link that triggered the event, so you could use this to target the image in that link:

var img = $(‘img’, this);

You could then use the display state of the sliding div to decide on which image to replace it with.

3

Would I need to create a new function to do that? (I’m really n00by)

4

It shouldn’t be complex enough to warrant that.

In pseudo-code terms, it would be:


if sliding div is currently hidden
    // the div will shortly be shown, so use appropriate image
else
    // use image for when div is hidden

toggle sliding div
5

I’m extremely new to JS, would this be the correct way to write an if statement…

<script type="text/javascript">
if (.slidingDiv == show)
{
var img = $('images/clicktoclose.gif', this);
}

else
{
var img = $('images/clicktoopen.gif', this);
}
</script>
6

Problems

[list][]The code will be in the click function, so the script tags shouldn’t be there.
[]The .slidingDiv won’t work as it is there, you need to use a jQuery selector to select it, and to retrieve the display value of it.
[]The === operator should be used instead of the == one, as the latter leave far too much room for problems to occur.
[]You need to compare the display property of the sliding div with the string ‘none’, so that show variable need to be taken out.
[]Opening braces should be at the end of the line
[]The code in the if statement should be indented, to provide a visual indication of the nesting
[]You don’t need to assign anything to the img variable
[]It’s the image within the clicked link that needs to be changed, which is referred to differently than what you have there
[]The this keyword needs to be a part of the image selector, not with the assignment of the image name
[][/list]

[s][color="red"]<script type="text/javascript">[/color][/s]
if (.slidingDiv [s][color="red"]== show[/color][/s][color="green"])[/color]
[s][color="red"]{[/color][/s]
[s][color="red"]var img = $([/color][/s]'images/clicktoclose.gif'[s][color="red"], this)[/color][/s];
}
else
[s][color="red"]{[/color][/s]
[s][color="red"]var img = $([/color][/s]'images/clicktoopen.gif'[s][color="red"], this)[/color][/s];
}
[s][color="red"]</script>[/color][/s]

Other than that though, there’s no trouble.

Solutions

Let’s put this together so that all of those problems are resolved.

The code will be in the click function, so the script tags shouldn’t be there.

The place where the code should be put is in the place with the ellipses:


$('.show_hide').click(function(){
    ...
    $(".slidingDiv").slideToggle();
});

The .slidingDiv won’t work as it is there, you need to use a jQuery selector to select it, and to retrieve the display value of it.

The sort of jQuery selector you would use is: $(‘.slidingDiv’).css(‘display’)

The === operator should be used instead of the == one, as the latter leave far too much room for problems to occur.

Using type coercive comparisons more commonly leads to problems for beginners and intermediate users, because it’s doing something that they didn’t know about or expect. Using the strict comparison leaves much less room for problems to occur.

You need to compare the display property of the sliding div with the string ‘none’, so that show variable need to be taken out.

The string from the CSS display property that we’re comparing with is ‘none’

Opening braces should be at the end of the line

In some languages it doesn’t matter where you positioning of the opening brace. With JavaScript, something called Automatic Semicolon Insertion means that you will have problems in certain cases when the opening brace is not at the end of the line.[/b]

A video called JavaScript: The Good Parts demonstrates this problem with positioning the brace in a very understandable way, [url=“http://www.youtube.com/watch?v=hQVTIJBZook&feature=player_detailpage#t=1838s”]from 18:38 in to the video.

The code in the if statement should be indented, to provide a visual indication of the nesting

Proper indentation is one of the more important techniques that make your code easily understandable.

You don’t need to assign anything to the img variable

There’s no benefit gained from assigning the jQuery object of the image to a variable.

It’s the image within the clicked link that needs to be changed, which is referred to differently than what you have there

The image files are assigned to the src attribute of the image.

The this keyword needs to be a part of the image selector, not with the assignment of the image name

One way to refer to the image would be $(‘img’, this)

And then you would set the src attribute to the appropriate image.

Result


if ($('.slidingDiv').css('display') === 'none') {
    $('img', this).attr('src', 'images/clicktoclose.gif');
} else {
    $('img', this).attr('src', 'images/clicktoopen.gif');
}
7

Thank you so much for your help! You definitely went above and beyond in helping me out there - I really appreciate it. I guess it’s time to take a step back in learning JS to the simpler stuff. BTW, just in case anyone is following this in the future, I changed (‘display’) === hidden to (‘display’) === none to make this work in my particular case.

Thank you again!

8

Whoops that’s right, it’s now edited and updated for when others come across this too.

You’re welcome