$(document).ready(function(){ var submitIcon = $('.searchbar-icon'); var inputBox = $('.searchbar-input'); var searchbar = $('.searchbar'); var isOpen = false; submitIcon.click(function(){ if(isOpen == false){ searchbar.addClass('searchbar-open'); inputBox.focus(); isOpen = true; } else { searchbar.removeClass('searchbar-open'); inputBox.focusout(); isOpen = false; } }); submitIcon.mouseup(function(){ return false; }); searchbar.mouseup(function(){ return false; }); $(document).mouseup(function(){ if(isOpen == true){ $('.searchbar-icon').css('display','block'); submitIcon.click(); } }); }); function buttonUp(){ var inputVal = $('.searchbar-input').val(); inputVal = $.trim(inputVal).length; if( inputVal !== 0){ $('.searchbar-icon').css('display','none'); } else { $('.searchbar-input').val(''); $('.searchbar-icon').css('display','block'); } }
Script Copy url Copy url with Tag
Bootstrap CSS https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css copy copy script
Bootstrap JS https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js copy copy script
Icons https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css copy copy script
Jquery https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js copy copy script

Related Snippets

view all snippets
About this snippet

Bootstrap 4 expandable search bar snippet is created by Ask SNB using Bootstrap 4.3.1, Javascript 3.2.1. This snippet is free and open source hence you can use it in your project.Bootstrap 4 expandable search bar snippet example is best for Bootstrap search, responsive.A great starter for your new awesome project with 1000+ Font Awesome Icons, 4000+ Material Design Icons and Material Design Colors at BBBootstrap.com.

Join BBBootstrap community

Contribute an awesome snippet to help other developer and designers