Trying to tweak Javascript for Collapsible Text

[giftmeister]

I got this script already adjusted from its original source and it's close to what I'd like, but I've tried and can't figure out how to tweak it further. It's for some of my Product Info pages so that a customer can click to view more details instead of crowding the page with text from the get-go.

Can someone tell me how to make the link "+Details (click for more/less)" appear in bold blue as all my other links (before and after they're clicked)? My blue is the colour 330099.

The first part of the script:

<!-- COLLAPSIBLE MENU -->

<!-- This goes into the HEAD of the html file -->

<script language="JavaScript" type="text/javascript">
<!-- Copyright 2005, Sandeep Gangadharan -->
<!-- For more free scripts go to http://www.sivamdesign.com/scripts/ -->
<!--
if (document.getElementById) {
 document.writeln('<style type="text/css"><!--')
 document.writeln('.links {display:none; padding-left:14px}')
 document.writeln('.link {text-decoration:none; color:blue}')
 document.writeln('a:hover.link {text-decoration: underline; color: red}')
 document.writeln('//--></style>') }

function openClose(theID) {
 if (document.getElementById(theID).style.display == "block") {
     document.getElementById(theID).style.display = "none";
     document.getElementById("tick_"+theID).innerHTML = "+"; }
 else {
     document.getElementById(theID).style.display = "block";
     document.getElementById("tick_"+theID).innerHTML = "-"; } }
// -->
</script> 

The second part:

<div onClick="openClose('b1')" style="cursor:hand; cursor:pointer"><span id="tick_b1">+</span> 
<span onMouseOver="this.style.color='#330099';this.style.textDecoration='none';" onMouseOut="this.style.color='#330099';this.style.textDecoration='none';">
Details (click for more/less)
</span></div>
<div id="b1" class="links">
<br />
This blurb is a test for the javascript to expand the text area for more detailed product information. 
</div> 

Link to the product on my site I'm testing this on: http://www.alexandergifts.ca/index.p...roducts_id=371

ZC 1.38a

Cheers,

Robbie

[Absolute]

Not really sure why the original coder decided to use DIVs for the openClose function firing, when you can easily replace tehm with <a> and this has built in procedures for :hover states, and of course the onclick="" function.

If it was my site, I would do something like:

<style>
  a.expandLnk .expandText {
    color: #330099;
    text-decoration: none;
    font-weight: bold;
  }
</style>

<a onClick="openClose('b1'); return false" href="#" class="expandLnk">
  <span id="tick_b1">+</span> 
  <span class="expandText">Details (click for more/less)</span>
</a>
<div id="b1" class="links">
<br />
This blurb is a test for the javascript to expand the text area for more detailed product information. 
</div>

Absolute

[giftmeister]

Thanks for a quick and helpful answer! I copied yours and it works even better because I can now place the link right after the regular text, no line break.

R