diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue
index 332533615c20..8280d7835630 100644
--- a/client/src/components/Common/Heading.vue
+++ b/client/src/components/Common/Heading.vue
@@ -37,12 +37,9 @@ const element = computed(() => {
 <template>
     <div v-if="props.separator" class="separator heading">
         <div class="stripe"></div>
-        <component :is="element" :class="[sizeClass, props.bold ? 'font-weight-bold' : '']">
+        <component :is="element" :class="[sizeClass, props.bold ? 'font-weight-bold' : '']" @click="$emit('click')">
             <slot />
-            <FontAwesomeIcon
-                v-if="collapsible"
-                :icon="collapsed ? 'chevron-down' : 'chevron-up'"
-                @click="$emit('click')" />
+            <FontAwesomeIcon v-if="collapsible" :icon="collapsed ? 'chevron-down' : 'chevron-up'" />
         </component>
         <div class="stripe"></div>
     </div>
@@ -50,10 +47,11 @@ const element = computed(() => {
         :is="element"
         v-else
         class="heading"
-        :class="[sizeClass, props.bold ? 'font-weight-bold' : '', props.inline ? 'inline' : '']">
+        :class="[sizeClass, props.bold ? 'font-weight-bold' : '', props.inline ? 'inline' : '']"
+        @click="$emit('click')">
         <FontAwesomeIcon v-if="props.icon" :icon="props.icon" />
         <slot />
-        <FontAwesomeIcon v-if="collapsible" :icon="collapsed ? 'chevron-down' : 'chevron-up'" @click="$emit('click')" />
+        <FontAwesomeIcon v-if="collapsible" :icon="collapsed ? 'chevron-down' : 'chevron-up'" />
     </component>
 </template>