Hi everybody,

I was searching Google for a good/lightweight way to show and hide divs simultaneously. I stumbled upon a post here by paul_wilkins (in the link below) and it's exactly what I was looking for, except for one thing. I'm curious what I would have to tweak to show the content content in div id="one" when the page loads instead of both being hidden at start?

I'm a rookie when it comes to JS and any help would be greatly appreciated.


http://www.sitepoint.com/forums/show...=1#post4806399


Here's the code I'm using from the link above...


So finally, here's the CSS code for the test page:

style.css
Code:
.hidden {
    display: none;
}
Here's the HTML code for the test page:

index.html
Code:
<html>
<head>
<title>Hidden Div</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div id="sections">
    <a href="#one">Show ONE</a>
    <a href="#two">Show TWO</a>
</div>
<div id="one">ONE.</div>
<div id="two">TWO.</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
And here's the script for the test page:

script.js
Code:
function showSection() {
    var i;
    for (i = 0; i < links.length; i += 1) {
        document.getElementById(links[i].href.split('#')[1]).className = 'hidden';
    }
    document.getElementById(this.href.split('#')[1]).className = '';
    return false;
}
function createShowSection(links) {
    return showSection;
}
var sections = document.getElementById('sections'),
    links = sections.getElementsByTagName('a'),
    showSection = createShowSection(links),
    i;
for (i = 0; i < links.length; i += 1) {
    links[i].onclick = showSection;
}
showSection();
Thanks in advance!
-Jeremy