Hello all.

I am currently developing my new site and I would like the portfolio sections of the site to display my dynamically generated content one project at a time. The content is pulled from an XML file and is written into a dynamically generated set of div tags as so:

Code:
var projects = xmlDoc.getElementsByTagName("project");
		
			for (i = 0; i < projects.length; i++)
			
			{	

				//create div.work
				var div = document.createElement("div");
				div.className = "work";
				div.name = "work";
				div.id = "project" + [i];
				document.getElementById("main_content").appendChild(div);

...
If you visit the site at http://www.peterseaman.co.uk/PORT_TEST/web.html,
you can see that this works just fine and all the projects in the XML file are generated in the html.

What I would like to happen, is that the first project's containing div is given a display: block, and all other projects a display:none. The user can then click a next or previous button and the display property of the next or previous div is set to block, and all others to none - so showing just one project at a time.

I am new to javascript and so don't know whether this is the right technique to use but it seems to be a good one to me. If anyone can help me with the code I will need to make this work, or if anyone can suggest a better method I would appreciate any help.

Thanks!!