Collapsable, grouped field in View (Bootstrap, D8)

Question

I am setting up a view in Drupal 8, but am stuck on a problem. I'm using a table view, where some of the fields are grouped. These fields can have from 0 to maany values. Therefore, I would like to "collapse" them, showing only the first value unless you click to show them all.

I found a javascript that seemed to be just what I wanted ( https://jsfiddle.net/z0qvv7tk/11/ ), however, I can't seem to be able to utilize it. I loaded the script in and tried several things to get add the ul class to my list, including:

• Editing the tpl-files for view, both under my theme and on views directly. In hindsight I suspect I was editing the list-style view, and not the list for the fields in one of my attempts.
• Rewriting the fields - this also didn't yield any results since the field is grouped.
• Adding css-classes to the field - of course this didn't work, since I need to add it to the list, not the item.

I am using lists to show the grouped fields. The view can be found here. The field in question at the moment is the field for members, but I would like the same effect for some of the others eventually.

Since I couldn't get the script working, I started looking for modules. I tried Views Accordion, Views Fieldset, Views fieldsets among other, with none of them working as I intended.

After this I discovered that Bootstrap has various collapsable options, and I tried rewriting/editing the .tpl again - with no luck.

Can any one help me in the right direction? As long as it is collapsible, preferably showing the first value, I am open to any solution.

Answer 1

I solved it using Bootstrap. I hid the field, then added it one more time. Then I rewrote the second field like this:

<a href="#{{ nid }}" class="btn btn-info" data-toggle="collapse">
Show members</a>
<div id="{{ nid }}" class="collapse">
{{ field_research_group_ext_members }}
{{ field_connected_user_names }}
</div>