Java sicript Gizle/Göster olayı ?

Merhaba Arkadaşlar yeni yapacağım bir projede sol bloklara gizle/göster yöntemi eklememm lazım bu konuda yardımcı olacaklara şimdiden teşekkürler...
Tasarımın Sol Tarafında 4 adet alt alta "div"li blok var kodyazmak gerekirse.

<div class="blok-1"></div>
<div class="blok-2"></div>
<div class="blok-3"></div>
<div class="blok-4"></div>

şeklinde divlerim var. bu blokların her birinin sağ üst köşesindeki "[+]" bu şekle basınca o tıklanan blok açılacak ve "[-]" şekline basınca kapancak.

umarım derdimi anlatabilmişimdir iyi çalışmalar...

Daha dun bu sistemi yazdım şanlısın direk kodları veriyorum ;

Js kodları

 $('.sss ul li').click(function(){

        $('ul.sikcaSorulanSorular li p').slideUp('fast');
        $('ul.sikcaSorulanSorular li img').attr('src','kutuphane/resim/sssArti.png');
        $(this).parent().find('p').slideDown('fast');
        $(this).parent().find('img').attr('src','kutuphane/resim/sssEksi.png');

    });

Buda html kodların ;

<ul class="sikcaSorulanSorular ortala">
    <li>
        <a href="javascript:void();">Aycan Nedir ?</a><img src="kutuphane/resim/sssArti.png" alt="arti" />
        <p style="display: none;">Bla Bla Bla</p>
    </li>
    <li>
        <a href="javascript:void();">Aycan Nedir ?</a><img src="kutuphane/resim/sssArti.png" alt="arti" />
        <p style="display: none;">Bla Bla Bla</p>
    </li>
    <li>
        <a href="javascript:void();">Aycan Nedir ?</a><img src="kutuphane/resim/sssArti.png" alt="arti" />
        <p style="display: none;">Bla Bla Bla</p>
    </li>
    <li>
        <a href="javascript:void();">Aycan Nedir ?</a><img src="kutuphane/resim/sssArti.png" alt="arti" />
        <p style="display: none;">Bla Bla Bla</p>
    </li>
    <li>
        <a href="javascript:void();">Aycan Nedir ?</a><img src="kutuphane/resim/sssArti.png" alt="arti" />
        <p style="display: none;">Bla Bla Bla</p>
    </li>
    <li>
        <a href="javascript:void();">Aycan Nedir ?</a><img src="kutuphane/resim/sssArti.png" alt="arti" />
        <p style="display: none;">Bla Bla Bla</p>
    </li>
</ul>

Css kodların ;

.sss{width:659px; overflow: hidden; padding: 10px 0px 10px 0px;text-align: center;  }
                            ul.sikcaSorulanSorular{width: 651px; overflow: hidden;}
                                ul.sikcaSorulanSorular li{width: 651px; overflow: hidden; background: url(../resim/sssLi.png) no-repeat; margin-top: 8px; overflow: hidden;}
                                ul.sikcaSorulanSorular li p{width:630px; overflow: hidden; color: #838383; line-height: 14px; padding: 15px 0px 10px 20px; font-size: 11px; font-family: 'Tahoma' ,serif; text-align: left;}
                                    ul.sikcaSorulanSorular li a{width: 565px; height: 20px; display: block; color: #a0a0a0;padding: 15px 0px 0px 40px;float: left; font-size: 11px; text-align: left;}
                                    ul.sikcaSorulanSorular li img{width: 14px; height: 35px; margin-right: 20px; float: right;}

css ve html kodlarındaki resimleri sen kendin tedarik edersin.

Çok Teşekkür Ederim kardeşimm +++

Takıldığın bir yer olursa belirtirsin.