[digipaint]

What would be the best way to achieve this....

I have a list of links in an unordered list, and an empty box about 50% of the page size, and i want the content in the box to change depending on what link is clicked.

I dont want to change the page,(ie, create new html file and only change content of that <div> and link to that) just what appears in that box.

Would this be best done with a javascript onclick function?.

Thanks.

[d3mcfadden]

<script type="text/javascript">
function update (a, b) {
var content = document.getElementById(a);
content.innerHTML = b;
}
</script>
<a href="#" onclick="update('content_box', 'new content here');" >link</a>
<div id="content_box"></div>

[digipaint]

Thanks mate, i am pretty new to Dom scripting, you probably saved me a few hours there.

[djeglin]

Thats actually a pretty ugly way of doing it. Yes, it requires the least javascript, and is the easiest to get the hang of, but its obtrusive into the html, and uses the innerHTML attribute, which is generally looked down upon, and for good reason.

Its actually nicer to use proper DOM scripting to do this. For example, what if you have more than text you want to display in that div? You would have to use strings for each option, which would be all of the html required for that section of content. Its just not manageable, especially not if you need to update the content with any regularity.

You could try using the Yahoo DOM Builder - relevant article linked below:

Jack Slocum's Blog » DomHelper - Create Elements using DOM, HTML fragments and Templates

Or, you can write it yourself by using createChild and AppendChild... Which is what I tend to do at the moment, but that tends to work better where you have a list of data you are pulling from an array or something, cause you only have to set the paramaters once and get the script to do the rest of the repetitive work.

Cheers

David