[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Jquery graphic and text swap

Posted on 2010-09-01
3
Medium Priority
?
400 Views
Last Modified: 2012-05-10
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
Comment
Question by:matreece
3 Comments
 
LVL 2

Accepted Solution

by:
hrgdavor earned 2000 total points
ID: 33578103
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
 
LVL 10

Expert Comment

by:Hans Langer
ID: 33579344
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
 

Author Closing Comment

by:matreece
ID: 33584417
This is great. Worked 1st time with no problems.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

591 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question