Link to home
Start Free TrialLog in
Avatar of matreece
matreece

asked on

Jquery graphic and text swap

Hi, I am building a page which uses Jquery slidetoggle to reveal a map when clicked. The text on the box initially says 'View the interactive map' and has an arrow pointing downwards.

What I want is when the map is visible (once clicked), the words to then change to 'Close the interactive map' and the arrow to change upwards.

My page is here - www.soundyoucansee.com/map

Can anyone help?
<script type="text/javascript">
       $(function() {
            $("#toggle").click(function() {
                $("#toggleMap").slideToggle("slow");
           });
        });
		 </script>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of hrgdavor
hrgdavor
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Hans Langer
Hans Langer
Try this:


<script type="text/javascript">
$(function() {
	$("#toggle").click(function() {
		$("#toggleMap").slideToggle("slow",function(){
			if($(this).is(':visible')){
				var img = $("#toggle").find('img').attr('src','img/ArrowDown.png')
				$("#toggle").html(' Hide the Interactive Map').prepend(img)
			}else{
				var img = $("#toggle").find('img').attr('src','img/ArrowUp.png')
				$("#toggle").html(' View the Interactive Map').prepend(img)
			}
		});
   });
});
</script>

Open in new window

Avatar of matreece
matreece

ASKER

This is great. Worked 1st time with no problems.