Simple drop-down "list" items (inside a html "body") --- content (un)hiding upon click --- Not a navigation bar, no redirect, no menu, no forms I would like to ask if it were possible to have certain content (nothing too special, just regular lines of text with standard formatting) on a html article, like e.g. ordered in a list, which can be unfolded (or hidden again) by a mouse-click?

When searching information on this, I easily come by navigation drop-down menu's; but a navigation side-bar or top-bar is not what I am looking for.
I have found another question asking for something similar, but wanting to be redericted to another page (similar to a navigation menu), that is also not what I want to do: I do not want to navigate to another page.

I would simply like a drop-down "list" inside a html's "body" article. The visitor should be able to open or close these "frames" or "list items", e.g. by clicking on the title or on a list button. I am just looking for a "1-level-depth" list.

It would be nice if the items had a title and a number, ordered vertically, like a regular ordered list:


>click to unfold&lt; List item 1
>click to unfold&lt; List item 2
>click to unfold&lt; ...


If, for example you would click on list item 1, the content of list item 1 would show:


>clicked, click to hide content again&lt; List item 1 
&lt;&lt;&lt; Content of list item 1, which is just standard lines of text, perhaps with standart formatting. >>>
>click to (un)fold&lt; List item 2
>click to (un)fold&lt; ...


The text I have put between ">"..."&lt;", is just to clarify; isn't specifically needed. This could just be a triangular list bullet for example, which could just change by pointing downwards when clicked.

Is this possible by using a Drupal module, or perhaps just via html code?

Any help on this would be greatly appreciated,

Vincent Verheyen.

P.S.: I am very new to Drupal and understand the basics such as installing modules.
@Wtower's help above makes this pretty straightforward. Drupal (I am using 7) can use these jQuery codes without any additional install.

One can just put the following right inside a drupal "node", such as a standard article. This solution works for list items; the following is to be implemented [I used ordered lists (ol) in my example]:

&lt;style&gt;#toggler li:hover {text-decoration: underline; cursor: default}&lt;/style&gt;
&lt;script type="text/javascript"&gt;jQuery(document).ready(function(){jQuery("#toggler li").click(function(){jQuery(this).next().slideToggle("slow"); return false;}).next().hide();});&lt;/script&gt;

    &lt;ol id="toggler"&gt;
    &lt;li&gt;List tem 1.&lt;/li&gt;
    &lt;div&gt;Content of list item 1.&lt;/div&gt;
    &lt;li&gt;List item 2.&lt;/li&gt;
    &lt;div&gt;Content of list item 2.&lt;/div&gt;
    &lt;/ol&gt;




I haven't looked at triangular (changing upon revealing or hiding content) list bullets yet.

If you want other items than list items, look here:


http://renaudjoubert.com/fr/node/56
http://triq.net/articles/hide-and-slide-drupal-content-jquery