diff --git a/ghost/admin/app/components/gh-member-settings-form.hbs b/ghost/admin/app/components/gh-member-settings-form.hbs
index cb9e71b3ca..aa01a87689 100644
--- a/ghost/admin/app/components/gh-member-settings-form.hbs
+++ b/ghost/admin/app/components/gh-member-settings-form.hbs
@@ -184,10 +184,10 @@
                                             <span class="gh-cp-membertier-renewal">Renews {{sub.validUntil}}</span>
                                         {{/if}}
                                     </div>
-                                    <div class="flex flex-row gh-cp-membertier-details">
+                                    <div class="flex flex-row gh-cp-membertier-details" {{on "click" (fn this.toggleSubscriptionExpanded sub.id)}}>
                                         Details {{svg-jar "arrow-right-stroke"}}
                                     </div>
-                                    <div class="gh-membertier-advanced" data-test-subscription={{index}}>
+                                    <div class="gh-membertier-advanced {{if (not sub.showDetails) "hide"}}" data-test-subscription={{index}}>
                                         <div class="gh-membertier-details-container">
                                             {{#if sub.cancellationReason}}
                                                 <div class="mb4">
@@ -395,7 +395,7 @@
                                             {{/if}}
                                         {{/if}}
                                         <div class="gh-membertier-details">
-                                            <span class="gh-membertier-created">Created on {{sub.startDate}}</span>                                            
+                                            <span class="gh-membertier-created">Created on {{sub.startDate}}</span>
                                             {{#if (and sub.attribution sub.attribution.url sub.attribution.title) }}
                                                 <span class="gh-membertier-separator">·</span>
                                                 <span class="gh-membertier-started">Subscribed on <a href="{{sub.attribution.url}}" target="_blank" rel="noopener noreferrer">{{ sub.attribution.title }}</a></span>
diff --git a/ghost/admin/app/components/gh-member-settings-form.js b/ghost/admin/app/components/gh-member-settings-form.js
index 1358d21255..b4fb416824 100644
--- a/ghost/admin/app/components/gh-member-settings-form.js
+++ b/ghost/admin/app/components/gh-member-settings-form.js
@@ -23,6 +23,7 @@ export default class extends Component {
     @tracked showMemberTierModal = false;
     @tracked tiersList;
     @tracked newslettersList;
+    @tracked isSubscriptionExpanded = {};
 
     get isAddComplimentaryAllowed() {
         if (!this.membersUtils.paidMembersEnabled) {
@@ -98,7 +99,7 @@ export default class extends Component {
             if (!sub.id && this.feature.get('compExpiring') && sub.tier?.expiry_at) {
                 data.compExpiry = moment(sub.tier.expiry_at).format('D MMM YYYY');
             }
-
+            data.showDetails = !!this.isSubscriptionExpanded[sub.id];
             return data;
         });
         return tiers.map((tier) => {
@@ -135,6 +136,14 @@ export default class extends Component {
         }
     }
 
+    @action
+    toggleSubscriptionExpanded(subId) {
+        this.isSubscriptionExpanded = {
+            ...this.isSubscriptionExpanded,
+            [subId]: !this.isSubscriptionExpanded[subId]
+        };
+    }
+
     @action
     setup() {
         this.fetchTiers.perform();