diff --git a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts b/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts
index ed0283fcaac..859ab042509 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts
+++ b/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts
@@ -22,6 +22,18 @@ describe("calcite-flow-item", () => {
         propertyName: "closed",
         defaultValue: false,
       },
+      {
+        propertyName: "collapsible",
+        defaultValue: false,
+      },
+      {
+        propertyName: "collapseDirection",
+        defaultValue: "down",
+      },
+      {
+        propertyName: "collapsed",
+        defaultValue: false,
+      },
       {
         propertyName: "disabled",
         defaultValue: false,
@@ -60,6 +72,17 @@ describe("calcite-flow-item", () => {
       <calcite-button slot="${SLOTS.footerActions}">test button 2</calcite-button>
     </calcite-flow-item>
     `);
+
+    accessible(`
+    <calcite-flow-item collapsible>
+      <div slot="${SLOTS.headerActionsStart}">test start</div>
+      <div slot="${SLOTS.headerContent}">test content</div>
+      <div slot="${SLOTS.headerActionsEnd}">test end</div>
+      <p>Content</p>
+      <calcite-button slot="${SLOTS.footerActions}">test button 1</calcite-button>
+      <calcite-button slot="${SLOTS.footerActions}">test button 2</calcite-button>
+    </calcite-flow-item>
+    `);
   });
 
   describe("should focus on back button", () => {
@@ -111,6 +134,17 @@ describe("calcite-flow-item", () => {
     expect(calciteFlowItemBack).toHaveReceivedEvent();
   });
 
+  it("sets collapsible and collapsed on internal panel", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent("<calcite-flow-item collapsible collapsed></calcite-flow-item>");
+
+    const panel = await page.find(`calcite-flow-item >>> calcite-panel`);
+
+    expect(await panel.getProperty("collapsed")).toBe(true);
+    expect(await panel.getProperty("collapsible")).toBe(true);
+  });
+
   it("allows scrolling content", async () => {
     const page = await newE2EPage();
     await page.setContent(html`
@@ -161,15 +195,23 @@ describe("calcite-flow-item", () => {
     });
 
     const scrollSpy = await page.spyOnEvent("calciteFlowItemScroll");
+    const panel = await page.find("calcite-flow-item >>> calcite-panel");
+    panel.triggerEvent("calcitePanelScroll");
+    await page.waitForChanges();
 
-    await page.evaluate(() => {
-      const panel = document.querySelector("calcite-flow-item").shadowRoot.querySelector("calcite-panel");
+    expect(scrollSpy).toHaveReceivedEventTimes(1);
+  });
 
-      panel.dispatchEvent(new CustomEvent("calcitePanelScroll"));
+  it("honors calciteFlowItemToggle event", async () => {
+    const page = await newE2EPage({
+      html: "<calcite-flow-item collapsible>test</calcite-flow-item>",
     });
 
+    const toggleSpy = await page.spyOnEvent("calciteFlowItemToggle");
+    const panel = await page.find("calcite-flow-item >>> calcite-panel");
+    panel.triggerEvent("calcitePanelToggle");
     await page.waitForChanges();
 
-    expect(scrollSpy).toHaveReceivedEventTimes(1);
+    expect(toggleSpy).toHaveReceivedEventTimes(1);
   });
 });
diff --git a/packages/calcite-components/src/components/flow-item/flow-item.scss b/packages/calcite-components/src/components/flow-item/flow-item.scss
index 7130ef2ba13..867be122e5a 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.scss
+++ b/packages/calcite-components/src/components/flow-item/flow-item.scss
@@ -4,12 +4,12 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-flow-item-footer-padding: Specifies the padding of the component's footer.
+ * @prop --calcite-flow-item-header-border-block-end: Specifies the component header's block end border.
  */
 
 :host {
   @extend %component-host;
   @apply relative flex w-full flex-auto overflow-hidden;
-  --calcite-flow-item-footer-padding: theme("spacing.2");
 }
 
 @include disabled();
@@ -23,6 +23,7 @@
 
 calcite-panel {
   --calcite-panel-footer-padding: var(--calcite-flow-item-footer-padding);
+  --calcite-panel-header-border-block-end: var(--calcite-flow-item-header-border-block-end);
 }
 
 @include base-component();
diff --git a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
index 1a8b23a31a3..50a3c286c66 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
+++ b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
@@ -49,6 +49,22 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
           return this;
         },
       },
+      {
+        name: "collapsible",
+        commit(): Attribute {
+          this.value = boolean("collapsible", false);
+          delete this.build;
+          return this;
+        },
+      },
+      {
+        name: "collapsed",
+        commit(): Attribute {
+          this.value = boolean("collapsed", false);
+          delete this.build;
+          return this;
+        },
+      },
       {
         name: "height-scale",
         commit(): Attribute {
@@ -139,6 +155,10 @@ export const onlyProps = (): string => html`
   </div>
 `;
 
+export const collapsed_TestOnly = (): string => html`
+  <calcite-flow-item collapsed collapsible closable> Hello World! </calcite-flow-item>
+`;
+
 export const disabledWithStyledSlot_TestOnly = (): string => html`
   <calcite-flow-item style="height: 100%;" heading="Heading" disabled>
     <div id="content" style="height: 100%;">${contentHTML}</div>
@@ -231,3 +251,8 @@ export const footerPadding_TestOnly = (): string => html`<div style="width: 300p
     <div slot="footer">Footer!</div>
   </calcite-flow-item>
 </div>`;
+
+export const withNoHeaderBorderBlockEnd_TestOnly = (): string =>
+  html`<calcite-flow-item style="--calcite-flow-item-header-border-block-end:none;" height-scale="s" heading="My Panel"
+    >Slotted content!</calcite-flow-item
+  >`;
diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx
index fb52e56c06c..49ac20e238d 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.tsx
+++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx
@@ -69,6 +69,23 @@ export class FlowItem
   /** When `true`, the component will be hidden. */
   @Prop({ reflect: true }) closed = false;
 
+  /**
+   * When `true`, hides the component's content area.
+   */
+  @Prop({ reflect: true }) collapsed = false;
+
+  /**
+   * Specifies the direction of the collapse.
+   *
+   * @internal
+   */
+  @Prop() collapseDirection: "down" | "up" = "down";
+
+  /**
+   * When `true`, the component is collapsible.
+   */
+  @Prop({ reflect: true }) collapsible = false;
+
   /**
    * When provided, the method will be called before it is removed from its parent `calcite-flow`.
    */
@@ -180,6 +197,11 @@ export class FlowItem
    */
   @Event({ cancelable: false }) calciteFlowItemClose: EventEmitter<void>;
 
+  /**
+   * Fires when the collapse button is clicked.
+   */
+  @Event({ cancelable: false }) calciteFlowItemToggle: EventEmitter<void>;
+
   // --------------------------------------------------------------------------
   //
   //  Private Properties
@@ -209,6 +231,8 @@ export class FlowItem
 
   /**
    * Sets focus on the component.
+   *
+   * @returns promise.
    */
   @Method()
   async setFocus(): Promise<void> {
@@ -232,7 +256,8 @@ export class FlowItem
    *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
    *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
    * });
-   * @param options
+   * @param options - allows specific coordinates to be defined.
+   * @returns - promise that resolves once the content is scrolled to.
    */
   @Method()
   async scrollContentTo(options?: ScrollToOptions): Promise<void> {
@@ -255,6 +280,11 @@ export class FlowItem
     this.calciteFlowItemClose.emit();
   };
 
+  handlePanelToggle = (event: CustomEvent<void>): void => {
+    event.stopPropagation();
+    this.calciteFlowItemToggle.emit();
+  };
+
   backButtonClick = (): void => {
     this.calciteFlowItemBack.emit();
   };
@@ -300,6 +330,9 @@ export class FlowItem
 
   render(): VNode {
     const {
+      collapsed,
+      collapseDirection,
+      collapsible,
       closable,
       closed,
       description,
@@ -315,6 +348,9 @@ export class FlowItem
         <calcite-panel
           closable={closable}
           closed={closed}
+          collapseDirection={collapseDirection}
+          collapsed={collapsed}
+          collapsible={collapsible}
           description={description}
           disabled={disabled}
           heading={heading}
@@ -324,6 +360,7 @@ export class FlowItem
           messageOverrides={messages}
           onCalcitePanelClose={this.handlePanelClose}
           onCalcitePanelScroll={this.handlePanelScroll}
+          onCalcitePanelToggle={this.handlePanelToggle}
           // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
           ref={this.setContainerRef}
         >
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages.json
index 2741baa1f33..e020ca587b5 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages.json
@@ -1,4 +1,6 @@
 {
   "close": "Close",
-  "options": "Options"
+  "options": "Options",
+  "collapse": "Collapse",
+  "expand": "Expand"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ar.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ar.json
index 927875e0767..f934fc18a11 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ar.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ar.json
@@ -1,4 +1,6 @@
 {
   "close": "إغلاق",
-  "options": "خيارات"
+  "options": "خيارات",
+  "collapse": "طي",
+  "expand": "توسيع"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_bg.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_bg.json
index 8675604f7cf..67aa96c6e01 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_bg.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_bg.json
@@ -1,4 +1,6 @@
 {
   "close": "Затваряне",
-  "options": "Опции"
+  "options": "Опции",
+  "collapse": "Сгъване",
+  "expand": "Разгъване"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_bs.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_bs.json
index d19edbca26a..2c3fd67d90a 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_bs.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_bs.json
@@ -1,4 +1,6 @@
 {
   "close": "Zatvori",
-  "options": "Opcije"
+  "options": "Opcije",
+  "collapse": "Sažmi",
+  "expand": "Proširi"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ca.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ca.json
index 56193f84d3b..db6d6b25b8e 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ca.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ca.json
@@ -1,4 +1,6 @@
 {
   "close": "Tanca",
-  "options": "Opcions"
+  "options": "Opcions",
+  "collapse": "Redueix",
+  "expand": "Amplia"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_cs.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_cs.json
index 7ed6fcae2d1..c894256da4e 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_cs.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_cs.json
@@ -1,4 +1,6 @@
 {
   "close": "Zavřít",
-  "options": "Možnosti"
+  "options": "Možnosti",
+  "collapse": "Sbalit",
+  "expand": "Rozbalit"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_da.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_da.json
index 20ccca90f0c..e4b69ea5c9a 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_da.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_da.json
@@ -1,4 +1,6 @@
 {
   "close": "Luk",
-  "options": "Indstillinger"
+  "options": "Indstillinger",
+  "collapse": "Skjul",
+  "expand": "Udvid"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_de.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_de.json
index 163e7762436..c2b3ad4259e 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_de.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_de.json
@@ -1,4 +1,6 @@
 {
   "close": "Schließen",
-  "options": "Optionen"
+  "options": "Optionen",
+  "collapse": "Ausblenden",
+  "expand": "Einblenden"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_el.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_el.json
index b89fbc360c5..7cfc5b534df 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_el.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_el.json
@@ -1,4 +1,6 @@
 {
   "close": "Κλείσιμο",
-  "options": "Επιλογές"
+  "options": "Επιλογές",
+  "collapse": "Σύμπτυξη",
+  "expand": "Ανάπτυξη"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_en.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_en.json
index 2741baa1f33..e020ca587b5 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_en.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_en.json
@@ -1,4 +1,6 @@
 {
   "close": "Close",
-  "options": "Options"
+  "options": "Options",
+  "collapse": "Collapse",
+  "expand": "Expand"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_es.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_es.json
index cf45c8db18d..fb31f8f2530 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_es.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_es.json
@@ -1,4 +1,6 @@
 {
   "close": "Cerrar",
-  "options": "Opciones"
+  "options": "Opciones",
+  "collapse": "Contraer",
+  "expand": "Expandir"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_et.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_et.json
index aa790384983..0a04191d66b 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_et.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_et.json
@@ -1,4 +1,6 @@
 {
   "close": "Sule",
-  "options": "Valikud"
+  "options": "Valikud",
+  "collapse": "Ahenda",
+  "expand": "Laienda"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_fi.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_fi.json
index 35484e9972f..7e215588f55 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_fi.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_fi.json
@@ -1,4 +1,6 @@
 {
   "close": "Sulje",
-  "options": "Asetukset"
+  "options": "Asetukset",
+  "collapse": "Kutista",
+  "expand": "Laajenna"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_fr.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_fr.json
index 3afe6ce0d0b..80b07123743 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_fr.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_fr.json
@@ -1,4 +1,6 @@
 {
   "close": "Fermer",
-  "options": "Options"
+  "options": "Options",
+  "collapse": "Réduire",
+  "expand": "Développer"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_he.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_he.json
index 24684fe9985..c95abd85d88 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_he.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_he.json
@@ -1,4 +1,6 @@
 {
   "close": "סגירה",
-  "options": "אפשרויות"
+  "options": "אפשרויות",
+  "collapse": "צמצם",
+  "expand": "הרחב"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_hr.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_hr.json
index d19edbca26a..2c3fd67d90a 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_hr.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_hr.json
@@ -1,4 +1,6 @@
 {
   "close": "Zatvori",
-  "options": "Opcije"
+  "options": "Opcije",
+  "collapse": "Sažmi",
+  "expand": "Proširi"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_hu.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_hu.json
index 9f3c45526d6..6ba2eff61ac 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_hu.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_hu.json
@@ -1,4 +1,6 @@
 {
   "close": "Bezárás",
-  "options": "Beállítási lehetőségek"
+  "options": "Beállítási lehetőségek",
+  "collapse": "Összecsukás",
+  "expand": "Kibontás"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_id.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_id.json
index 7ac4f0dfa98..cbf783ff641 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_id.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_id.json
@@ -1,4 +1,6 @@
 {
   "close": "Tutup",
-  "options": "Opsi"
+  "options": "Opsi",
+  "collapse": "Tutup",
+  "expand": "Bentang"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_it.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_it.json
index b5394436393..f7fd3daba77 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_it.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_it.json
@@ -1,4 +1,6 @@
 {
   "close": "Chiudi",
-  "options": "Opzioni"
+  "options": "Opzioni",
+  "collapse": "Comprimi",
+  "expand": "Espandi"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ja.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ja.json
index 4a5d4b377bf..b137011340f 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ja.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ja.json
@@ -1,4 +1,6 @@
 {
   "close": "閉じる",
-  "options": "オプション"
+  "options": "オプション",
+  "collapse": "折りたたむ",
+  "expand": "展開"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ko.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ko.json
index 94e494110f6..39da03f94d0 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ko.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ko.json
@@ -1,4 +1,6 @@
 {
   "close": "닫기",
-  "options": "옵션"
+  "options": "옵션",
+  "collapse": "축소",
+  "expand": "확장"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_lt.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_lt.json
index b44fedd8dc9..794636a66e7 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_lt.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_lt.json
@@ -1,4 +1,6 @@
 {
   "close": "Uždaryti",
-  "options": "Parinktys"
+  "options": "Parinktys",
+  "collapse": "Suskleisti",
+  "expand": "Išskleisti"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_lv.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_lv.json
index a4519931f7d..e0aa0c301a1 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_lv.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_lv.json
@@ -1,4 +1,6 @@
 {
   "close": "Aizvērt",
-  "options": "Opcijas"
+  "options": "Opcijas",
+  "collapse": "Sakļaut",
+  "expand": "Izvērst"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_nl.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_nl.json
index f0749730c87..3add1884eb9 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_nl.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_nl.json
@@ -1,4 +1,6 @@
 {
   "close": "Sluiten",
-  "options": "Opties"
+  "options": "Opties",
+  "collapse": "Inklappen",
+  "expand": "Uitklappen"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_no.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_no.json
index 900c98c58a9..3709c0eb065 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_no.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_no.json
@@ -1,4 +1,6 @@
 {
   "close": "Lukk",
-  "options": "Alternativer"
+  "options": "Alternativer",
+  "collapse": "Skjul",
+  "expand": "Utvid"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_pl.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_pl.json
index 552e72369af..d739ac0634d 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_pl.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_pl.json
@@ -1,4 +1,6 @@
 {
   "close": "Zamknij",
-  "options": "Opcje"
+  "options": "Opcje",
+  "collapse": "Zwiń",
+  "expand": "Rozwiń"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_pt-BR.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_pt-BR.json
index 0997ea84b45..97ee5f3eab0 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_pt-BR.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_pt-BR.json
@@ -1,4 +1,6 @@
 {
   "close": "Fechar",
-  "options": "Opções"
+  "options": "Opções",
+  "collapse": "Recolher",
+  "expand": "Expandir"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_pt-PT.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_pt-PT.json
index 0997ea84b45..97ee5f3eab0 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_pt-PT.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_pt-PT.json
@@ -1,4 +1,6 @@
 {
   "close": "Fechar",
-  "options": "Opções"
+  "options": "Opções",
+  "collapse": "Recolher",
+  "expand": "Expandir"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ro.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ro.json
index dd9ac03695f..11510863ea7 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ro.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ro.json
@@ -1,4 +1,6 @@
 {
   "close": "Închidere",
-  "options": "Opţiuni"
+  "options": "Opţiuni",
+  "collapse": "Restrângere",
+  "expand": "Extindere"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ru.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ru.json
index 2bdb81508b9..135a8cc0fb6 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ru.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_ru.json
@@ -1,4 +1,6 @@
 {
   "close": "Закрыть",
-  "options": "Опции"
+  "options": "Опции",
+  "collapse": "Свернуть",
+  "expand": "Развернуть"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_sk.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_sk.json
index ed5fb7dd75f..121255260a0 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_sk.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_sk.json
@@ -1,4 +1,6 @@
 {
   "close": "Zatvoriť",
-  "options": "Možnosti"
+  "options": "Možnosti",
+  "collapse": "Zbaliť",
+  "expand": "Rozbaliť"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_sl.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_sl.json
index 2280da31188..7138d2f6014 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_sl.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_sl.json
@@ -1,4 +1,6 @@
 {
   "close": "Zapri",
-  "options": "Možnosti"
+  "options": "Možnosti",
+  "collapse": "Strni",
+  "expand": "Razširi"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_sr.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_sr.json
index d19edbca26a..9778f684f5f 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_sr.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_sr.json
@@ -1,4 +1,6 @@
 {
   "close": "Zatvori",
-  "options": "Opcije"
+  "options": "Opcije",
+  "collapse": "Skupi",
+  "expand": "Proširi"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_sv.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_sv.json
index 416661385b3..0585edc1ada 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_sv.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_sv.json
@@ -1,4 +1,6 @@
 {
   "close": "Stäng",
-  "options": "Alternativ"
+  "options": "Alternativ",
+  "collapse": "Dölj",
+  "expand": "Expandera"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_th.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_th.json
index a8f8c6996d7..52ea6452952 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_th.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_th.json
@@ -1,4 +1,6 @@
 {
   "close": "ปิด",
-  "options": "ตัวเลือก"
+  "options": "ตัวเลือก",
+  "collapse": "ย่อลงมา",
+  "expand": "ขยาย"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_tr.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_tr.json
index b21a1ef9c83..4d8a02a4cdd 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_tr.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_tr.json
@@ -1,4 +1,6 @@
 {
   "close": "Kapat",
-  "options": "Seçenekler"
+  "options": "Seçenekler",
+  "collapse": "Daralt",
+  "expand": "Genişlet"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_uk.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_uk.json
index 24e6d74014b..6bcfd3a8083 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_uk.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_uk.json
@@ -1,4 +1,6 @@
 {
   "close": "Закрити",
-  "options": "Опції"
+  "options": "Опції",
+  "collapse": "Згорнути",
+  "expand": "Розширити"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_vi.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_vi.json
index 75d7facb139..82e6b95ed9f 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_vi.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_vi.json
@@ -1,4 +1,6 @@
 {
   "close": "Đóng",
-  "options": "Tùy chọn"
+  "options": "Tùy chọn",
+  "collapse": "Thu gọn",
+  "expand": "Mở rộng"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_zh-CN.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_zh-CN.json
index 6a9999b584a..d0c7149cf82 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_zh-CN.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_zh-CN.json
@@ -1,4 +1,6 @@
 {
   "close": "关闭",
-  "options": "选项"
+  "options": "选项",
+  "collapse": "折叠",
+  "expand": "展开"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_zh-HK.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_zh-HK.json
index e2230a0c9ac..8992abb70ba 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_zh-HK.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_zh-HK.json
@@ -1,4 +1,6 @@
 {
   "close": "關閉",
-  "options": "選項"
+  "options": "選項",
+  "collapse": "摺疊",
+  "expand": "展開"
 }
diff --git a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_zh-TW.json b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_zh-TW.json
index e2230a0c9ac..8992abb70ba 100644
--- a/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_zh-TW.json
+++ b/packages/calcite-components/src/components/panel/assets/panel/t9n/messages_zh-TW.json
@@ -1,4 +1,6 @@
 {
   "close": "關閉",
-  "options": "選項"
+  "options": "選項",
+  "collapse": "摺疊",
+  "expand": "展開"
 }
diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts
index d5221bb9f9e..3367c9fdb8e 100644
--- a/packages/calcite-components/src/components/panel/panel.e2e.ts
+++ b/packages/calcite-components/src/components/panel/panel.e2e.ts
@@ -31,6 +31,18 @@ describe("calcite-panel", () => {
         propertyName: "headingLevel",
         defaultValue: undefined,
       },
+      {
+        propertyName: "collapsible",
+        defaultValue: false,
+      },
+      {
+        propertyName: "collapseDirection",
+        defaultValue: "down",
+      },
+      {
+        propertyName: "collapsed",
+        defaultValue: false,
+      },
     ]);
   });
 
@@ -67,6 +79,29 @@ describe("calcite-panel", () => {
     expect(await container.isVisible()).toBe(false);
   });
 
+  it("honors collapsed & collapsible properties", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent("<calcite-panel collapsed>test</calcite-panel>");
+
+    const element = await page.find("calcite-panel");
+    const container = await page.find(`calcite-panel >>> .${CSS.contentWrapper}`);
+    const collapseButtonSelector = `calcite-panel >>> [data-test="collapse"]`;
+    expect(await page.find(collapseButtonSelector)).toBeNull();
+
+    await page.waitForChanges();
+
+    expect(await container.isVisible()).toBe(true);
+
+    element.setProperty("collapsible", true);
+
+    await page.waitForChanges();
+
+    expect(await element.getProperty("collapsible")).toBe(true);
+    expect(await page.find(collapseButtonSelector)).not.toBeNull();
+    expect(await container.isVisible()).toBe(false);
+  });
+
   it("close event should fire when closed", async () => {
     const page = await newE2EPage({ html: "<calcite-panel closable>test</calcite-panel>" });
 
@@ -76,7 +111,21 @@ describe("calcite-panel", () => {
 
     await closeButton.click();
 
-    expect(calcitePanelClose).toHaveReceivedEvent();
+    expect(calcitePanelClose).toHaveReceivedEventTimes(1);
+  });
+
+  it("toggle event should fire when collapsed", async () => {
+    const page = await newE2EPage();
+    await page.setContent("<calcite-panel collapsible>Hello World!</calcite-panel>");
+    await page.waitForChanges();
+
+    const calcitePanelToggle = await page.spyOnEvent("calcitePanelToggle", "window");
+
+    const toggleButton = await page.find("calcite-panel >>> [data-test=collapse]");
+
+    await toggleButton.click();
+
+    expect(calcitePanelToggle).toHaveReceivedEventTimes(1);
   });
 
   describe("accessible", () => {
@@ -97,6 +146,24 @@ describe("calcite-panel", () => {
         <calcite-button slot="${SLOTS.footerActions}">test button 2</calcite-button>
       </calcite-panel>
     `);
+
+    accessible(html`
+      <calcite-panel collapsible closable>
+        <calcite-action-bar slot="${SLOTS.actionBar}">
+          <calcite-action-group>
+            <calcite-action text="Add" icon="plus"> </calcite-action>
+            <calcite-action text="Save" icon="save"> </calcite-action>
+            <calcite-action text="Layers" icon="layers"> </calcite-action>
+          </calcite-action-group>
+        </calcite-action-bar>
+        <div slot="${SLOTS.headerActionsStart}">test start</div>
+        <div slot="${SLOTS.headerContent}">test content</div>
+        <div slot="${SLOTS.headerActionsEnd}">test end</div>
+        <p>Content</p>
+        <calcite-button slot="${SLOTS.footerActions}">test button 1</calcite-button>
+        <calcite-button slot="${SLOTS.footerActions}">test button 2</calcite-button>
+      </calcite-panel>
+    `);
   });
 
   describe("should focus on close button", () => {
diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
index 1fcf04e60a0..067d96fd8a9 100644
--- a/packages/calcite-components/src/components/panel/panel.scss
+++ b/packages/calcite-components/src/components/panel/panel.scss
@@ -4,6 +4,7 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-panel-footer-padding: Specifies the padding of the component's footer.
+ * @prop --calcite-panel-header-border-block-end: Specifies the component header's block end border.
  */
 
 :host {
@@ -11,8 +12,6 @@
   @apply relative flex w-full h-full flex-auto overflow-hidden;
 
   --calcite-min-header-height: calc(var(--calcite-icon-size) * 3);
-  --calcite-panel-footer-padding: theme("spacing.2");
-  --calcite-internal-panel-header-border-block-end: 1px solid var(--calcite-ui-border-3);
 }
 
 @include disabled();
@@ -32,7 +31,7 @@
 .header {
   @apply bg-foreground-1 flex flex-col
     z-header;
-  border-block-end: var(--calcite-internal-panel-header-border-block-end);
+  border-block-end: var(--calcite-panel-header-border-block-end, 1px solid var(--calcite-ui-border-3));
 }
 
 .header-container {
@@ -114,7 +113,7 @@
   justify-evenly;
 
   flex: 0 0 auto;
-  padding: var(--calcite-panel-footer-padding);
+  padding: var(--calcite-panel-footer-padding, theme("spacing.2"));
   border-block-start: 1px solid var(--calcite-ui-border-3);
 }
 
diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index 13e3cc1900d..3f01bb3d4f7 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -49,6 +49,22 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
           return this;
         },
       },
+      {
+        name: "collapsed",
+        commit(): Attribute {
+          this.value = boolean("collapsed", false);
+          delete this.build;
+          return this;
+        },
+      },
+      {
+        name: "collapsible",
+        commit(): Attribute {
+          this.value = boolean("collapsible", false);
+          delete this.build;
+          return this;
+        },
+      },
       {
         name: "height-scale",
         commit(): Attribute {
@@ -161,6 +177,8 @@ export const darkModeRTL_TestOnly = (): string =>
     panelContent
   );
 
+darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
+
 export const closableWithActions_TestOnly = (): string => html`
   <calcite-panel
     style="height: 100%;"
@@ -176,7 +194,50 @@ export const closableWithActions_TestOnly = (): string => html`
   </calcite-panel>
 `;
 
-darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
+export const collapsibleWithoutActions_TestOnly = (): string => html`
+  <calcite-panel
+    style="height: 100%;"
+    collapsible
+    heading="Collapsible without actions"
+    description="A panel that can be collapsed"
+  >
+    <div id="content" style="height: 100%;">${contentHTML}</div>
+    ${footerHTML}
+  </calcite-panel>
+`;
+
+export const collapsibleWithActions_TestOnly = (): string => html`
+  <calcite-panel
+    style="height: 100%;"
+    closable
+    collapsible
+    heading="Collapsible with actions"
+    description="A panel that can be collapsed"
+  >
+    <calcite-action text="information" text-enabled icon="information" slot="header-actions-start"></calcite-action>
+    <calcite-action text="banana" text-enabled icon="banana" slot="header-menu-actions"></calcite-action>
+    <calcite-action text="measure" text-enabled icon="measure" slot="header-menu-actions"></calcite-action>
+    <div id="content" style="height: 100%;">${contentHTML}</div>
+    ${footerHTML}
+  </calcite-panel>
+`;
+
+export const collapsedWithActions_TestOnly = (): string => html`
+  <calcite-panel
+    style="height: 100%;"
+    closable
+    collapsible
+    collapsed
+    heading="Collapsible with actions"
+    description="A panel that can be collapsed"
+  >
+    <calcite-action text="information" text-enabled icon="information" slot="header-actions-start"></calcite-action>
+    <calcite-action text="banana" text-enabled icon="banana" slot="header-menu-actions"></calcite-action>
+    <calcite-action text="measure" text-enabled icon="measure" slot="header-menu-actions"></calcite-action>
+    <div id="content" style="height: 100%;">${contentHTML}</div>
+    ${footerHTML}
+  </calcite-panel>
+`;
 
 export const withActionBar_TestOnly = (): string => html`<div style="width: 300px;">
   <calcite-panel height-scale="s">
@@ -222,7 +283,7 @@ export const actionBarBackgroundColor_TestOnly = (): string => html`<calcite-pan
 export const footerWithoutContent_TestOnly = (): string => html`<calcite-panel
   height-scale="s"
   heading="Header!"
-  style="width: 300px; height:auto; --calcite-internal-panel-header-border-block-end:none;"
+  style="width: 300px; height:auto; --calcite-panel-header-border-block-end:none;"
 >
   <p slot="footer">Footer content!</p>
 </calcite-panel>`;
@@ -230,7 +291,7 @@ export const footerWithoutContent_TestOnly = (): string => html`<calcite-panel
 export const actionBarWithoutContent_TestOnly = (): string => html`<calcite-panel
   height-scale="s"
   heading="Header!"
-  style="width: 300px; height:auto; --calcite-internal-panel-header-border-block-end:none;"
+  style="width: 300px; height:auto; --calcite-panel-header-border-block-end:none;"
 >
   <calcite-action-bar slot="action-bar">
     <calcite-action-group>
@@ -263,7 +324,7 @@ export const actionBarZIndex_TestOnly = (): string => html`<calcite-panel
 export const footerAndActionBarWithoutContent_TestOnly = (): string => html`<calcite-panel
   height-scale="s"
   heading="Header!"
-  style="width: 300px; height:auto; --calcite-internal-panel-header-border-block-end:none;"
+  style="width: 300px; height:auto; --calcite-panel-header-border-block-end:none;"
 >
   <calcite-action-bar slot="action-bar">
     <calcite-action-group>
@@ -318,6 +379,6 @@ export const withTextContentOnly = (): string =>
   html`<calcite-panel height-scale="s" heading="My Panel">Slotted content!</calcite-panel>`;
 
 export const withNoHeaderBorderBlockEnd_TestOnly = (): string =>
-  html`<calcite-panel style="--calcite-internal-panel-header-border-block-end:none;" height-scale="s" heading="My Panel"
+  html`<calcite-panel style="--calcite-panel-header-border-block-end:none;" height-scale="s" heading="My Panel"
     >Slotted content!</calcite-panel
   >`;
diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
index 74d27ee072d..f191d72ed42 100644
--- a/packages/calcite-components/src/components/panel/panel.tsx
+++ b/packages/calcite-components/src/components/panel/panel.tsx
@@ -81,6 +81,23 @@ export class Panel
   /** When `true`, displays a close button in the trailing side of the header. */
   @Prop({ reflect: true }) closable = false;
 
+  /**
+   * When `true`, hides the component's content area.
+   */
+  @Prop({ reflect: true }) collapsed = false;
+
+  /**
+   * Specifies the direction of the collapse.
+   *
+   * @internal
+   */
+  @Prop() collapseDirection: "down" | "up" = "down";
+
+  /**
+   * When `true`, the component is collapsible.
+   */
+  @Prop({ reflect: true }) collapsible = false;
+
   /**
    * Specifies the number at which section headings should start.
    */
@@ -163,10 +180,6 @@ export class Panel
 
   @Element() el: HTMLCalcitePanelElement;
 
-  backButtonEl: HTMLCalciteActionElement;
-
-  closeButtonEl: HTMLCalciteActionElement;
-
   containerEl: HTMLElement;
 
   panelScrollEl: HTMLElement;
@@ -211,6 +224,11 @@ export class Panel
    */
   @Event({ cancelable: false }) calcitePanelClose: EventEmitter<void>;
 
+  /**
+   * Fires when the collapse button is clicked.
+   */
+  @Event({ cancelable: false }) calcitePanelToggle: EventEmitter<void>;
+
   /**
    * Fires when the content is scrolled.
    */
@@ -240,14 +258,6 @@ export class Panel
     this.containerEl = node;
   };
 
-  setCloseRef = (node: HTMLCalciteActionElement): void => {
-    this.closeButtonEl = node;
-  };
-
-  setBackRef = (node: HTMLCalciteActionElement): void => {
-    this.backButtonEl = node;
-  };
-
   panelKeyDownHandler = (event: KeyboardEvent): void => {
     if (this.closable && event.key === "Escape" && !event.defaultPrevented) {
       this.close();
@@ -260,6 +270,11 @@ export class Panel
     this.calcitePanelClose.emit();
   };
 
+  collapse = (): void => {
+    this.collapsed = !this.collapsed;
+    this.calcitePanelToggle.emit();
+  };
+
   panelScrollHandler = (): void => {
     this.calcitePanelScroll.emit();
   };
@@ -326,7 +341,8 @@ export class Panel
    *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
    *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
    * });
-   * @param options
+   * @param options - allows specific coordinates to be defined.
+   * @returns - promise that resolves once the content is scrolled to.
    */
   @Method()
   async scrollContentTo(options?: ScrollToOptions): Promise<void> {
@@ -365,9 +381,6 @@ export class Panel
     );
   }
 
-  /**
-   * Allows user to override the entire header-content node.
-   */
   renderHeaderSlottedContent(): VNode {
     return (
       <div class={CSS.headerContent} hidden={!this.hasHeaderContent} key="slotted-header-content">
@@ -394,19 +407,43 @@ export class Panel
   }
 
   renderHeaderActionsEnd(): VNode {
-    const { close, hasEndActions, messages, closable, hasMenuItems } = this;
-    const text = messages.close;
+    const {
+      hasEndActions,
+      messages,
+      closable,
+      collapsed,
+      collapseDirection,
+      collapsible,
+      hasMenuItems,
+    } = this;
+    const { collapse, expand, close } = messages;
+
+    const icons = [ICONS.expand, ICONS.collapse];
 
-    const closableNode = closable ? (
+    if (collapseDirection === "up") {
+      icons.reverse();
+    }
+
+    const collapseNode = collapsible ? (
       <calcite-action
-        aria-label={text}
+        aria-expanded={toAriaBoolean(!collapsed)}
+        aria-label={collapse}
+        data-test="collapse"
+        icon={collapsed ? icons[0] : icons[1]}
+        onClick={this.collapse}
+        text={collapse}
+        title={!collapsed ? expand : collapse}
+      />
+    ) : null;
+
+    const closeNode = closable ? (
+      <calcite-action
+        aria-label={close}
         data-test="close"
         icon={ICONS.close}
-        onClick={close}
-        text={text}
-        title={text}
-        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-        ref={this.setCloseRef}
+        onClick={this.close}
+        text={close}
+        title={close}
       />
     ) : null;
 
@@ -414,7 +451,7 @@ export class Panel
       <slot name={SLOTS.headerActionsEnd} onSlotchange={this.handleHeaderActionsEndSlotChange} />
     );
 
-    const showContainer = hasEndActions || closableNode || hasMenuItems;
+    const showContainer = hasEndActions || collapseNode || closeNode || hasMenuItems;
 
     return (
       <div
@@ -424,7 +461,8 @@ export class Panel
       >
         {slotNode}
         {this.renderMenu()}
-        {closableNode}
+        {collapseNode}
+        {closeNode}
       </div>
     );
   }
@@ -460,6 +498,7 @@ export class Panel
       hasStartActions,
       hasEndActions,
       closable,
+      collapsible,
       hasMenuItems,
       hasActionBar,
     } = this;
@@ -471,6 +510,7 @@ export class Panel
       !!headerContentNode ||
       hasStartActions ||
       hasEndActions ||
+      collapsible ||
       closable ||
       hasMenuItems;
 
@@ -523,6 +563,7 @@ export class Panel
     return (
       <div
         class={CSS.contentWrapper}
+        hidden={this.collapsible && this.collapsed}
         onScroll={this.panelScrollHandler}
         // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
         ref={this.setPanelScrollEl}
diff --git a/packages/calcite-components/src/components/panel/resources.ts b/packages/calcite-components/src/components/panel/resources.ts
index d7f54617a34..c274955b141 100644
--- a/packages/calcite-components/src/components/panel/resources.ts
+++ b/packages/calcite-components/src/components/panel/resources.ts
@@ -22,6 +22,8 @@ export const ICONS = {
   menu: "ellipsis",
   backLeft: "chevron-left",
   backRight: "chevron-right",
+  expand: "chevron-up",
+  collapse: "chevron-down",
 };
 
 export const SLOTS = {
diff --git a/packages/calcite-components/src/components/panel/usage/Collapsible.md b/packages/calcite-components/src/components/panel/usage/Collapsible.md
new file mode 100644
index 00000000000..4869ea769e9
--- /dev/null
+++ b/packages/calcite-components/src/components/panel/usage/Collapsible.md
@@ -0,0 +1,8 @@
+Renders a panel that is collapsible with a click of the chevron.
+
+```html
+<calcite-panel collapsible id="collapsible-panel">
+  <div slot="header-content">Collapsible Header</div>
+  <p>Click the chevron and I go away!</p>
+</calcite-panel>
+```
diff --git a/packages/calcite-components/src/demos/panel.html b/packages/calcite-components/src/demos/panel.html
index ea345201c84..809e59e0d84 100644
--- a/packages/calcite-components/src/demos/panel.html
+++ b/packages/calcite-components/src/demos/panel.html
@@ -50,6 +50,17 @@
         </div>
       </div>
 
+      <!-- collapsible -->
+      <div class="parent">
+        <div class="child right-aligned-text">collapsible</div>
+        <div class="child">
+          <calcite-panel height-scale="s" collapsible>
+            <div slot="header-content">Header!</div>
+            <p>Slotted content!</p>
+          </calcite-panel>
+        </div>
+      </div>
+
       <!-- with action bar -->
       <div class="parent">
         <div class="child right-aligned-text">Slotted Action Bar</div>