jquery replace div with a div

gabos
gabos used Ask the Experts™
on
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?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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.

Author

Commented:
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.
Sorry, please try :

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

It was the double quotes.
CompTIA Security+

Learn the essential functions of CompTIA Security+, which establishes the core knowledge required of any cybersecurity role and leads professionals into intermediate-level cybersecurity jobs.

Commented:
Thanks. After fiddling around with it... I got it to work exactly the way I want it. I used this code:
 $("#pagebackground").replaceWith( "#aboutus" ); 

Open in new window

.

Basically, it trades out the div ids and displays the content from aboutus div, instead of pagebackground div.

I have one more issue though. In the css file, i used the visibility: hidden. I want to unhide it using jquery, what is the syntax for that?

Thanks.
Here are the jQuery for both show and hide.

$("#myDiv").hide();
$("#myDiv").show();
Commented:
Thanks for your help. I've got the jQuery code to this:
$(document).ready(function() {     
        $("a.aboutusclick").click(function(){     
	$("#pagebackground").replaceWith( "#aboutus" );
	$("#aboutus").css('visibility', 'visible');
         });  
 }); 

Open in new window

This does exactly what I want it to do.

Author

Commented:
Admin stuff

Author

Commented:
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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial