Rolovaťeľné menu

Potreboval by som pomoc. Chcel by som aby sa mi tie skratky ako PVP a TVP rolovali za tie ročníky a neviem si s tým rady.

<div id="navcontainer">
<ul id="navlist">
<ol class="tocline1"><a href="">1. ročník</a></ol>
<ul class="tocline1"><a href="">PVP</a></ul>
<ul class="tocline1"><a href="">TVP</a></ul>
<ol><a href="">2. ročník</a></ol>
<ul class="tocline1"><a href="">PVP</a></ul>
<ul class="tocline1"><a href="">TVP</a></ul>
<ol><a href="">3. ročník</a></ol>
<ul class="tocline1"><a href="">PVP</a></ul>
<ul class="tocline1"><a href="">TVP</a></ul>
<ol><a href="">4. ročník</a></ol>
<ul class="tocline1"><a href="">PVP</a></ul>
<ul class="tocline1"><a href="">TVP</a></ul>
</ol>
</div>


Bol by som veľmi vďačný kedby mi niekto pomohol. Za skorú odpoveď vopred Ďakujem. A kedby sa dalo tak konkrétne a žiadne odkazy

ja to viem aj som prisiel na to ako to urobit ale neide mi tam dat viecej tych poloziek

mam to zatiel tak

<script>
function zobrazSkryj(idecko){
el=document.getElementById(idecko).style;
el.display=(el.display == 'block')?'none':'block';
}
</script>
<style>
h3 {cursor: pointer; cursor: hand; text-decoration: underline}
.skryvany {display: none}
</style>


<h3 onclick="zobrazSkryj('oddil1','oddil2')">1. ročník</h3>
<div id="oddil1" class="skryvany">PVP</div>
<div id="oddil2" class="skryvany">TVP</div>
<h3 onclick="zobrazSkryj('oddil3')">2. ročník</h3>
<div id="oddil3" class="skryvany">PVP</div>
<div id="oddil4" class="skryvany">TVP</div>
<div id="navcontainer">