fold people

_includes/alumni.html

-<div class="people">
-{% for person in include.people %}
-  <div class="row">
-    <div class="col-sm-1" >
-      <a href="{{ person.url }}" >{% include person-photo-small.html %}</a>
-    </div>
-    <div class="col-sm-11">
-      <a href="{{ person.url }}" class="h6" style="color:black;font-weight:bold;">{{ person.firstname }} {{ person.lastname }}</a>
-      {{ person.content | remove: '<p>' | remove: '</p>' }}
+<div class="people panel">
+
+  {% assign grouped_people = include.people | group_by: 'position' | sort: 'name' %}
+  {% for group in grouped_people %}
+  {% assign position = group.name %}
+  {% assign id = group.name | replace:' ','-' %}
+  <div class="panel-heading">
+    <h6 class="panel-title">
+      <a data-toggle="collapse" href="#{{id}}" style="color:black">{{position}} ↯</a>
+    </h6>
+  </div>
+
+  <div id="{{id}}" class="panel-collapse collapse">
+    {% for person in group.items %}
+    <div class="row">
+      <div class="col-sm-1" >
+        <a href="{{ person.url }}" >{% include person-photo-small.html %}</a>
+      </div>
+      <div class="col-sm-11">
+        <a href="{{ person.url }}" class="h6" style="color:black;font-weight:bold;">{{ person.firstname }} {{ person.lastname }}</a>
+        {{ person.content | remove: '<p>' | remove: '</p>' }}
+      </div>
     </div>
+    {% endfor %}
   </div>
-{% endfor %}
+  {% endfor %}
 </div>

_people/naudziuniene.md

 ---
 firstname: Daiva
 lastname: Naudžiūnienė
-position: PhD Student
+position: PhD Student   
 webpage: http://www.doc.ic.ac.uk/~dn911/
 email: d.naudziuniene11@imperial.ac.uk
 alumnus: true

[Thomas Wood]

Can we avoid using collapsible panels please? It'll make the site harder to navigate on phones. (And I think they're really non-intuitive, given that this is part of the page's main content).