Question

I’m trying to make it so that when a user clicks a navigation menu, the title changes to that title and the main content changes too. I’d rather try and avoid using frames for this.

$('op').click(function(){
    document.getElementById('title').innerHTML=this.innerHTML + ((this.innerHTML.indexOf("'s")==this.innerHTML.length-2) ? " " : "'s ") + this.parentNode.id + " | Le Lepids";
    document.getElementById('content').innerHTML=document.getElementById(this.innerHTML + '_' + this.parentNode.id).innerHTML;
});
// If the code looks ugly and you can't read it, just tell me.

What happens, though, is the title changes perfectly every time, but the content only changes once.

For instance it’ll work fine the first time, then not work any other time after that.

Why is this so? Does it destroy the id ‘content’? I’m not using outterHTML though. And if dose, why does the title change fine?

---

EDIT: Okay, so I think I got it fixed with a few lines of PHP.
But I’m still wondering why it won’t work on my site while what Mia DiLorenzo made works perfectly fine… the code is exactly the same other than variable names.

Answer 1

I’m not sure exactly what you want, but I wrote something anyway http://jsfiddle.net/69FDT/1/

I changed $('op') to $('p') and added some divs to match your Javascript line that changes content. Did you mean something else?

<div id="container">
    <div>Click on these words</div>
      <p>change</p>
      <p>modify</p>
      <p>alter</p>
    <br>
      <div id='title'>Title</div>
      <div id='content'>content</div>
<br>
      <div id="change_container">change placeholder div</div>
      <div id="modify_container">modify placeholder div</div>
      <div id="alter_container">alter placeholder div</div>
    </div>​