add option for dropdown accordion info for team members

Erik2609 · Erik2609 · commit 352944abf3eb · 2025-08-22T15:21:21.000+02:00
diff --git a/content/english/about/teams.md b/content/english/about/teams.md
@@ -1,8 +1,24 @@
 ---
 title: Teams
 subtitle: >
-  Algorithm Audit consists of an executive team and a collection of multidisciplinary experts that contribute to projects on a part-time basis.
+  Algorithm Audit consists of an executive team and a collection of
+  multidisciplinary experts that contribute to projects on a part-time basis.
 image: /images/svg-illustrations/about.svg
+quick_navigation:
+  title: Overview
+  links:
+    - title: Core activities
+      url: "#about"
+    - title: Executive team
+      url: "#executive-team"
+    - title: Legal experts
+      url: "#team-legal"
+    - title: Team LLMs
+      url: "#team-LLMs"
+    - title: Team unsupervised bias detection
+      url: "#team-BDT"
+    - title: Team synthetic data generation
+      url: "#team-SDG"
 about_AA:
   title: Core activities
   content: >-
@@ -16,9 +32,9 @@ about_AA:
       image: /images/about/knowledge-platform.svg
       content: >
         Bringing together experts and knowledge to foster the collective
-        learning process on the responsible use of algorithms, see our
-        [white papers](/knowledge-platform/knowledge-base/) and
-        [public standards](/knowledge-platform/knowledge-base/).
+        learning process on the responsible use of algorithms, see our [white
+        papers](/knowledge-platform/knowledge-base/) and [public
+        standards](/knowledge-platform/knowledge-base/).
     - subtitle: Normative advice commissions
       image: /images/about/commission.svg
       content: >
@@ -29,122 +45,127 @@ about_AA:
       image: /images/about/technical-tools.svg
       content: >
         Implementing and testing technical tools to detect and mitigate bias,
-        e.g., sociotechnical evaluation of generative AI, [unsupervised bias detection](/technical-tools/bdt/) and [synthetic data generation](/technical-tools/sdg/).
+        e.g., sociotechnical evaluation of generative AI, [unsupervised bias
+        detection](/technical-tools/bdt/) and [synthetic data
+        generation](/technical-tools/sdg/).
     - subtitle: Project work
       image: /images/about/project.svg
       content: >
-        [Supporting](/knowledge-platform/project-work/) public and private sector
-        organisations with specific questions regarding responsible use of AI, from a not-for-profit perspective.
+        [Supporting](/knowledge-platform/project-work/) public and private
+        sector organisations with specific questions regarding responsible use
+        of AI, from a not-for-profit perspective.
 team:
-  - id: team-SDG
-    title: Team synthetic data generation
+  - title: Team synthetic data generation
     content: Part-time team working on synthetic data generation tool
     icon: fas fa-table
     button_text: More about the tool
+    id: team-SDG
     button_link: /technical-tools/sdg/
     team_members:
       - image: /images/people/EMenvouta.jpeg
         name: Emmanuel Menvouta PhD
         bio: |
           Freelance machine learning engineer, specialized in SDG methodology
+        accordion_content: ""
       - image: /images/people/MLisdonk.png
         name: Maikel van de Lisdonk
         bio: |
           Freelance software developer
+        accordion_content: ""
       - image: /images/people/RLangius.jpg
         name: Ruben Langius
         bio: |
           Freelance software developer
-  - id: team-BDT
-    title: Team unsupervised bias detection
+        accordion_content: ""
+  - title: Team unsupervised bias detection
     content: Part-time team working on unsupervised the bias detection tool
     icon: fas fa-search
     button_text: More about the tool
+    id: team-BDT
     button_link: /technical-tools/bdt/
     team_members:
       - image: /images/people/KPadh.jpeg
         name: Kirtan Padh
         bio: |
           PhD-candidate Causal Inference and Machine Learning, TU München
+        accordion_content: ""
       - image: /images/people/MJorgensen.jpeg
         name: Mackenzie Jorgensen
         bio: |
           PhD-candidate Computer Science, King’s College London
+        accordion_content: ""
       - image: /images/people/KProrokovic.jpeg
         name: Krsto Proroković
         bio: |
           PhD-candidate, Swiss AI Lab IDSIA
+        accordion_content: ""
       - image: /images/people/FHolstege.jpeg
         name: Floris Holstege
         bio: |
           PhD-candidate Machine Learning, University of Amsterdam
+        accordion_content: ""
       - image: /images/people/JPersson.jpeg
         name: Joel Persson PhD
         bio: |
           Research Scientist, Spotify
-  - id: team-LLMs
-    title: Team Large Language Models (LLMs)
-    content: Part-time team working on socio-technical evaluation of Large Language Models
+        accordion_content: ""
+  - title: Team Large Language Models (LLMs)
+    content: >-
+      Part-time team working on socio-technical evaluation of Large Language
+      Models
     icon: fas fa-robot
     button_text: More about our evaluations
+    id: team-LLMs
     button_link: /knowledge-platform/project-work/#LLM-validation
     team_members:
       - image: /images/people/JChristoph.png
         name: Joël Christoph
         bio: |
           PhD-candidate European University Institute
+        accordion_content: ""
       - image: /images/people/TvanOsch.jpg
         name: Thomas van Osch
         bio: |
           ML engineer
+        accordion_content: ""
       - image: /images/people/TDriessen.jpg
         name: Tom Driessen
         bio: |
           PhD-candidate Cognitive Robotics, TU Delft
-  - id: team-legal
-    title: Legal experts
+        accordion_content: ""
+  - title: Legal experts
     content: Part-time team working on human rights and data privacy challenges
     icon: fas fa-search
+    id: team-legal
     team_members:
       - image: /images/people/IPapageorgiou.jpg
         name: Ioanna Papageorgiou
         bio: |
           Doctoral researcher AI Fairness & Privacy, University of Hannover
+        accordion_content: ""
       - image: /images/people/LNaudts.jpg
         name: Laurens Naudts
-        bio: |
-          Postdoctoral researcher AI, Media and Democracy Lab, University of Amsterdam
-  - id: executive-team
-    title: Executive team
+        bio: >
+          Postdoctoral researcher AI, Media and Democracy Lab, University of
+          Amsterdam
+        accordion_content: ""
+  - title: Executive team
     content: Full-time team coordinating the different activities of Algorithm Audit
     icon: fas fa-users
+    id: executive-team
     team_members:
       - image: /images/people/JParie.jpg
         name: Jurriaan Parie
         bio: |
           Director-board member
+        linkedIn: "https://www.linkedin.com/in/jfparie/"
       - image: /images/people/YRemmits.jpg
         name: Ylja Remmits
         bio: |
           Head of Projects
-quick_navigation:
-  title: Overview
-  links:
-    - title: Core activities
-      url: "#about"
-    - title: Executive team
-      url: "#executive-team"
-    - title: Legal experts
-      url: "#team-legal"
-    - title: Team LLMs
-      url: "#team-LLMs"
-    - title: Team unsupervised bias detection
-      url: "#team-BDT"
-    - title: Team synthetic data generation
-      url: "#team-SDG"
 ---
 
-{{< about_AA id="about" >}}
+{{< about_AA >}}
 
 {{< team index="4" >}}
 
@@ -154,4 +175,4 @@ quick_navigation:
 
 {{< team index="1" >}}
 
-{{< team  index="0" >}}
+{{< team index="0" >}}
diff --git a/layouts/shortcodes/team.html b/layouts/shortcodes/team.html
@@ -1,15 +1,14 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
 {{$param := int (.Get "index")}}
 {{ with index .Page.Params.team $param }}
-<!-- desktop version -->
-<div class="container-fluid mt-5 desktop p-0">
+<div class="container-fluid mt-5 p-0">
   <div class="shadow mobile-desktop-container-layout border-bottom-gradient rounded-lg" id={{.id }}>
 
     {{ if .icon }}
     <!-- Title and icon -->
     <h3 class="">
-    <span class="{{ .icon }} icon mb-4 pl-5"></span>
-    {{ .title | markdownify }}
+      <span class="{{ .icon }} icon mb-4 pl-5"></span>
+      {{ .title | markdownify }}
     </h3>
 
     {{ else }}
@@ -23,16 +22,42 @@ <h3 class="pl-3">{{ .title | markdownify }}
     <div class="container-team mt-4">
       <p>{{ .content | markdownify }}</p>
       <div class="row">
-        {{ range .team_members }}    
-        <div class="col-md-6 team-member p-3">
-          <div class="row">
-            <div class="col-md-3">
+        {{ range .team_members }}
+        {{ if .accordion_id}}
+        <script>
+          docReady(function () {
+            new Accordion('#accordion_area_team_{{.accordion_id}}');
+          });
+        </script>
+        {{ end }}
+        <div class="col-md-6 col-12 team-member p-3 " id="accordion_area_team_{{.accordion_id}}">
+          <div class="row {{if .accordion_content}}ac{{end}}" style="border:none;">
+            <div class="col-3">
               <img src="{{ .image | relURL }}" width="100%;" style="border-radius: 20px;">
             </div>
-            <div class="col-md-9 member-details">
-              <h4 style="font-weight:100;">{{ .name | markdownify }}</h4>
-              <p>{{ .bio | markdownify }}</p>
+            <div class="col-9 member-details pb-0 p-1 {{if .accordion_content}}ac-header{{end}}" >
+              <div class="{{if .accordion_content}}ac-trigger{{end}} p-1">
+                <h4 style="font-weight:100;">{{ .name | markdownify }}</h4>
+                <p>{{ .bio | markdownify }}</p>
+              </div>
+            </div>
+            {{ if .linkedIn }}
+            <div class="col-3"></div>
+            <div class="col-9 p-1 pt-0 pb-3 pl-2" style="margin-top: -30px;">
+              <a href="{{ .linkedIn }}" target="_blank"><span class="fab fa-linkedin" style="font-size: 30px;"></span></a>
+            </div>
+            {{ end }}
+            {{ if .accordion_content }}
+            <div class="ac-panel w-100">
+              <div class="row justify-content-between ac-text p-0">
+                <div class="col-3">
+                </div>
+                <div class="col-9 py-4 px-5" style="background-color:#eef2f6;">
+                  <p>{{ .accordion_content | markdownify }}</p>
+                </div>
+              </div>
             </div>
+            {{ end }}
           </div>
         </div>
         {{ end }}
@@ -42,11 +67,10 @@ <h4 style="font-weight:100;">{{ .name | markdownify }}</h4>
     <!-- button -->
     {{ if .button_text }}
     <div class="row mt-4 pb-3 justify-content-center d-flex">
-    <a href="{{.button_link}}"><label class="btn">{{.button_text}}</label></a>
+      <a href="{{.button_link}}"><label class="btn">{{.button_text}}</label></a>
     </div>
     {{ end }}
 
   </div>
 </div>
-{{ end }}
-<!-- /desktop version -->
+{{ end }}
diff --git a/tina/collections/shared/page/building_blocks.ts b/tina/collections/shared/page/building_blocks.ts
@@ -595,7 +595,6 @@ const building_blocks: TinaField[] = [
         type: "string",
         name: "button_text",
         label: "Button text",
-        required: true,
       },
       {
         type: "string",
@@ -608,7 +607,6 @@ const building_blocks: TinaField[] = [
         type: "string",
         name: "button_link",
         label: "Button link",
-        required: true,
       },
       {
         type: "object",
@@ -637,7 +635,25 @@ const building_blocks: TinaField[] = [
             type: "rich-text",
             name: "bio",
             label: "Bio",
-            isBody: false,
+          },
+          {
+            type: "string",
+            name: "linkedIn",
+            label: "LinkedIn",
+          },
+          {
+            type: "rich-text",
+            name: "accordion_content",
+            label: "Accordion Content",
+            description:
+              "If this field is filled, an accordion will be created to show more information",
+          },
+          {
+            type: "string",
+            name: "accordion_id",
+            label: "Accordion ID",
+            description:
+              "Unique identifier needed to make the accordion work, e.g. use the person's name without spaces and include the team section in it, e.g. coreTeamJohnDoe",
           },
         ],
       },
diff --git a/tina/tina-lock.json b/tina/tina-lock.json
