How To Create A Toggled Search Area?

If you are looking for a way of adding a toggle search bar to a website then you are in the right place.

In this article, you will learn how to add a toggled search bar to your website that populates a search form onClick.

The toggled search function helps to search the entire website data easily and quickly. Website visitors can find out their desired information from the website effortlessly using this search bar.

Moreover, this feature will make your website more attractive and add immense value.

There are only three simple steps to create a toggled search bar on a website using HTML, CSS, JavaScript code. This function is responsive to all devices and supports all browsers.

Step 1: HTML Code

<div class="nav-srh">
	<div class="search-toggle">
		<button class="search-icon icon-search"><i class='bx bx-search-alt'></i></button>
		<button class="search-icon icon-close"><i class='bx bx-x'></i></button>
	</div>
	<div class="search-area">
		<form>
			<input type="text" class="src-input" id="search-terms" placeholder="Search here..." />
			<button type="submit" name="submit" value="Go" class="search-icon two"><i class='bx bx-search-alt'></i></button>
		</form>
	</div>
</div>

Step 2: CSS Code

.search-icon {
	font-size: 28px;
	color: $white-color;
	border: 0;
	outline: none;
	transition: $transition;
	background-color: $orange-color;
	padding: 0;
	height: 75px;
	padding-left: 22px;
	padding-right: 22px;
	
	i {
		line-height: 75px;
	}
	&:hover{
		background-color: $main-color;
	}
	&.two {
		padding: 0;
		height: auto;
		
		i {
			line-height: 30px;
		}
	}
}
.search-toggle .search-icon.icon-close {
	display: none;
}
.search-toggle.opened .search-icon.icon-search {
	display: none;
}
.search-toggle.opened .search-icon.icon-close {
	display: block;
}
.nav-srh {
	position: relative;
	display: inline-block;

	.search-area {
		position: absolute;
		right: 8px;
		bottom: -105px;
		z-index: 5;
		transition: $transition;
		max-height: 0;
		overflow: hidden;
		background-color: $white-color;

		.search-icon {
			vertical-align: middle;
			position: absolute;
			right: 30px;
			top: 28px;
			background-color: transparent;
			font-size: 20px;
			color: #515151;
			transition: $transition;

			&:hover {
				color: $main-color;
			}
		}
		.src-input {
			outline: none;
			padding-left: 20px;
			padding-right: 30px;
			margin: 0;
			width: 300px;
			background-color: #dddddd80;
			border: 1px solid #ddd;
			font-size: $all-size;
			height: 45px;
			border-radius: 0;
		}
	}
	.search-area.opened {
		max-height: 100px;
		padding: 20px 25px;
		box-shadow: 0px 0px 15px #dddddd80;
	}
}

Step 3: JavaScript Code

$('.search-toggle').addClass('closed');

$('.search-toggle .search-icon').click(function(e) {
	if ($('.search-toggle').hasClass('closed')) {
	$('.search-toggle').removeClass('closed').addClass('opened');
	$('.search-toggle, .search-area').addClass('opened');
	$('#search-terms').focus();
	} else {
	$('.search-toggle').removeClass('opened').addClass('closed');
	$('.search-toggle, .search-area').removeClass('opened');
	}
});

 If you’ve enjoyed this article please let us know your thoughts in the comment section below.

Stay tuned and enjoy learning!