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:
var projects = xmlDoc.getElementsByTagName("project");
for (i = 0; i < projects.length; i++)
var div = document.createElement("div");
div.className = "work";
div.name = "work";
div.id = "project" + [i];
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.