Here is an excerpt from my code:
<div id='content'>
<div id='map'></div>
<iframe name="content-wrapper"></iframe>
</div>
<div class="sidebar">
<div class="container">
<h2>Bayanihan</h2><br>
<a href="#" target="content-wrapper">Map</a> <a onclick= "hide()" href="forum.html" target="content-wrapper">Forum</a> <a href="insight.html" target="content-wrapper">Insight</a>
<hr>
<script>
function hide() {
$(map).hide();
}
</script>
Essentially, my website consists of a map with a sidebar. The sidebar contains three links: map, forum, insight. My goal is to have the map background disappear and be replaced by forum.html when clicking on Forum, and similarly for Insight. However, as shown in the code snippet, attempting this with forum.html didn't work as expected.