<div> Text link without changing position on page?

Hello,

My problem is that I have a long list of [B]<a href>[/B] text link categories used in conjunction with [B]<div>[/B] tags, which reveal/hide a list of items for each category (small example of the code format is below). Is there any way I can keep the [B]<a class=”1″ href…>[/B] tag without meaning the page will link to the top of the page when you click on it? I think the problem is with the [B]“#”[/B], which automatically links to the top of the page and I’ve tried changing it to [B]“#bottom”[/B] but then it just links too low on the page. I just want the page to stay in exactly the same place when you click the [B]<a class=”1″ href…>[/B] link, which will reveal/hide the five [B]class=”3″[/B] links every time it’s clicked.

I considered using [B]<a name=”blah”></a>[/B] tags for each category but that wouldn’t give the desired effect (as it would make that particular category go to the top of the page, which I don’t want, because I don’t want the page to move at all when you click the link!). I also considered deleting the [B]<a class=”1″ href…>[/B] tag altogether and changing the [B]<div>[/B] parameters in the CSS, but I’m pretty sure it’s not possible to get the link rollover text effect with [B]<div>[/B] tags.

Can anyone help?

CODE:

<div onClick=”toggle(‘2’)”> [B]<a class=”1″ href=”#”>[/B]Ceramics[B]</a>[/B]</div>
<div id=”2″ style=”display:’none’;”>
<li><a class=”3″ href=”http://www.blahblah.com/main&page=L-1000″>L-1000</a></li>
<li><a class=”3″ href=”http://www.blahblah.com/main&page=L-1001″>L-1001</a></li>
<li><a class=”3″ href=”http://www.blahblah.com/main&page=L-1002″>L-1002</a></li>
<li><a class=”3″ href=”http://www.blahblah.com/main&page=L-1003″>L-1003</a></li>
<li><a class=”3″ href=”http://www.blahblah.com/main&page=L-1004″>L-1004</a></li>

</div>
————————-

Also in #HTML _↴