diff --git a/src/webpage/index.ts b/src/webpage/index.ts
index 92fc045..4f36fec 100644
--- a/src/webpage/index.ts
+++ b/src/webpage/index.ts
@@ -173,6 +173,10 @@ import {I18n} from "./i18n.js";
 				searchBox.parentElement!.classList.add("searching");
 			}
 		});
+		const sideContainDiv = document.getElementById("sideContainDiv") as HTMLElement;
+		searchBox.onclick = () => {
+			sideContainDiv.classList.remove("hideSearchDiv");
+		};
 		searchX.onclick = () => {
 			if (searchX.classList.contains("svg-plainx")) {
 				markdown.txt = [];
diff --git a/src/webpage/localuser.ts b/src/webpage/localuser.ts
index 719b772..b16f64e 100644
--- a/src/webpage/localuser.ts
+++ b/src/webpage/localuser.ts
@@ -2845,6 +2845,7 @@ class Localuser {
 						for (const elm of htmls) elm.remove();
 					}
 					const htmls: HTMLElement[] = [];
+					sideContainDiv.classList.remove("hideSearchDiv");
 					for (const message of messages) {
 						if (channel !== message.channel) {
 							channel = message.channel;
@@ -2857,6 +2858,7 @@ class Localuser {
 						const html = message.buildhtml(undefined, true);
 						html.addEventListener("click", async () => {
 							try {
+								sideContainDiv.classList.add("hideSearchDiv");
 								await message.channel.focus(message.id);
 							} catch (e) {
 								console.error(e);
diff --git a/src/webpage/style.css b/src/webpage/style.css
index 7fb8cb1..1bb5baf 100644
--- a/src/webpage/style.css
+++ b/src/webpage/style.css
@@ -2721,6 +2721,10 @@ fieldset input[type="radio"] {
 	#sideContainDiv.searchDiv {
 		right: 0;
 		overflow: auto;
+		transition: transform 0.2s;
+	}
+	.hideSearchDiv {
+		transform: translate(100%);
 	}
 	#page:has(#maintoggle:checked) #maintoggleicon {
 		rotate: 180deg;