Navigation: Cursor =>

A problem in online communication we just have to live with is, your text will always be displayed on a rather small screen. Still, you want to give the reader a broad picture right on first glance, to be detailed later. A Dynamic List is a good tool to do that.

A professional communicator knows: If the subject to present is just too complex to give any meaningful information in a few sentences, there is no point in overwhelming the reader. He/she would just feel repelled; or only skim the text, just to be able to say: "I have read it!". Instead, it is more useful to structure the whole bunch to a number of major topics. Each one in turn is broken down into minor sections. Finally, each section should be broken down again, ideally to points of one or two sentences.

Then however, you have the problem that the reader might feel crushed at first glance and tends to avoid reading it altogether. In order to prevent that, it would be good to present only the titles of the major topics at first, making it look pretty simple. And to leave it to the readers to get more detailed information when they click at certain places.

That's what a Dynamic List does.

In fact, that's the major difference of online communication, compared to text printed on paper. On paper, all you can do is to present "everything" at once and to expect of the reader to find what is relevant in the current situation. And to hope that he/she will not be too intimidated to start reading in the first place.

How to implement a Dynamic List?

Dynamic List: Anchor to click +  <DIV> & #133;  </DIV>

A Dynamic List comprises three things:

1. An anchor representing the place where to click for opening the list.
2. A  <DIV> … </DIV>  structure with option  STYLE="display:none"  Between the  <DIV>  tags there can be any HTML-code.
3. A JavaScript function needed to open/close the list

The anchor and the  <DIV> … </DIV>  structure are usually close together:

… title … <A HREF="#" ONCLICK="return Toggle(struct)">… list indicator … </A>

<DIV ID="struct" STYLE="display:none">
<UL>
	<LI> … item 1 … </LI>
	<LI> … item 2 … </LI>
			:
</UL>
</DIV>

First, when the document comes up on screen, the readers see only the  … title …  line. When they click on the … list indicator … , the display of the  <DIV>  is toggled. If it was not displayed before, its contents appear now right beneath the … title … line. All the following text is moved down to clear the space needed to display the  <DIV> . If it was displayed before, its contents disappear now, the following text is moved up until the gap is covered.

JavaScript Function to Toggle a DIV's 'display'

You will have noticed, the anchor just links to a pseudo-HREF ("#"). When the readers click on the  … list indicator … , the action is done by the option ONCLICK="return Toggle(struct)". The function  Toggle(struct)  is implemented in JavaScript as you can see in the following:

<SCRIPT LANGUAGE="javascript">
<!--
function Toggle (obj)
{
  if (obj.style.display == "") obj.style.display = "none";
		          else obj.style.display= "";
  return false;
}
-->
</SCRIPT>

When the function is called with a DIV's id as parameter, the id is taken as a handle to an object whose  display  property is set to  none  if it was empty before, or emptied if it was  none  before. In either case,  false  is returned to let the pseudo-link know that the default action (i.e. jumping to the top of document) should not be performed.

Things to Keep in Mind when Using a Dynamic List

A Dynamic List can have any number of items. An item can have any length. Sensibly it should be one line only. If needed, however, lines are automatically word-wrapped at the right DIV-border or at the right screen edge (if  STYLE="WIDTH:…"  undefined). Hard line breaks can be achieved by tag  <BR>  .

If you have more than one Dynamic List (or a Hierarchical Dynamic List) in your document, they all should have different id's. To be sure, open all of them once you are finished with composing them. If you get an error message then, it's probably due to identical identifiers in different Dynamic Lists.

If you provide a link to an external destination from an item in a Dynamic List, be aware that the List will be closed when the reader returns from the external document. When clicking on an internal link, however, the List will still be open when returning.

So, if the link is deep down in a multi-level Dynamic List, it might be annoying to the reader to have to open it all over again, after returning. If you want to avoid that, open the external document in a separate browser window by adding to the link:

Sample of a Dynamic List

A typical use of a Dynamic List is to present a bulleted list, e.g. of examples to a general assertion. That's done like this:

<LI>… assertion … (<A HREF="#" ONCLICK="return Toggle(list)">examples</A>)</LI>
<DIV ID="list"STYLE="display:none">
     <UL>
	<LI>example 1</LI>
	<LI>example 2</LI>
	<LI>   :</LI>
     </UL>
</DIV>

When the text comes up on screen, at first the readers see only one line (indicated by  … assertion …  and an apparent link (examples) appended. If they are interested in examples, clicking the link opens up at list like the following right beneath the first line:

  example 1  
  example 2  
      :

Hierarchical Dynamic List

Remember, the contents of the  <DIV> … </DIV>  making up the Dynamic List can be any HTML-code. In particular, it can in turn be another Dynamic List. The coding scheme of a 2-level Dynamic List is:

… title 1 … <A HREF="#" ONCLICK="return Toggle(struct1)"> … list indicator 1 … </A>

<DIV ID="struct1" STYLE="display:none">
    <UL>
	<LI> … item 11 … </LI>
	<LI> … item 12 … </LI>
	       :
    </UL>
</DIV>
… title 2 … <A HREF="#" ONCLICK="return Toggle(struct2)"> … list indicator 2 … </A>

<DIV ID="struct2" STYLE="display:none">
   <UL>
	<LI> … item 21 … </LI>
	<LI> … item 22 … </LI>
	       :
   </UL>
</DIV>

This sample would look and behave like the following. Try to click on  … list indicator 1 …  and  … list indicator 2 …  ! - The same is true for the second example.

no demo in NS-browser

In real life you can see a multi-level Dynamic List in my article "Online Communication" (Click on the keywords "questions", "Details" and "tricks"! The "Details" hold another Dynamic List.)

Be reader-friendly: Auto-scroll to new List

If you have several Dynamic Lists in your document, it's not very inviting to just open a List and to leave it the reader to scroll there until the new text is conveniently on screen. You can do better than that, simply by two things:

1. Change the last code line in function  Toggle()  from  return false;  to  return true;
2. Change the entry in  HREF=  from  #  to  #bookmark, with  bookmark  being the bookmark you placed at the point where you want to scroll to when the  list indicator  is clicked.

Now the reader will always have the list on screen, once it is opened.