Javascript : Hide/Show divs [Archive]

View Full Version : Javascript : Hide/Show divs

dmegatool

2009-05-05, 22:41

Hey guys,
I don't know shit about javascript. I'm in a situation where I need to show/hide div when I click on a link. I'm using a script I've found and most of the time if fine. But the problem is that the divs are pilling up if I click on multiple links!

So I need a little bit help from real programmers :) It's pretty simple, I would need something that would show/hide the div I'm clicking on and hide all the others if they are shown. Could use an array with the id of the divs and get their display if it's none or not... I don't know.

I've found thi one that does what I need but it's hard to make it work in a real site situation. The show/hide divs would need to be included in a single div. I've tested with nested div and it didn't. Maybe you can tell me that this code is good and I need to try some more.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
<script type="text/javascript">
function showHide(products) {
var el = document.getElementById('test');
var children = el.childNodes;
if (children[products].className == "hide") {
for(var i=0; i < children.length; i++) {
children[i].className = 'hide';
}
children[products].className = '';
}
else {
children[products].className = 'hide';
}
}
</script>
<style type="text/css">
</style>
</head>

<body>
<div id="test">
<div class="hide">
Content of Div 1
</div><div class="hide">
Content of Div 2
</div>
</div>

<a href="javascript:showHide('1');">Show Hide 1</a>
<a href="javascript:showHide('2');">Show Hide 2</a>
</body>
</html>

Partial

2009-05-05, 23:10

Could you perhaps store the contents of the div into a JS variable, than set the div's innerHTML to an empty string?

dmegatool

2009-05-06, 07:25

Could you perhaps store the contents of the div into a JS variable, than set the div's innerHTML to an empty string?
That's an idea but it wouldn't work in my case. There will be a CMS (Adobe's InContext for not naming it) and it won't be able to change the content in JS variables. The content would have to be in the divs and hiding/showing them.

ast3r3x

2009-05-08, 16:52

Before I make the javascript, are you opposed to using jQuery? Or better yet, so I don't even have to write code with jQuery or regular javascript, how about using a premade script since what you want sounds pretty much like and accordion (http://jqueryui.com/demos/accordion/).

synotic

2009-05-17, 16:58

This might be no longer relevant, but ast3r3x is right — jQuery is excellent for this kind of thing. You'll want to look at the jQuery docs for the actual code, but if you have a setup like this:

<div id="a" class="box">a</div><div id="b" class="box">b</div><div id="c" class="box">c</div>
<a id="show_a">show a</a><a id="show_b">b</a><a id="show_c">c</a>

Then you can do something like this with jQuery:

$(document).ready(function() {
    $('#show_a').click(function() {
        $('.box').hide();
        $('#a').show();
    });
});

If you want to be really fancy you can extract the id from the "show" links and just use one function for all of the links. So 'show_*' maps to 'id="*".' But based on your use case, this may not be necessary. Another thing to note is that all code that interacts with the DOM must be called within the $(document).ready() function. People used to use the onload function for this kind of thing, but "ready" is more popular since it is triggered as it doesn't wait for images and external resources to completely load.

Gargoyle

2009-05-17, 17:30

Check out http://jqueryfordesigners.com/ for some excellent video tutorials