From 703ea6ea68bcb53b56ec616dac22071364ef0f82 Mon Sep 17 00:00:00 2001
From: Rincy Mathew <rmathew@tamu.edu>
Date: Thu, 29 Jan 2026 10:31:22 -0600
Subject: [PATCH] Expand collapse feature working for Organization research
 section

---
 src/app/+display/display.component.html |  2 +-
 src/app/+display/display.component.ts   | 26 ++++++++++++++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/app/+display/display.component.html b/src/app/+display/display.component.html
index 73b9ae3a..a0ae94a3 100644
--- a/src/app/+display/display.component.html
+++ b/src/app/+display/display.component.html
@@ -16,7 +16,7 @@
       <div [ngClass]="{ 'col-lg-9': showAside(displayView, individual), 'col-lg-12': !showAside(displayView, individual) }">
         <div class="row mt-2">
           <div *ngIf="showLeftScan(displayView)" class="col-md-{{ getLeftScanColSize(displayView) }}" [innerHtml]="displayView.leftScanTemplateFunction(individual) | safeHtml"></div>
-          <div *ngIf="showMainContent(displayView)" class="col-md-{{ getMainContentColSize(displayView) }}" [innerHtml]="displayView.mainContentTemplateFunction(individual) | safeHtml"></div>
+          <div #mainContent *ngIf="showMainContent(displayView)" class="col-md-{{ getMainContentColSize(displayView) }}" [innerHtml]="displayView.mainContentTemplateFunction(individual) | safeHtml"></div>
           <div *ngIf="showRightScan(displayView)" class="col-md-{{ getRightScanColSize(displayView) }}" [innerHtml]="displayView.rightScanTemplateFunction(individual) | safeHtml"></div>
         </div>
         <div class="row mt-4 mb-4">
diff --git a/src/app/+display/display.component.ts b/src/app/+display/display.component.ts
index 4d9246e7..9c479452 100644
--- a/src/app/+display/display.component.ts
+++ b/src/app/+display/display.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
 import { MetaDefinition } from '@angular/platform-browser';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Store, select } from '@ngrx/store';
@@ -334,4 +334,28 @@ export class DisplayComponent implements OnDestroy, OnInit {
     return metaTags;
   }
 
+  @HostListener('click', ['$event'])
+  public onMainContentClick(event: MouseEvent): void {
+    const target = event.target as HTMLElement;
+
+    if (!target) return;
+
+    const toggleBtn = target.closest<HTMLButtonElement>('.toggle-btn');
+
+    if (!toggleBtn) return;
+
+    const container = toggleBtn.closest('.research-areas') as HTMLElement;
+
+    if (!container) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    const nextState = !(container.getAttribute('data-expanded') === 'true');
+
+    container.setAttribute('data-expanded', String(nextState));
+    toggleBtn.textContent = nextState ? 'Show less' : 'Show more';
+    toggleBtn.setAttribute('aria-expanded', String(nextState));
+  }
+
 }