Expand to read more...HTML!

Ok here is my problem. I have posting of jobs. And all the jobs have a couple of paragraphs of description on them. Now I want to show just a few sentences of each description and then have a colapse/expand "read more" type of thing. Now I've got it working with my code and JavaScript, however it breaks in FireFox if there is HTML in the descriptor. If there is a <ul><li> elment it will read that and expand the box. Here is the code I use:

<cfset tmp = Find(" ",JobDescription,100)-1>
            <cfif tmp lte 0>
                #ParagraphFormat(JobDescription)#
               <cfelse>
                 #Left(JobDescription,tmp)#
                <span id="#JobID#" style="display:none;">
                #Mid(JobDescription,tmp+1,Len(JobDescription))#
                </span>
                    <span class="linkMore"><A HREF="javascript:showHideDescriptions('#JobID#')">more +/-</a></span>
</cfif>

Code (markup):

Has anyone tried to do something similar before? any tips on how to go about this? Thanks!

 

I could be done using javascript. Mootools for example.


Show your entire code.

 

That's pretty much all the code you need to see. The rest is just filler and graphics that holds it all. Right now I've come up this solution... it kinda works... but it's also kinda clumsy:

<script language="javascript">
			   function changeDiv#JobID#()
				{
				 if (document.getElementById('noHTML#JobID#').style.display=="inline")
				   {
				   document.getElementById('noHTML#JobID#').style.display="none";
				   document.getElementById('yesHTML#JobID#').style.display="inline";
				   }
				 else
				   {
				   document.getElementById('yesHTML#JobID#').style.display="none";
				   document.getElementById('noHTML#JobID#').style.display="inline";
				   }
				}
			  </script>
            
            <cfset tmp = Find(" ",REReplace(JobDescription,"<[^>]*>","","All"),340)-1>
            <cfif tmp lte 0>
                #ParagraphFormat(JobDescription)#
			<cfelse>
            	<div id="noHTML#JobID#" style="display:inline;">#Left(REReplace(JobDescription,"<[^>]*>","","All"),tmp)#...</div>
                <div id="yesHTML#JobID#" style="display:none;">
                #ParagraphFormat(JobDescription)#
                </div>
                <div id="linkMore" style="float:right;"><A HREF="javascript:changeDiv#JobID#()">more +/-</a></div>
			</cfif>

Code (markup):

So basically i have two divs...one w/o html in it.. and one with HTML...and when you press the "more+/-" it switches the divs. Like i said.. it works... and the user doesn't know any different.. but i'd like something more efficient if anyone has any ideas.