Javascript/HTML question

dutchfire

Deity
Retired Moderator
Joined
Jan 5, 2006
Messages
14,106
Location
-
I want to have an array of divs, which I can make visible by clicking a button, but it isn't working (and I don't know much about javascript).

HTML:
<SCRIPT LANGUAGE="JavaScript">
<!--
function bewerknieuwsitem(id) {
    document.getElementById('dividers[how to get this id?]').style.visibility = "visible";
    document.getElementById('dividers[how to get this id?]').style.height = "400px";
}
// -->
</SCRIPT>

<div style="visibility:hidden; height:0px;" id="dividers[php provided id]">
Yadda yadda</div>

<a href="javascript:bewerknieuwsitem(php provided id);">Button</a>
 
Couldn't you just use

document.getElementById("dividers[" + id + "]").style.visibility = "visible";
document.getElementById("dividers[" + id + "]").style.height = "400px";
 
Just pass in the name of the div id into the function. ie.
<a href="javascript:bewerknieuwsitem('my_div_id');return false;">Button</a>

then in your function you'd just go
document.getElementById(id).style.visibility = "visible";

I stuck that return false; in there so that the link doesn't actually go anywhere.

I'd highly recomment that you use something like mootools to make this into a smooth accordion-style uhh type thing.
 
Depending on how you hid it in your css you may have to change
document.getElementById('dividers[how to get this id?]').style.visibility = "visible";
to
document.getElementById('dividers[how to get this id?]').style.display = "block";

Also I would recommend following warpus's instructions to improve your function.

edit: Here is an improved version (type="text/javascript" is better supported than language="javascript" and tags should be lowercase in HTML.
Code:
<script type="text/javascript">
<!--
function bewerknieuwsitem(id) {
var element = document.getElementById('dividers[' + id + ']')

    element.style.visibility = "visible";
    element.style.height = "400px";
}
// -->
</script>
 
Back
Top Bottom