In this Elementor tutorial, I’ll show you how to add a toggle search box that appears when users click an icon and hides when not in use. This method is a clean and modern way to let visitors search your website without having a bulky search bar taking up space on your design.
Timestamps:
- 0:00 Demo
- 0:37 Elementor Setup
- 2:25 Add Javascript
- 3:44 Add CSS
- 4:32 Elementor Gap Fix
- 5:30 Animation Speed
JavaScript Code
<script>
document.addEventListener('DOMContentLoaded', function () {
const searchTrigger = document.getElementById('search'); // Elementor icon widget
const searchBox = document.getElementById('searchbox'); // the actual menu container
if (!searchTrigger || !searchBox) {
console.warn('search or searchbox not found in DOM');
return;
}
function toggleSearch(event) {
event.stopPropagation();
searchBox.classList.toggle('visible');
}
function hideSearch() {
searchBox.classList.remove('visible');
}
// Show/hide on left-click of the icon
searchTrigger.addEventListener('click', toggleSearch);
// Hide when clicking outside the search box
document.addEventListener('click', function (event) {
if (!searchBox.contains(event.target) && event.target !== searchTrigger) {
hideSearch();
}
});
// Prevent closing when clicking inside the search box
searchBox.addEventListener('click', function (event) {
event.stopPropagation();
});
});
</script>
CSS Code
#searchbox {
transition: all 320ms cubic-bezier(0.18, 0.88, 0.32, 1.27);
transform-origin: top center;
transform: translateY(5px) scaleY(0.5);
opacity: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
#searchbox.visible {
opacity: 1;
visibility: visible;
height: auto;
overflow: visible;
transform: translateY(10px) scaleY(1);
}
