From d11b0dbcc86c4f1f67ed76d0b3514ace4a7d500f Mon Sep 17 00:00:00 2001
From: Damien Arrachequesne <damien.arrachequesne@gmail.com>
Date: Fri, 17 Nov 2023 10:32:41 +0100
Subject: [PATCH] docs: add code for the disconnect button

Related: https://github.com/socketio/socket.io-website/issues/425
---
 docs/tutorial/09-connection-state-recovery.md | 73 ++++++++++++++++++-
 1 file changed, 72 insertions(+), 1 deletion(-)

diff --git a/docs/tutorial/09-connection-state-recovery.md b/docs/tutorial/09-connection-state-recovery.md
index 8fb108f6..e1f21c8a 100644
--- a/docs/tutorial/09-connection-state-recovery.md
+++ b/docs/tutorial/09-connection-state-recovery.md
@@ -30,7 +30,78 @@ Let's see it in action:
 
 <video controls width="100%"><source src="/videos/tutorial/connection-state-recovery.mp4" /></video>
 
-In the video above, the "realtime" message is delivered when the connection is reestablished (the "Disconnect" button was added for demonstration purposes).
+As you can see in the video above, the "realtime" message is eventually delivered when the connection is reestablished.
+
+:::note
+
+The "Disconnect" button was added for demonstration purposes.
+
+<details className="changelog">
+    <summary>Code</summary>
+
+<Tabs groupId="syntax">
+  <TabItem value="es6" label="ES6" default>
+
+```html
+<form id="form" action="">
+  <input id="input" autocomplete="off" /><button>Send</button>
+  // highlight-start
+  <button id="toggle-btn">Disconnect</button>
+  // highlight-end
+</form>
+
+<script>
+  // highlight-start
+  const toggleButton = document.getElementById('toggle-btn');
+
+  toggleButton.addEventListener('click', (e) => {
+    e.preventDefault();
+    if (socket.connected) {
+      toggleButton.innerText = 'Connect';
+      socket.disconnect();
+    } else {
+      toggleButton.innerText = 'Disconnect';
+      socket.connect();
+    }
+  });
+  // highlight-end
+</script>
+```
+
+  </TabItem>
+  <TabItem value="es5" label="ES5">
+
+```html
+<form id="form" action="">
+  <input id="input" autocomplete="off" /><button>Send</button>
+  // highlight-start
+  <button id="toggle-btn">Disconnect</button>
+  // highlight-end
+</form>
+
+<script>
+  // highlight-start
+  var toggleButton = document.getElementById('toggle-btn');
+
+  toggleButton.addEventListener('click', function(e) {
+    e.preventDefault();
+    if (socket.connected) {
+      toggleButton.innerText = 'Connect';
+      socket.disconnect();
+    } else {
+      toggleButton.innerText = 'Disconnect';
+      socket.connect();
+    }
+  });
+  // highlight-end
+</script>
+```
+
+  </TabItem>
+</Tabs>
+</details>
+
+:::
 
 Great! Now, you may ask: