making disable/enable subcategory at bottom of sidemenu

[ibwaheemi]

hello i am fairly new to programming but am learning fast

i am looking to add some text at the bottom of the sidebar which when clicked will show or hide subcategories in my sidemenu and for the text to change to enable or disable respectively. im certain only java will solve this riddle of mine, after googling for some time i cant seem to slve this and would appreciate any help and pointers of any kind.

im sure it is an easy solution pls help

here is my html and css (doctype xhtml 1.0 t)

/* header and sidebar shape colour position*/
#info h3 {padding:5px 0 10px 10px; margin:0; font-size:12px; color:#048; font-weight:normal;}
dl.curved,dl.curved1 {background:#B56B91 url(c_tl_abu.gif) top left no-repeat; margin:5px auto 5px auto; padding:0; width:100%;}
dl.curved dt,dl.curved1 dt {background:transparent url(c_tr_abu.gif) top right no-repeat; padding:10px; text-align:left; color:#fff;}
dl.curved dd,dl.curved1 dd {background:#FEE3F3 url(c_bl_abu.gif) bottom left no-repeat; padding:0; margin:0;}
#info p {line-height:1.5em;}
dl.curved dd p,dl.curved1 dd p {margin:0; padding:5px; line-height:1.3em;}
dl.curved dd p.last,dl.curved1 dd p.last {background:transparent url(c_br_abu.gif) bottom right no-repeat; }
dl.curved1 {width:230px;}
dl.curved1 dt {font-weight:bold; font-family: Verdana; font-size: medium;}
.clear {display:block; height:0; overflow:hidden; clear:both;}


/*sidebar text styling*/
.mecat{width:230px; margin:0;font-size:medium; text-decoration:none; font-family: Arial; padding:10px 0 0 0}
.mecat .ttl{font-weight:bold;color:#00000c;margin-bottom:10px}
.mecat ul{padding:0;margin:10px}
.mecat .lev2{padding:0 0 0 20px}
.mecat .lev3{padding:0 0 0 10px}
.mecat .lev1 li{list-style-type:none;margin:10px 0}
.mecat .lev2 li{color:#8d8d8d;list-style-type:square;margin:4px 0}
.mecat .lev2 li span{color:#000}
.mecat .lev2 li span.cnt{color:#666}
.mecat .lev3 li{list-style-type:none}
.mecat .lev1 li{font-weight:bold}
.mecat .lev2 li{font-weight:normal}
.mecat .cnt{color:#666;font-family:Verdana;font-size:xx-small}
.mecat a:link{text-decoration:none}
.mecat a:hover{text-decoration:underline;font-size:105%}


.bod {background-image: url('http://img.auctiva.com/imgdata/1/0/8/9/4/9/6/webimg/525773337_o.jpg');padding:0px;margin:0px}
.style1 {text-align: center;}
.formtbl {padding:0; margin:10px 10px;font-family: Arial, Helvetica, sans-serif;font-size: medium;}



--------------------

<!--start of sidebar -->
<dl class="curved1">
<dt>Shop Categories</dt>
<dd>
<div class="mecat">
<ul class="lev1">
<ul class="lev1"><li><a href="my link">category</a></li></ul>
<ul class="lev2"><li><a href="my link">sub category</a></li></ul>
<ul class="lev2"><li><a href="my link">sub category</a></li></ul>
<ul class="lev1"><li><a href="my link">category</a></li></ul>
<ul class="lev1"><li><a href="my link">category</a></li></ul>
<ul class="lev1"><li><a href="my link">category</a></li></ul>
<ul class="lev1"><li><a href="my link">category</a></li></ul>
<ul class="lev2"><li><a href="my link">sub category</a></li></ul>
<ul class="lev2"><li><a href="my link">sub category</a></li></ul>
<ul class="lev2"><li><a href="my link">sub category</a></li></ul>
<ul class="lev1"><li><a href="my link">category</a></li></ul>
<ul class="lev1"><li><a href="my link">category</a></li></ul>
<ul class="lev1"><li><a href="my link">category</a></li></ul>
</ul>
<p class="last"></p>
</div>
</dd>
</dl>
<!-- end of sidebar-->

[pbrockway2]

To make your webpage dynamic you probably need Javascript. These forums are for Java (a different language).