Extensible In-Line Help Code

[Oralloy]

Folks,

Sorry if this question is a little vague. I'm trying to improve on what looks to be a painful code methodology.

In short, I have a web application where I'm trying to embed help bits as part of the prompts for various form fields.

Basically I want to implement a "more/less" toggle, something like the code I have posted below.

Since the fields are built into the forms dynamically, I'm not sure how to identify HTML segments, except by using distinct identifiers. If there is a shorter, easier way, I'm all eyes. I am really getting tired of having to change names in six places each time I add help text to a field.

Anyway - the following is an example of what I have. Is there a better way to do this?

<script type='text/javascript'>
{
  function help_LL_Affected_Lifecycle_Phases()
  {
    var help = document.getElementById('help_LL_Affected_Lifecycle_Phases');
    var tag = document.getElementById('tag_LL_Affected_Lifecycle_Phases');
    if (help.style.display == 'none') {
      help.style.display = '';
      tag.innerHTML = 'less';
    } else {
      help.style.display='none';
      tag.innerHTML = 'more';
    }
  }
}
</script>
All project lifecycle phases affected by the lesson.&nbsp;&nbsp;<a href='#' onclick='help_LL_Affected_Lifecycle_Phases(); return false;'><strong id='tag_LL_Affected_Lifecycle_Phases'>more</strong></a>
<div id='help_LL_Affected_Lifecycle_Phases' style='display:none'>
<ul><li>Select all of the lifecycle phases, which are affected by this lesson.
<li>Example: <strong>Preliminary Design</strong></ul>
</div>

Thanks,
Oralloy

[RamananKalirajan]

You can use title attribute also. It is shown like a tool tip.

ex:

<html>
<body>
 <div>
  This is the passage about the growing problem in human life. One of the major problem is <b><span style="cursor:pointer;" title="Complexity is a problem which affects the attitude of a person">complexity</span></b>
 </div>
</body>
</html>

Thanks and Regards
Ramanan Kalirajan

[Oralloy]

Ramanan,

This is what I've converged on:

<!--works-->
All project lifecycle phases affected by the lesson.&nbsp;&nbsp;
<div id='tagg_LL_Affected_Lifecycle_Phases'>(more)</div> 
<div id='help_LL_Affected_Lifecycle_Phases'>
 <ul><li>Select all of the lifecycle phases, which are affected by this lesson.
 <li>Example: <strong>Preliminary Design</strong></ul>
</div>
<script type='text/javascript'> 
 tagg = document.getElementById('tagg_LL_Affected_Lifecycle_Phases'); 

 tagg.help = document.getElementById('help_LL_Affected_Lifecycle_Phases'); 
 tagg.help.style.display = 'none';
 tagg.stat = 0;
 tagg.style.color = 'blue';
 tagg.style.fontWeight = 'bold';

 tagg.onclick = function() {
  if (this.stat == 0) {
   this.help.style.display = '';
   this.innerHTML = '(less)';
   this.stat = 1;
  } else {
   this.help.style.display='none';
   this.innerHTML = '(more)';
   this.stat = 0;
  }
  return false;
 }

 tagg.onmouseover = function() {
  this.style.cursor='help';
 }
</script>

Have you got any addititional suggestions on how to make it cleaner?