Search Box Toggle Functionality
### Steps:
1. **Ensure the search box is hidden by default** using CSS.
2. **Add a JavaScript click event** to toggle the search box visibility when clicking the search icon.
### Updated Code:
/* Hide search box initially */
.search-form-header {
display: none;
position: absolute;
top: 50px; /* Adjust as needed */
right: 0;
background: white;
padding: 10px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
/* Show when active */
.search-form-header.active {
display: block;
}document.addEventListener("DOMContentLoaded", function () {
const searchIcon = document.querySelector(".search-icon-event");
const searchBox = document.querySelector(".search-form-header");
searchIcon.addEventListener("click", function () {
searchBox.classList.toggle("active");
});
// Optional: Close when clicking outside
document.addEventListener("click", function (event) {
if (!searchBox.contains(event.target) && !searchIcon.contains(event.target)) {
searchBox.classList.remove("active");
}
});
});### Explanation:
– The `.search-form-header` is **hidden initially**.
– When `.search-icon-event` is clicked, it **toggles the `.active` class** to show/hide the search box.
– Clicking outside the search box **closes it automatically**.
This will ensure a smooth toggle effect when clicking the search icon. Let me know if you need any modifications! 🚀
—
### **Updated Code:**
#### **CSS**
/* Hide search box initially */
.search-form-header {
display: none;
position: absolute;
top: 50px; /* Adjust as needed */
right: 0;
background: white;
padding: 10px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
/* Show when active */
.search-form-header.active {
display: block;
}#### **JavaScript**
“`javascript
document.addEventListener("DOMContentLoaded", function () {
const searchIcon = document.querySelector(".search-icon-event");
const searchBox = document.querySelector(".search-form-header");
const searchSVG = `
—
### **Updated JavaScript:**
document.addEventListener("DOMContentLoaded", function () {
const searchIcon = document.querySelector(".search-icon-event");
const searchBox = document.querySelector(".search-form-header");
// SVG icons
const searchSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34" fill="none">
<path d="M13.5131 21.577C11.2483 21.577 9.32897 20.7901 7.75505 19.2164C6.18137 17.6425 5.39453 15.7232 5.39453 13.4584C5.39453 11.1936 6.18137 9.27428 7.75505 7.70036C9.32897 6.12668 11.2483 5.33984 13.5131 5.33984C15.7779 5.33984 17.6972 6.12668 19.2711 7.70036C20.8448 9.27428 21.6317 11.1936 21.6317 13.4584C21.6317 14.4428 21.4573 15.3953 21.1086 16.3162C20.7598 17.237 20.3021 18.0243 19.7354 18.6781L28.1048 27.0474C28.2372 27.1801 28.3081 27.3427 28.3173 27.5351C28.3262 27.7278 28.2554 27.8994 28.1048 28.0501C27.9539 28.2007 27.7867 28.276 27.6033 28.276C27.42 28.276 27.253 28.2007 27.1021 28.0501L18.7328 19.6808C18.0245 20.2838 17.2099 20.7506 16.2891 21.0811C15.3682 21.4117 14.4429 21.577 13.5131 21.577ZM13.5131 20.1603C15.3928 20.1603 16.9797 19.5132 18.2738 18.2191C19.5679 16.9252 20.215 15.3383 20.215 13.4584C20.215 11.5785 19.5679 9.99159 18.2738 8.6977C16.9797 7.40357 15.3928 6.75651 13.5131 6.75651C11.6332 6.75651 10.0463 7.40357 8.75239 8.6977C7.45826 9.99159 6.8112 11.5785 6.8112 13.4584C6.8112 15.3383 7.45826 16.9252 8.75239 18.2191C10.0463 19.5132 11.6332 20.1603" fill="black"/>
</svg>`;
const crossSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>`;
// Set initial search icon
searchIcon.innerHTML = searchSVG;
searchIcon.addEventListener("click", function () {
if (searchBox.classList.contains("active")) {
searchBox.classList.remove("active");
searchIcon.innerHTML = searchSVG; // Restore search icon
} else {
searchBox.classList.add("active");
searchIcon.innerHTML = crossSVG; // Change to cross icon
}
});
});—
### **CSS (Optional for Smooth Appearance)**
.search-form-header {
display: none;
position: absolute;
top: 50px;
right: 0;
background: white;
padding: 10px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
.search-form-header.active {
display: block;
}—
### **How It Works:**
1. **Default Icon:** Shows the search icon initially.
2. **Click Event:** When clicked:
– If search box is closed → Opens it and replaces the icon with a cross.
– If search box is open → Closes it and switches back to the search icon.
3. **Smooth Transition:** Ensures seamless toggling of search UI.
This should work perfectly in your setup! Let me know if you need any tweaks. 🚀