ukrywanie/pokazywanie części kodu

[dam-pro]

szukam skryptu, który pozwoli na ukrywanie/pokazywanie kilku fragmentów na raz, coś takiego:


KATEGORIE:
kat1, kat2, kat3, kat4, kat5, kat6, kat7, kat8, kat9, kat10, kat11..., katxx;

chcę, aby pogrubione części tekstu był domyślnie ukryta, a na końcu będzie przycisk "więcej" po kliknięciu w niego pokaże ukryte części tekstu i zamieni się na "mniej" /kliknięcie w mniej działa w 2 stronę//


ok, już znalazłem odpowiedni skrypt:

Kod:

<script type="text/javascript">
      function wiecej(nazwy, x, mniej, wiecej, t,i,s){
    for(i=0;i<nazwy.length;i++){
    if(t=document.getElementById(nazwy[i])){
    t.style.display=(s=t.style.display=='none')?'':'none';
    }
    }
      x.innerHTML=s?mniej:wiecej
      }
    </script>

Kod:

kat1, <div id="wiecej1" style="display: none">kat2, </div>kat3, kat4, <div id="wiecej2" style="display: none">kat5, kat6, </div>kat7, kat8, kat9, <div id="wiecej3" style="display: none">kat10, </div>kat11..., katxx; <br> <span onclick="wiecej(['wiecej1','wiecej2','wiecej3'],this,'Mniej','Więcej')">Więcej</span>

tylko dlaczego ukryte części po kliknięciu "więcej" pokazują się w nowych linijkach??? wszystko powinno zmieścić się w 2 linijkach, a

zamiast tak:
kat1, kat2, kat3, kat4, kat5, kat6, kat7, kat8, kat9, kat10, kat11..., katxx;

pokazuje się tak:
kat1,
kat2,
kat3, kat4,
kat5, kat6,
kat7, kat8, kat9,
kat10,
kat11..., katxx;

dlaczego? jak to zmienić?

czy aby było poprawnie, każdy element oddzielnie muszę wziąć w "div" i nadać mu "float: left" ??? niby działa tak jak chcę, ale choć jestem początkujący wydaje mi się to dziwne, i sporo zachodu.. i na dodatek każdemu jakoś "spację" trzeba zrobić, to znowu wszystkim "margin: 0px 3px 0px 0px" ... / da się prościej? i tak w ogóle jest tu ktoś?

[camelrafal]

z jquery sobie skorzystaj

Kod:

<h1 id="kat1">kat1</h1><p>cos tam cos tam</p>
<script>
$('#kat1').click(function(){ $('#kat1').next('p').slideToggle(); });
</script>

i wszysio
dodatkowo jeszcze bedziesz miał w tym fajną animację

a co do tego że pokazuje się w wielu linijkach zamiast jednej to dlatego że div ma domyślnie ustawioną własność display na block
a block jest taki samolubny że nie chce sie z nikim dzielić miejscem i zrzuca kolegów piętro niżej
żeby tego uniknąć ustaw w divie

Kod:

display:inline;