If panel has state: expanded/collapsed then render panel.name instead…

src/panel.ts

@@ -319,7 +319,7 @@ export class PanelModelBase extends SurveyElement<Question>
   @property({ defaultValue: true }) showTitle: boolean;
   get hasTitle(): boolean {
     return (
-      (this.canShowTitle() && this.title.length > 0) ||
+      (this.canShowTitle() && this.locTitle.textOrHtml.length > 0) ||
       (this.showTitle && this.isDesignMode && settings.designMode.showEmptyTitles)
     );
   }
@@ -1631,12 +1631,22 @@ export class PanelModel extends PanelModelBase implements IElement {
   public get no(): string {
     return this.getPropertyValue("no", "");
   }
-  protected setNo(visibleIndex: number) {
+  protected setNo(visibleIndex: number): void {
     this.setPropertyValue(
       "no",
       Helpers.getNumberByIndex(this.visibleIndex, this.getStartIndex())
     );
   }
+  protected createLocTitleProperty(): LocalizableString {
+    const locTitleValue = super.createLocTitleProperty();
+    locTitleValue.onGetTextCallback = (text: string): string => {
+      if (!text && (this.isExpanded || this.isCollapsed)) {
+        text = this.name;
+      }
+      return text;
+    };
+    return locTitleValue;
+  }
   protected beforeSetVisibleIndex(index: number): number {
     let visibleIndex = -1;
     if (this.showNumber && (this.isDesignMode || !this.locTitle.isEmpty)) {

testCafe/questions/panel.js

@@ -69,6 +69,14 @@ var json = {
           innerIndent: 1,
           name: "panel1",
         },
+        {
+          type: "panel",
+          name: "panel2",
+          state: "collapsed",
+          elements: [
+            { type: "text", name: "q1" }
+          ]
+        }
       ],
     },
   ],
@@ -119,6 +127,14 @@ frameworks.forEach((framework) => {
     await t.click(panelTitle);
     assert.equal(await contentItem.visible, false);
   });
+  test("expand collapse title by name", async (t) => {
+    const panelTitle = Selector("h4").withText("panel2");
+    const contentItem = Selector("[data-name='q1']");
+
+    assert.equal(await contentItem.visible, false);
+    await t.click(panelTitle);
+    assert.equal(await contentItem.visible, true);
+  });
 
   test("panel description reactivity", async (t) => {
     await ClientFunction(() => {

tests/paneltests.ts

@@ -187,6 +187,32 @@ QUnit.test("Expand panel on validation error", function (assert) {
   assert.equal(panel1.isCollapsed, false, "Panel1 is not collapsed");
   assert.equal(panel2.isCollapsed, false, "Panel2 is not collapsed");
 });
+QUnit.test("Render name if title is empty and panel is expanded or collapsed", function (assert) {
+  const survey = new SurveyModel();
+  const page = survey.addNewPage("page1");
+  const panel = page.addNewPanel("p1");
+  assert.notOk(panel.locTitle.textOrHtml, "panel title is empty");
+  assert.notOk(panel.hasTitle, "no title, #1");
+  panel.collapse();
+  assert.equal(panel.locTitle.textOrHtml, "p1", "panel title is name");
+  assert.ok(panel.hasTitle, "has title, #2");
+  panel.state = "default";
+  assert.notOk(panel.locTitle.textOrHtml, "panel title is empty, #2");
+  assert.notOk(panel.hasTitle, "no title, #3");
+  panel.expand();
+  assert.equal(panel.locTitle.textOrHtml, "p1", "panel title is name, #2");
+  assert.ok(panel.hasTitle, "has title, #3");
+  panel.title = "some text";
+  assert.equal(panel.locTitle.textOrHtml, "some text", "panel title is not empty");
+  assert.ok(panel.hasTitle, "has title, #4");
+  panel.title = "";
+  panel.state = "default";
+  assert.notOk(panel.locTitle.textOrHtml, "panel title is empty, #3");
+  assert.notOk(panel.hasTitle, "no title, #5");
+  panel.title = "some text";
+  assert.equal(panel.locTitle.textOrHtml, "some text", "panel title is not empty, #2");
+  assert.ok(panel.hasTitle, "has title, #6");
+});
 QUnit.test("Panel.isRequired", function (assert) {
   const survey = new SurveyModel();
   const page = survey.addNewPage("page1");