diff --git a/web/src/condense.ts b/web/src/condense.ts
index bfb715da3e..b44ddb4ea4 100644
--- a/web/src/condense.ts
+++ b/web/src/condense.ts
@@ -1,6 +1,8 @@
 import $ from "jquery";
 import assert from "minimalistic-assert";
 
+import render_message_length_toggle from "../templates/message_length_toggle.hbs";
+
 import * as message_flags from "./message_flags";
 import * as message_lists from "./message_lists";
 import type {Message} from "./message_store";
@@ -20,26 +22,32 @@ This library implements two related, similar concepts:
 
 */
 
-function show_more_link($row: JQuery): void {
-    $row.find(".message_condenser").hide();
-    $row.find(".message_expander").show();
+export function show_message_expander($row: JQuery): void {
+    $row.find(".message_length_controller").html(
+        render_message_length_toggle({toggle_type: "expander"}),
+    );
 }
 
-function show_condense_link($row: JQuery): void {
-    $row.find(".message_expander").hide();
-    $row.find(".message_condenser").show();
+export function show_message_condenser($row: JQuery): void {
+    $row.find(".message_length_controller").html(
+        render_message_length_toggle({toggle_type: "condenser"}),
+    );
+}
+
+export function hide_message_length_toggle($row: JQuery): void {
+    $row.find(".message_length_controller").empty();
 }
 
 function condense_row($row: JQuery): void {
     const $content = $row.find(".message_content");
     $content.addClass("condensed");
-    show_more_link($row);
+    show_message_expander($row);
 }
 
 function uncondense_row($row: JQuery): void {
     const $content = $row.find(".message_content");
     $content.removeClass("condensed");
-    show_condense_link($row);
+    show_message_condenser($row);
 }
 
 export function uncollapse(message: Message): void {
@@ -65,7 +73,7 @@ export function uncollapse(message: Message): void {
             condense_row($row);
         } else {
             // This was a short message, no more need for a [More] link.
-            $row.find(".message_expander").hide();
+            hide_message_length_toggle($row);
         }
     };
 
@@ -92,7 +100,7 @@ export function collapse(message: Message): void {
 
     const process_row = function process_row($row: JQuery): void {
         $row.find(".message_content").addClass("collapsed");
-        show_more_link($row);
+        show_message_expander($row);
     };
 
     for (const list of message_lists.all_rendered_message_lists()) {
@@ -133,15 +141,13 @@ export function toggle_collapse(message: Message): void {
             message.condensed = true;
             $content.addClass("condensed");
             show_message_expander($row);
-            $row.find(".message_condenser").hide();
         }
         uncollapse(message);
     } else {
         if (is_condensed) {
             message.condensed = false;
             $content.removeClass("condensed");
-            hide_message_expander($row);
-            $row.find(".message_condenser").show();
+            show_message_condenser($row);
         } else {
             collapse(message);
         }
@@ -155,30 +161,6 @@ function get_message_height(elem: HTMLElement): number {
     return util.the($(elem).find(".message_content")).scrollHeight;
 }
 
-export function hide_message_expander($row: JQuery): void {
-    if ($row.find(".could-be-condensed").length !== 0) {
-        $row.find(".message_expander").hide();
-    }
-}
-
-export function hide_message_condenser($row: JQuery): void {
-    if ($row.find(".could-be-condensed").length !== 0) {
-        $row.find(".message_condenser").hide();
-    }
-}
-
-export function show_message_expander($row: JQuery): void {
-    if ($row.find(".could-be-condensed").length !== 0) {
-        $row.find(".message_expander").show();
-    }
-}
-
-export function show_message_condenser($row: JQuery): void {
-    if ($row.find(".could-be-condensed").length !== 0) {
-        $row.find(".message_condenser").show();
-    }
-}
-
 export function condense_and_collapse(elems: JQuery): void {
     if (message_lists.current === undefined) {
         return;
@@ -247,14 +229,14 @@ export function condense_and_collapse(elems: JQuery): void {
             condense_row($(elem));
         } else {
             $content.removeClass("condensed");
-            $(elem).find(".message_expander").hide();
+            hide_message_length_toggle($(elem));
         }
 
         // Completely hide the message and replace it with a "Show more"
         // button if the user has collapsed it.
         if (message.collapsed) {
             $content.addClass("collapsed");
-            $(elem).find(".message_expander").show();
+            show_message_expander($(elem));
         }
     }
 }
@@ -277,9 +259,7 @@ export function initialize(): void {
         } else if ($content.hasClass("condensed")) {
             // Uncondense (show the full long message).
             message.condensed = false;
-            $content.removeClass("condensed");
-            $(this).hide();
-            $row.find(".message_condenser").show();
+            uncondense_row($row);
         }
         e.stopPropagation();
         e.preventDefault();
diff --git a/web/src/message_edit.ts b/web/src/message_edit.ts
index 2e32018fb6..fe194bcb6e 100644
--- a/web/src/message_edit.ts
+++ b/web/src/message_edit.ts
@@ -469,8 +469,7 @@ function edit_message($row: JQuery, raw_content: string): void {
     const message = message_lists.current.get(rows.id($row));
     assert(message !== undefined);
     $row.find(".message_reactions").hide();
-    condense.hide_message_expander($row);
-    condense.hide_message_condenser($row);
+    condense.hide_message_length_toggle($row);
 
     // We potentially got to this function by clicking a button that implied the
     // user would be able to edit their message.  Give a little bit of buffer in
@@ -854,10 +853,12 @@ export function end_message_row_edit($row: JQuery): void {
         message_lists.current.hide_edit_message($row);
         compose_call.abort_video_callbacks(message.id.toString());
     }
-    if ($row.find(".condensed").length !== 0) {
-        condense.show_message_expander($row);
-    } else {
-        condense.show_message_condenser($row);
+    if ($row.find(".could-be-condensed").length !== 0) {
+        if ($row.find(".condensed").length !== 0) {
+            condense.show_message_expander($row);
+        } else {
+            condense.show_message_condenser($row);
+        }
     }
     $row.find(".message_reactions").show();
 
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 51d4545621..cb29ebe43b 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -987,7 +987,6 @@ div.focused-message-list {
 
 .message_length_controller {
     .message_length_toggle {
-        display: none;
         width: 100%;
         height: 24px;
         margin-bottom: var(--message-box-markdown-aligned-vertical-space);
diff --git a/web/templates/message_body.hbs b/web/templates/message_body.hbs
index 1f5320db89..25cb7af46c 100644
--- a/web/templates/message_body.hbs
+++ b/web/templates/message_body.hbs
@@ -59,10 +59,7 @@
 {{> edited_notice}}
 {{/if}}
 
-<div class="message_length_controller">
-    <button type="button" class="message_expander message_length_toggle tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-expander-tooltip-template">{{t "Show more" }}</button>
-    <button type="button" class="message_condenser message_length_toggle tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-condenser-tooltip-template">{{t "Show less" }}</button>
-</div>
+<div class="message_length_controller"></div>
 
 {{#unless is_hidden}}
 <div class="message_reactions">{{> message_reactions }}</div>
diff --git a/web/templates/message_length_toggle.hbs b/web/templates/message_length_toggle.hbs
new file mode 100644
index 0000000000..d3612f9748
--- /dev/null
+++ b/web/templates/message_length_toggle.hbs
@@ -0,0 +1,5 @@
+{{#if (eq toggle_type "expander")}}
+    <button type="button" class="message_expander message_length_toggle tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-expander-tooltip-template">{{t "Show more" }}</button>
+{{else if (eq toggle_type "condenser")}}
+    <button type="button" class="message_condenser message_length_toggle tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-condenser-tooltip-template">{{t "Show less" }}</button>
+{{/if}}