the ultimate show/hide for divs

[lostoath]

Here's a simple show/hide script:

<script>
var head="display:``"
function showhide(div) {
var head=div.style
if (head.display=="none")
head.display=""
else
head.display="none"
}
</script>

<a href="javascript:void(0);" onclick="showhide(document.all[this.sourceIndex+1])">Show/Hide</a>
<div style="display: none;">Yada Yada Yada</div>

This way you can put as much divs as you want without actualy naming them. Problem is it wont work in FF! :(

Any ideas for solution?

[zangs]

hello,

your script :
<a href="javascript:void(0);" onclick="showhide(document.all[this.sourceIndex+1])">Show/Hide</a>
<div style="display: none;">Yada Yada Yada</div>

solution : "document.all" is not working in FF.
you can use "document.getElementById" or "document.getElementsByName" instead of you used.

zangs

[lostoath]

I'm now trying to use:
document.getElementsByTagName("div").item(0).parentNode

as in

<a href="javascript:void(0);" onclick="showhide(document.getElementsByTagName("div").item(0).parentNode)">Show/Hide</a>
<div style="display: none;">Yada Yada Yada</div>

Still wont work (plus i get a JS error). What am I missing?

[jshanman]

function toggleTags(tag) {
var allTags = document.getElementsByTagName(tag);
for (i = 0; i < allTags.length; i++) {
allTags[i].style.display = (allTags[i].style.display == 'none')? 'block' : 'none';
}
}

<input type="button" value="toggleView" onclick="toggleTags('div')">
<div style="display: none;">Yada Yada Yada</div>

[lostoath]

Hey jshanman,

Not quite there yet.

I'm reading an RSS FEED from a certain forum. I want to display it as a tree fiew. So what I got is something like this:

Link 1
Link 2
Link 3 etc...

Under each link there's a hidden div with the content of the post. Each click will display a div under that certain link. Problem is i dont want to asign each div an ID since they are "randomly" generated.

That's why the script I presented in the first place was perfect. Except for FF support that is. All I need to do is to convert it to use getElementsByTagName.

Hope it's more clear now.

Any Ideas?

[jshanman]

function toggleTags(parentObj) {
var allTags = parentObj.getElementsByTagName("div");
for (i = 0; i < allTags.length; i++) {
allTags[i].style.display = (allTags[i].style.display == 'none')? 'block' : 'none';
}
}
<div><span onclick="toggleTags(this.parentNode)">Click to expand</span>
<div style="display: none">yada</div>
<div style="display: none">yada</div>
<div style="display: none">yada</div>
</div>

Is this more along the lines of what your looking for?

- JS

[lostoath]

This is perfect! Thanks a bunch JS!

- Romi