How can I get this image to change when I toggle some content?

Head out to http://brucegust.com/eResume/

In the upper right hand corner, there's a little downarrow button that you can click on that reveals some content. When you click it, the arrow changes to "up." I want to change it back to "down" when the user clicks on it again to minimize the expanded content.

How?

You can see where I started in my code with this:

$('#instructions').click(function(event){
		event.preventDefault();
		//$("#the_button").attr("src", "images/minimize_button.png");
		var src = $('#the_button').attr('src');
		if(src="images/expand_button.png")
		{
			$("#the_button").attr("src", "images/minimize_button.png");
		}
		else
		{
			$("#the_button").attr("src", "images/expand_button.png");
		}
		$('#instruction_row').slideToggle(300);
	});

Open in new window


I think I'm close, but I got stuck.

Thanks!
brucegustPHP DeveloperAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
leakim971Connect With a Mentor PluritechnicianCommented:
replace your whole code by the following one :
<script>
$(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
	
	$('area').on('click', function() {
		//alert($(this).attr('alt') + ' clicked');
	});
	
	$('#instructions').click(function(event){
		event.preventDefault();
		$('#instruction_row').slideToggle(300, function() {
			var src = $("#instruction_row .col-xs-12").is(":visible") ?  "images/expand_button.png" : "images/minimize_button.png";
			$("#the_button").attr("src", src);
		});
	});
});
</script>

Open in new window

0
 
Vish KConnect With a Mentor TechnologistCommented:
Hello,
you have error in your condition thats why it is not working as expected. If you change it to two == signs, it will work fine.
if(src="images/expand_button.png") { 

Open in new window



I have modified your code to be little more stable.
$('#instructions').click(function(event) {
  event.preventDefault();
  $('#instruction_row').slideToggle(300, function() {
    if ($('#instruction_row').css('display') === 'block') {
      $('#the_button').attr('src', 'images/minimize_button.png');
    } else {
      $('#the_button').attr('src', 'images/expand_button.png');
    }
  });
});

Open in new window

0
 
brucegustPHP DeveloperAuthor Commented:
Vish!

I just realized I blew right past your contribution! So, sorry!

I'll ask one of the moderators to open up the question so I can honor you with some points.

Thanks!
0
 
Vish KTechnologistCommented:
Thanks bruce,
let me know if my contribution helped.
0
 
brucegustPHP DeveloperAuthor Commented:
I went with Leak's solution, but Vish - I'm taking notes and putting your solution into my "files" for future reference. Thanks both of you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.