PDA

View Full Version : toggle visibility on multiple elements simultaneously



stewie
05-14-2009, 01:59 PM
Hello. I am working on a project that shows archived data as well as current data on the same page. When the page builds, current data is shown, archived data is hidden (by using a div with id="archive"). I found comments here that getElementsByName was not a good cross browser way to handle this (and I'm not sure how to use that anyway). Can someone suggest the correct way to handle this?

There should be a link that, when clicked, will grab each element on the page with id="archive" and toggle the display property (none or block).

Here is the current code:


function archives(toggle) {
if (typeof(toggle) != "undefined") {
if (document.getElementById(toggle).style.display == 'none') {
document.getElementById(toggle).style.display = 'block';
document.getElementById('toggleText').innerHTML = 'Show Current Folders'}
else {
document.getElementById(toggle).style.display = 'none';
document.getElementById('toggleText').innerHTML = 'Show All Folders'}
}}

This works just fine, but only for the first element that it finds. I need many elements with the same name to be effected.

TinyScript
05-14-2009, 02:04 PM
use getElementsByClassName


<HTML>
<HEAD>
<TITLE></TITLE>

<script language="JavaScript">
function runit(){
var ArrayitemStylesomething=document.getElementsByClassName('itemStylesomething')
for (i=0;i<ArrayitemStylesomething.length;i++)alert(ArrayitemStylesomething[i].id)
}
</script>

</HEAD>

<BODY onload="runit()">

<div class="itemStylesomething" id="989898">item 1</div>
<div class="itemStylesomething" id="45434">item 2</div>
<div class="itemStylesomething" id="090987">item 3</div>

<div class="itemStylesomething" id="34543">item 4</div>
<div class="itemStylesomething" id="2222222">item 5</div>
<div class="itemStylesomething" id="55444">item 6</div>
<div class="itemStylesomething" id="984448">item 7</div>
<div class="itemStylesomething" id="98878">item 8</div>
</BODY>

</HTML>

abduraooft
05-14-2009, 02:26 PM
I found comments here that getElementsByName was not a good cross browser way to handle this (and I'm not sure how to use that anyway). Can someone suggest the correct way to handle this?
You could use getElementsByTagName() (https://developer.mozilla.org/en/DOM/element.getElementsByTagName)
to grab the elements and then loop through the array of elements.

use getElementsByClassName This method is not cross browser friendly, though you may add a custom method in to your DOM, see http://codingforums.com/showthread.php?t=154727

adios
05-14-2009, 07:11 PM
Another possibility (there are several) - as long as you're putting this together at the backend, id the archived elements consecutively - id="archive1", id="archive2", id="archive3" ... then:


<!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</title>
<style type="text/css">
div {width: 110px;height:50px;padding:2px;margin:2px;background:tan;border:1px black solid;text-align:center;}
div.archive {display: none; color:purple;background:pink;}
a {text-decoration:none;font:bold 8pt verdana;color:black;}
</style>
<script type="text/javascript">

function toggle_archives(link)
{
var el, n = 1, which;
while (el = document.getElementById('archive' + n++))
{
which = (el.style.display == 'block');
el.style.display = which ? 'none' : 'block';
}
var linktext = which ? 'Show All Folders' : 'Show Current Folders';
link.replaceChild(document.createTextNode(linktext), link.firstChild);
return false;
}

</script>
</head>
<body>
<a href="#null" onclick="return toggle_archives(this)">Show All Folders</a>
<br /><br />
<div class="something">
::: not an archive :::
</div>
<div class="something">
::: not an archive :::
</div>
<div class="archive" id="archive1">
::: archive :::
</div>
<div class="archive" id="archive2">
::: archive :::
</div>
<div class="something">
::: not an archive :::
</div>
<div class="something">
::: not an archive :::
</div>
<div class="archive" id="archive3">
::: archive :::
</div>
</body>
</html>

If you use this, don't set the style.display property inline (in the div tag). That way, the first time it'll be the empty string, essential for the state to be determined.