Toggle Visibility By Class

Question

Hi can anyone help me please.

How can i use Toggle Visibility by class instead of a id for example.

The Button

<a href="javascript:void(0);" onclick="toggle_visibility('trailer');">Trailer</a>

Then this.

<div class="trailer" style="display:none">{include file="trailer.tpl"}</div>

So how can i modify this javascript to work with classes.

{literal}
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>                
{/literal}  

So what would javascript by for this please help.

Answer 1

Use getElementsByClassName

function toggle_visibility(className) {
    elements = document.getElementsByClassName(className);
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.display = elements[i].style.display == 'inline' ? 'none' : 'inline';
    }
}