NEED help with replacing show/hide text *can I do it?

[bobbyb5]

I'm designing a web site that has a rather long list. So I decided to use collapsable scroll boxes in categories that contain simple show hide links. The idea is simple enough... find what you want in the box to the left and some info pops up to the right. Works beautifully and saves me from making a 100+ pages for each link, except that I don't know and can't find anywhere how to get rid of the text unless the same link is clicked again. For instance: you have a-e, you click on 'a' and up comes a paragraph of info, click on b-e and that info also comes up, but 'a' hasn't left and eventually you have a mess. Here's the code I have so far... some of the styles is on a css sheet and it's only a start for structure so it's not perfect yet.

<div id="contentwrapper">
<div id="contentleft">
<div class="scrollcontain" id="scroller1" style="display: block;">
<div class="scroll">
<div class="scrollpadder">
<a href="#" onclick="toggle ('office space'); return false;">
<p>Office Space<br>
<a href="#" onclick="toggle ('hellboy'); return false;">
Hellboy<br>
<a href="#" onclick="toggle ('george'); return; false">
george<br>
...<br>
...<br>
Great Balls of Fire!!!<br>
...<br>
test<br>
<style type="text/css">#movies div {display:none;}</style>
<div id="movies">
<a href="javascript:show(0)"></a>
<div>Test 1</div>

</div>

</div>
</div>
</div>
</ul>
</div>
<div id="contentright">
<h1 id="controlheading">Review</h1>

<div id="hellboy" style="display:none">Hellboy is good movie. I watch several times and never saw another movie with hell. So, in conclusion good movie is hellboy for me and for you and for family.</div>
<div id="office space" style="display:none">Office Space is good movie. I watch several times and never saw another movie with hell. So, in conclusion good movie is hellboy for me and for you and for family.</div>
<div id="george" style="display:none">George is good movie.</div>


So, please... if anyone knows the one little command I'm missing please let the world know. I'm open to suggestions.

P.S. I threw in a search box that points to google - sitesearch, problem is google doesn't seem to work unless the site is submitted. Is there anyway you can simply search your site?

 

[mundi]

hmm, well here is some java that you may find useful. im not sure that it is exactly what you are looking for, and i do not have an example. i just remembered i had something like this in my database of scripts....

<!-- TWO STEPS TO INSTALL CLICK-TO-EXPAND MENU:

1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<script type="text/javascript" src="scripts.js">



</script>

<style type="text/css"><!--

#containerul, #containerul ul{
text-align:left;
margin:0; /* Removes browser default margins applied to the lists. */
padding:0; /* Removes browser default padding applied to the lists. */
}

#containerul li{
margin:0 0 0 30px; /* A left margin to indent the list items and give the menu a sense of structure. */
padding:0; /* Removes browser default padding applied to the list items. */
list-style-type:none; /* Removes the bullet point that usually goes next to each item in a list. */
}

#containerul .symbols{ /* Various styles to position the symbols next to the items in the menu. */
float:left;
width:12px;
height:1em;
background-position:0 50%;
background-repeat:no-repeat;
}

--></style>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<ul id="containerul">
<li>
Blog Sites
<ul>
<li>
<a href="http://www.autisticcuckoo.net">Tommy Olsen</a>
</li>
<li>
<a href="http://www.zeldman.com">Jeffrey Zeldman</a>
</li>
<li>
<a href="http://www.meyerweb.com">Eric Meyer</a>
</li>
</ul>
</li>
<li>
Other Sites
<ul>
<li>
<a href="http://www.accessify.com/">Accessify</a>
</li>
<li>
<a href="http://www.w3.org/">World Wide Web Consortium</a>
<ul>
<li>
<a href="http://validator.w3.org/">The W3C Markup Validator</a>
</li>
<li>
<a href="http://jigsaw.w3.org/css-validator/">The W3C CSS Validator</a>
</li>
<li>
<a href="http://www.w3.org/TR/WAI-WEBCONTENT/">The Web Content Accessibility Guidelines</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>

<script type="text/javascript">
initiate(); // This must be placed immediately after the menu in order to format it properly.
</script>