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.
Here’s the code I’m using from the link above…
[HR][/HR]
So finally, here’s the CSS code for the test page:
style.css
.hidden {
display: none;
}
Here’s the HTML code for the test page:
index.html
<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
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
Hi Jeremy. Welcome to the forums. 
I’m a noob at JS, but trying to learn, so after messing around a bit, I came up with a solution, though it’s probably really inefficient. Hopefully the likes of @paul_wilkins or @Pullo can provide a better response.
Anyhow, here’s my stab:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.hidden {
display: none;
}
</style>
</head>
<body>
<div id="sections">
<a href="#one">Show ONE</a>
<a href="#two">Show TWO</a>
<a href="#three">Show THREE</a>
<a href="#four">Show FOUR</a>
</div>
<div id="one">ONE.</div>
<div id="two">TWO.</div>
<div id="three">THREE.</div>
<div id="four">FOUR.</div>
<script>
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;
}
function init() {
var i;
for (i = 1; i < links.length; i += 1) {
document.getElementById(links[i].href.split('#')[1]).className = 'hidden';
}
}
init();
</script>
</body>
</html>
Hi Ralph,
Good going!
The only thing I would change about your solution is the fact that if the OP decides he wants to have a different panel open initially, he has to hunt through the code and find out where the open panel is set.
It would therefore be easier if you could pass in the open panel as a parameter:
showSection({open: one});
I modified the code a little to reflect this:
function showSection(opts) {
var i;
for (i = 0; i < links.length; i += 1) {
var currLink = document.getElementById(links[i].href.split('#')[1]);
if (currLink != opts.open){
currLink.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({open: two});
I notice that the code is from the beginning of 2011, so it will be interesting to see if Paul has anything to add.
Ooh, nice improvement, Pullo. Is {open: two} and object literal? That’s the only thing that code reminds me of. If so, it’s interesting that you can use one as an argument. (I’ve only ever seen one explicitly assigned to a variable.)
ralph.m, that was a great workaround! And a fine the assist by Pullo too. I really appreciate your help and the warm welcome to boot. I know the code was a bit old but for my needs but now this works perfectly for what I need. If you guys ever need a graphic design help sometime, don’t hesitate to let me know.
You’re welcome. Glad we could help. This is a pretty friendly place, so do come back any time.
Oh I plan on sticking around, I’ve been digging through threads all night. There’s a lot of good stuff here for a beginner like myself. Hopefully I can contribute as well. Cheers!
Aye, 'tis that.
This is a common technique for passing configuration parameters to (for example) jQuery plugins.
We could have written showSection("one"); and achieved the same thing.
Using an object just makes it a little more readable.
In fact thinking about it, it would have been better to call it “openDiv” or “openPanel” or something …
It can be interesting going on an archeological dig of your own past code - I’ll see if I can block out some free time today to do so.
Cool
One thing that might be worth looking at is the fact that this line:
document.getElementById(this.href.split('#')[1]).className = '';
causes this error:
Uncaught TypeError: Cannot call method 'split' of undefined
the first time the code runs, as this initially points to the global window object.
On every subsequent execution, it points to the link which was clicked.