Wer kennt nicht diese schicken Images mit einem Kreuz in einer Tabelle: Wenn man auf diese klickt, öffnet sich die Gruppierung. Das Image wechselt zu einem Minus und ein weiterer Klick minimiert wieder die Gruppierung. Dieses Verhalten mit Java Script zu programmieren, ist einfacher, als befürchtet. Durch den CSS-Style display: none” können Bereiche – aber auch ganze Tabellen – ausgeblendet werden. In untenstehendem Beispiel erstellen wir Aufzählungen und eine Tabelle. Beide sind durch einen Klick auf das Image „plus.jpg“ und „minus.jpg“ aufklapp- und minimierbar. Selbstverständlich würde dies auch durch einen Klick auf eine Checkbox oder andere HTML-Elemente möglich sein.
<script type="text/javascript">
function gruppiere(img)
{
var actualVisibility=document.getElementById('menu_'+img.id).style.display;
if (actualVisibility != 'none')
{
document.getElementById('menu_'+img.id).style.display='none';
document.getElementById(img.id).src= "plus.jpg";
}
else
{
document.getElementById('menu_'+img.id).style.display='block';
document.getElementById(img.id).src= "minus.jpg";
}
}
</script>
<h1>Menutest</h1>
<img id="abc1" onclick="gruppiere(this)" src="plus.jpg" border="0" alt="" />
<div></div>
<table id="menu_abc1" style="display: none;" border="0" cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td>foo 1</td>
</tr>
<tr>
<td>foo 2</td>
</tr>
<tr>
<td>foo 3</td>
</tr>
<tr>
<td>foo 4</td>
</tr>
</tbody>
</table>
<div>
<ul></ul>
</div>
<li><img id="foo" onclick="gruppiere(this)" src="plus.jpg" border="0" alt="" />
<ul id="menu_foo" style="display: none;">
<li><a href="#">foo 1</a></li>
<li><a href="#">foo 2</a></li>
<li><a href="#">foo 3</a></li>
<li><a href="#">foo 4</a></li>
</ul>
</li>
<li><img id="bar" onclick="gruppiere(this)" src="plus.jpg" border="0" alt="" />
<ul id="menu_bar" style="display: none;">
<li><a href="#">bar 1</a></li>
<li><a href="#">bar 2</a></li>
<li><a href="#">bar 3</a></li>
<li><a href="#">bar 4</a></li>
<li><a href="#">bar 5</a></li>
</ul>
</li>
<li><img id="foobar" onclick="gruppiere(this)" src="plus.jpg" border="0" alt="" />
<ul id="menu_foobar" style="display: none;">
<li><a href="#">foobar 1</a></li>
<li><a href="#">foobar 2</a></li>
<li><a href="#">foobar 3</a></li>
</ul>
</li>
