Simple drop-down "list" items (inside a html "body") --- content (un)hiding upon click --- Not a navigation bar, no redirect, no menu, no forms

Question

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:

1. >click to unfold< List item 1
2. >click to unfold< List item 2
3. >click to unfold< ...

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

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

The text I have put between ">"..."<", 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.

Answer 1

I think you can acheive what you want with the https://www.drupal.org/project/field_group module. Enable to module and go to you content type, add the different groups you want to collapse/expand and add one or more fields inside.

You can change how you want to users to see the fields groups.

Answer 2

Another possibility just for the record (more intermediate approach) would be to organize the collapsible content into nodes, then use Views in order to present the relevant nodes in a page.

Then you can either:

• Use a module such as Views Accordion
• or theme the view to facilitate collapse.js

so that the views rows be collapsible.

Answer 3

@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]:

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

    <ol id="toggler">
    <li>List tem 1.</li>
    <div>Content of list item 1.</div>
    <li>List item 2.</li>
    <div>Content of list item 2.</div>
    </ol>

---

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