• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 403
  • Last Modified:

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

0
matreece
Asked:
matreece
1 Solution
 
hrgdavorCommented:
add another div like
and replace the script with the script provided
<div id="toggle2" style="display:none"><img src="img/ArrowUp.png" width="9" height="6" /> Hide the Interactive Map</div>
<script type="text/javascript">
       $(function() {
            $("#toggle").click(function() {
                $("#toggleMap").slideDown("slow");
                $("#toggle").hide();
                $("#toggle2").show();
           });
            $("#toggle2").click(function() {
                $("#toggleMap").slideUp("slow");
                $("#toggle2").hide();
                $("#toggle").show();
           });
        });
</script>

Open in new window

0
 
Hans LangerCommented:
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

0
 
matreeceAuthor Commented:
This is great. Worked 1st time with no problems.
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.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now