Link to home
Start Free TrialLog in
Avatar of gabos
gabos

asked on

jquery replace div with a div

I'm developing a site. I want to replace a div, with another div, once a menu item is clicked. I'm using jquery for this part. This is what I have so far:

        <html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/sitetemplate.css" />
		<title>Orbital Wealth</title>
		<script type="text/javascript" src="scripts/jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {     
				$(".aboutusclick").click(function(e){     
					e.preventDefault();         
					var content = $(this).html();         
					$('#pagebackground').replaceWith('#aboutus');     
				});  
			}); 
		</script>
	</head>
	
	<body>
		<div id="pagebackground">
			
		</div>
		<div id="headerbar">
			Orbital Wealth
		</div>
		<div id="owmenu">
			<ul id="owmenulist">
				<a href="#" class="aboutusclick"><li>About Us </li></a>
				<a href="#"><li>Mission Statement </li></a>
				<a href="#"><li>Company Relations </li></a>
				<a href="#"><li>Contact Us </li></a>
				<a href="#"><li>Company Blog</li></a>
			</ul>
		</div>
		
		<div id="footer">
			
		</div>
		
		<div id="aboutus">
			HELLO WORLD,I'VE JUST BEEN REPLACED
		</div>
		
	</body>
</html>

Open in new window


This is the css file:
body {
	background-color: black;
}

#pagebackground {
	height: 800px;
	width: 853px;
	color: #7B6CB5;

	/* background-image: url("../images/orbitalbackground.jpg");
	background-repeat: no-repeat; 
	
	Centering the pagebackground div */	
	position: relative;
	top: 150px;
	left: 300px;
}

#headerbar {
	font-size: 75px;
	color: #7B6CB5;
	position: absolute;
	top: 50px;
	left: 300px;
}

#owmenu {
	position: absolute;
	left: 50px;
	top: 150px;
	font-size: 25px;
}	

/* Menu items effects */
#owmenulist {
	list-style-type: none;
	text-decoration: none;
}
#owmenulist a {
	text-decoration: none;
	color: #7b6cb5
}

#owmenulist a:hover {
	color: #ccc;
}

#aboutus {
	color: blue;
	visibility: hidden;
}

Open in new window


I basically want the content of pagebackground to be replaced with the content of aboutus. Does anyone have any suggestions?
Avatar of andygrant2005
andygrant2005
Flag of United Kingdom of Great Britain and Northern Ireland image

You can use the replaceWith function :

$("#pagebackground").replaceWith( "<div id="pagebackground">" + $(". aboutus").html() + "</div>" );

Just quickly put this together so you'll have to test.
Avatar of gabos
gabos

ASKER

I copied in the statement, and FireFox keeps giving an error. It says the code is missing a ')'. I tried to add one in, take one out, but I'm having no luck with this thing yet.
SOLUTION
Avatar of andygrant2005
andygrant2005
Flag of United Kingdom of Great Britain and Northern Ireland image

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
SOLUTION
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
Here are the jQuery for both show and hide.

$("#myDiv").hide();
$("#myDiv").show();
ASKER CERTIFIED SOLUTION
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 gabos

ASKER

Admin stuff
Avatar of gabos

ASKER

I had to modify the code given by andygrant2005 for my specific use. I wanted to show the exact syntax to for other people who are searching for a similar solution.