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?
Web DevelopmentWeb Languages and StandardsScripting Languages

Avatar of undefined
Last Comment
gabos

8/22/2022 - Mon
andygrant2005

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.
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
andygrant2005

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
andygrant2005

Here are the jQuery for both show and hide.

$("#myDiv").hide();
$("#myDiv").show();
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
ASKER CERTIFIED SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
gabos

ASKER
Admin stuff
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.