Question

I’m currently building a website using jquery. I’ve found a script which will cause my div, with the id “content”, to hide once I click outside of it. I have links which will show the div and then set the html to what I specify. My only problem is that once I select one of the links that triggers the html change and then click outside the div, I will select another link and only the html of the initial trigger is shown!

How can I force the script to show the correct corresponding html?

I am using the following code to set the value of said div:

<script>

$("#projects").click(function () {

  $("#content").replaceWith( "This should display the projects!" );

});

</script>

<script>

$("#resources").click(function () {

  $("#content").replaceWith( "This should display the resources!" );

});

</script>

<script>

$("#contact").click(function () {

  $("#content").replaceWith( "This should display the contact information!" );

});

</script>

Answer 1

The replaceWith method will “Replace each element in the set of matched elements with the provided new content.” (from the docs).

This means that after you call it, there is not longer a div with an ID of “content” in your page – it has been replaced!

What you are probably looking for is the html() method:

http://api.jquery.com/html/

Example use:

$("#contact").click(function () {

  $("#content").html( "This should display the contact information!" );

});