diff --git a/docs/task-details.component.md b/docs/task-details.component.md
index ce24f6534f..1bc57e9430 100644
--- a/docs/task-details.component.md
+++ b/docs/task-details.component.md
@@ -37,6 +37,7 @@ Shows the details of the task id passed in input
 | showFormCompleteButton | boolean | true | Toggle rendering of the Form `Complete` outcome button |
 | peopleIconImageUrl | string | | Define a custom people icon image |
 | showHeader | boolean | true | Toggle task details Header component |
+| showHeaderContent | boolean | true | Toggle collapsed/expanded state of the Header component |
 | showInvolvePeople | boolean | true | Toggle `Involve People` feature for Header component |
 | showComments | boolean | true | Toggle `Comments` feature for Header component |
 | showChecklist | boolean | true | Toggle `Checklist` feature for Header component |
diff --git a/lib/process-services/task-list/components/task-details.component.html b/lib/process-services/task-list/components/task-details.component.html
index d16f172153..0b26e70845 100644
--- a/lib/process-services/task-list/components/task-details.component.html
+++ b/lib/process-services/task-list/components/task-details.component.html
@@ -50,7 +50,7 @@
             </button>
         </div>
         <div class="adf-task-details-core-sidebar">
-            <adf-info-drawer title="{{ 'ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TITLE' | translate }}" class="adf-task-details-core-sidebar-drawer">
+            <adf-info-drawer *ngIf="showHeaderContent" title="{{ 'ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TITLE' | translate }}" class="adf-task-details-core-sidebar-drawer">
                 <adf-info-drawer-tab label="{{ 'ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TAB_DETAILS_TITLE' | translate }}">
                     <div class="assignment-container" *ngIf="showAssignee">
                         <adf-people-search
@@ -91,7 +91,7 @@
 
             </adf-info-drawer>
 
-            <div class="adf-task-details-core-sidebar-checklist">
+            <div *ngIf="showHeaderContent" class="adf-task-details-core-sidebar-checklist">
                 <div *ngIf="showChecklist">
                     <adf-checklist #activitichecklist
                                    [readOnly]="readOnlyForm"
diff --git a/lib/process-services/task-list/components/task-details.component.spec.ts b/lib/process-services/task-list/components/task-details.component.spec.ts
index efb2295496..6b3e2972f9 100644
--- a/lib/process-services/task-list/components/task-details.component.spec.ts
+++ b/lib/process-services/task-list/components/task-details.component.spec.ts
@@ -278,6 +278,7 @@ describe('TaskDetailsComponent', () => {
 
         it('should comments be readonly if the task is complete and no user are involved', () => {
             component.showComments = true;
+            component.showHeaderContent = true;
             component.ngOnChanges({'taskId': new SimpleChange('123', '456', true)});
             component.taskPeople = [];
             component.taskDetails = new TaskDetailsModel(taskDetailsMock);
@@ -289,6 +290,7 @@ describe('TaskDetailsComponent', () => {
 
         it('should comments be readonly if the task is complete and user are NOT involved', () => {
             component.showComments = true;
+            component.showHeaderContent = true;
             component.ngOnChanges({'taskId': new SimpleChange('123', '456', true)});
             component.taskPeople = [];
             component.taskDetails = new TaskDetailsModel(taskDetailsMock);
@@ -300,6 +302,7 @@ describe('TaskDetailsComponent', () => {
 
         it('should comments NOT be readonly if the task is NOT complete and user are NOT involved', () => {
             component.showComments = true;
+            component.showHeaderContent = true;
             component.ngOnChanges({'taskId': new SimpleChange('123', '456', true)});
             component.taskPeople = [fakeUser];
             component.taskDetails = new TaskDetailsModel(taskDetailsMock);
@@ -311,6 +314,7 @@ describe('TaskDetailsComponent', () => {
 
         it('should comments NOT be readonly if the task is complete and user are involved', () => {
             component.showComments = true;
+            component.showHeaderContent = true;
             component.ngOnChanges({'taskId': new SimpleChange('123', '456', true)});
             component.taskPeople = [fakeUser];
             component.taskDetails = new TaskDetailsModel(taskDetailsMock);
@@ -322,6 +326,7 @@ describe('TaskDetailsComponent', () => {
 
         it('should comments be present if showComments is true', () => {
             component.showComments = true;
+            component.showHeaderContent = true;
             component.ngOnChanges({'taskId': new SimpleChange('123', '456', true)});
             component.taskPeople = [];
             component.taskDetails = new TaskDetailsModel(taskDetailsMock);
diff --git a/lib/process-services/task-list/components/task-details.component.ts b/lib/process-services/task-list/components/task-details.component.ts
index 6b9b05c019..414838adfa 100644
--- a/lib/process-services/task-list/components/task-details.component.ts
+++ b/lib/process-services/task-list/components/task-details.component.ts
@@ -67,6 +67,9 @@ export class TaskDetailsComponent implements OnInit, OnChanges {
     @Input()
     showHeader: boolean = true;
 
+    @Input()
+    showHeaderContent: boolean = true;
+
     @Input()
     showInvolvePeople: boolean = true;
 
@@ -320,6 +323,10 @@ export class TaskDetailsComponent implements OnInit, OnChanges {
         this.loadDetails(taskId);
     }
 
+    toggleHeaderContent(): void {
+        this.showHeaderContent = !this.showHeaderContent;
+    }
+
     isCompletedTask(): boolean {
         return this.taskDetails && this.taskDetails.endDate ? true : undefined;
     }