1

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.

  • Hi and welcome to Drupal Answers. This appears to be more like a jQuery issue to me. Take a look at stackoverflow.com/questions/24701915/… – Wtower Jan 9 '15 at 13:54
  • Ok, thanks a lot @Wtower. Is it easy to implement this into a Drupal html article? Can I just the jQuery codes over there, or should I use some kind of a module? --- I will look definitely into jQuery, it seems like a very good trail. – Vincent Mia Edie Verheyen Jan 9 '15 at 13:58
  • I am glad. This question is not Drupal per se, jQuery is a common and powerful JS library which is included within Drupal as you probably already figured out. – Wtower Jan 9 '15 at 15:15
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.

| improve this answer | |
  • Thanks a lot @Maarten! This seems very interesting. However, I am not completely sure yet how to use this. Might I ask you very friendly for some more clarification? --- Field group-module is installed. My content type (or node) is called [Article]. --- In Drupal's (Structure)->(Content types)->[Article]->(Manage fields); I can notice the "Add new field" option. Should I use this, and how? – Vincent Mia Edie Verheyen Jan 9 '15 at 15:14
  • @VincentVerheyen this is a nice approach, it would require to organize content into fields, which might be better depending on the requirements. – Wtower Jan 9 '15 at 15:18
  • 1
    When the field group module is installed and enabled, you should be able to add groups. This video explains it very well youtu.be/5GU_tb4K-f4. At 1m57 it starts where you are youtu.be/5GU_tb4K-f4?t=1m57s. If you don't see the add group, something went wrong when installing the module and you should re-install it. – Maarten De Block Jan 10 '15 at 9:11
1

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:

so that the views rows be collapsible.

| improve this answer | |
1

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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.