diff --git a/client/components/Events/EventItem.tsx b/client/components/Events/EventItem.tsx
index f9385615c..2e5fee0aa 100644
--- a/client/components/Events/EventItem.tsx
+++ b/client/components/Events/EventItem.tsx
@@ -46,6 +46,7 @@ class EventItemComponent extends React.Component<IProps, IState> {
             this.state.hover !== nextState.hover ||
             this.props.minTimeWidth !== nextProps.minTimeWidth ||
             this.props.lockedItems != nextProps.lockedItems ||
+            (this.props.relatedEventsUI && this.props.relatedEventsUI.visible != nextProps.relatedEventsUI.visible) ||
             this.props.filterLanguage !== nextProps.filterLanguage;
     }
 
@@ -143,7 +144,7 @@ class EventItemComponent extends React.Component<IProps, IState> {
     }
 
     render() {
-        const {gettext} = superdeskApi.localization;
+        const {gettext, gettextPlural} = superdeskApi.localization;
         const {querySelectorParent} = superdeskApi.utilities;
 
         const {
@@ -151,7 +152,6 @@ class EventItemComponent extends React.Component<IProps, IState> {
             onItemClick,
             lockedItems,
             activeFilter,
-            toggleRelatedPlanning,
             onMultiSelectClick,
             calendars,
             listFields,
@@ -260,22 +260,44 @@ class EventItemComponent extends React.Component<IProps, IState> {
 
                         {secondaryFields.includes('files') && renderFields('files', item)}
 
+                        {(() => {
+                            const {relatedEventsUI} = this.props;
 
-                        {(hasPlanning) && (
-                            <span
-                                className="sd-overflow-ellipsis sd-list-item__element-lm-10"
-                            >
-                                <a
-                                    className="sd-line-input__input--related-item-link"
-                                    onClick={toggleRelatedPlanning}
+                            if (!hasPlanning || relatedEventsUI == null) {
+                                return null;
+                            }
+
+                            const relatedPlanningText = relatedEventsUI.visible
+                                ? gettextPlural(
+                                    this.props.relatedPlanningsCount,
+                                    'Hide 1 planning item', 'Hide {{n}} planning items',
+                                    {n: this.props.relatedPlanningsCount},
+                                )
+                                : gettextPlural(
+                                    this.props.relatedPlanningsCount,
+                                    'Show 1 planning item', 'Show {{n}} planning items',
+                                    {n: this.props.relatedPlanningsCount},
+                                );
+
+                            return (
+                                <span
+                                    className="sd-overflow-ellipsis sd-list-item__element-lm-10"
                                 >
-                                    <i className="icon-calendar" />
-                                    <span className="sd-margin-l--0-5">
-                                        {this.props.relatedPlanningText}
-                                    </span>
-                                </a>
-                            </span>
-                        )}
+                                    <a
+                                        className="sd-line-input__input--related-item-link"
+                                        onClick={(event) => {
+                                            event.stopPropagation();
+                                            relatedEventsUI.setVisibility(!relatedEventsUI.visible);
+                                        }}
+                                    >
+                                        <i className="icon-calendar" />
+                                        <span className="sd-margin-l--0-5">
+                                            {relatedPlanningText}
+                                        </span>
+                                    </a>
+                                </span>
+                            );
+                        })()}
 
                         {secondaryFields.includes('location') && renderFields('location', item)}
                     </Row>
@@ -300,4 +322,4 @@ class EventItemComponent extends React.Component<IProps, IState> {
     }
 }
 
-export const EventItem = connect()(EventItemComponent);
\ No newline at end of file
+export const EventItem = connect()(EventItemComponent);
diff --git a/client/components/Events/EventItemWithPlanning.tsx b/client/components/Events/EventItemWithPlanning.tsx
index 3a7a4c35e..f597e2049 100644
--- a/client/components/Events/EventItemWithPlanning.tsx
+++ b/client/components/Events/EventItemWithPlanning.tsx
@@ -48,8 +48,7 @@ export class EventItemWithPlanning extends React.Component<IProps, IState> {
         this.handleKeyDown = this.handleKeyDown.bind(this);
     }
 
-    toggleRelatedPlanning(evt) {
-        evt.stopPropagation();
+    toggleRelatedPlanning(isOpen) {
         if (!this.state.openPlanningItems) {
             this.props.showRelatedPlannings(get(this.props, 'eventProps.item', {}));
         }
@@ -58,7 +57,7 @@ export class EventItemWithPlanning extends React.Component<IProps, IState> {
 
         this.setState({
             activeIndex: activeIndex,
-            openPlanningItems: !this.state.openPlanningItems,
+            openPlanningItems: isOpen,
         });
 
         this.activateItem(activeIndex, false);
@@ -205,13 +204,8 @@ export class EventItemWithPlanning extends React.Component<IProps, IState> {
     }
 
     render() {
-        const {gettextPlural} = superdeskApi.localization;
         const planningItems = get(this.props, 'eventProps.item.planning_ids', []).length;
 
-        const relatedPlanningText = this.state.openPlanningItems
-            ? gettextPlural(planningItems, 'Hide 1 planning item', 'Hide {{n}} planning items', {n: planningItems})
-            : gettextPlural(planningItems, 'Show 1 planning item', 'Show {{n}} planning items', {n: planningItems});
-
         const getPlannings = (item) => (
             get(this.props.relatedPlanningsInList, item._id, []).map((plan, index) => {
                 const planningProps = {
@@ -226,12 +220,20 @@ export class EventItemWithPlanning extends React.Component<IProps, IState> {
 
         const eventProps = {
             ...this.props.eventProps,
-            toggleRelatedPlanning: this.toggleRelatedPlanning,
-            relatedPlanningText: relatedPlanningText,
+            relatedPlanningsCount: planningItems,
         };
 
         // Event is always indexed as 0
-        const eventItem = <EventItem {...eventProps} active={this.state.activeIndex === 0} />;
+        const eventItem = (
+            <EventItem
+                {...eventProps}
+                active={this.state.activeIndex === 0}
+                relatedEventsUI={{
+                    visible: this.state.openPlanningItems,
+                    setVisibility: this.toggleRelatedPlanning,
+                }}
+            />
+        );
 
         return (
             <NestedItem
diff --git a/client/interfaces.ts b/client/interfaces.ts
index 2f83eba4f..894814743 100644
--- a/client/interfaces.ts
+++ b/client/interfaces.ts
@@ -924,10 +924,13 @@ export interface IBaseListItemProps<T> {
 }
 
 export interface IEventListItemProps extends IBaseListItemProps<IEventItem> {
-    relatedPlanningText?: string;
     calendars: Array<ICalendar>;
     filterLanguage?: string;
-    toggleRelatedPlanning?(event: React.MouseEvent): void;
+    relatedPlanningsCount: number;
+    relatedEventsUI?: {
+        visible: boolean;
+        setVisibility(value: boolean): void;
+    };
 }
 
 export interface IPlanningListItemProps extends IBaseListItemProps<IPlanningItem> {