JQuery toggle Function

JavaScript
1

<input class="clicksearch" type="search" aria-label="Search" autocomplete="off" name="search" placeholder="Search" required="" spellcheck="false" value="">

I was trying to add an additional class →

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
	$( ".clicksearch" ).click(function() {
		$(".clicksearch").toggleClass("clickexpand");
	});
</script>

But It doesn’t seem to be working →

.clickexpand {
  width: 300px;
}
2

I’ve tried it out myself and it works for me.

1 Like
3

Ok. Then there must be something else conflicting on an HTML template that I was trying to build. Will upload that on the live server soon. Thank you so much for the help.

1 Like
4

inside_a_form
inside_a_form1325×605 164 KB

That input element is enveloped inside a form with .recent-right class:

	.recent-right input {
		padding: 10px 0px;
		border: none;
		border-bottom: 2px solid #a3a3ab;
		font-size: 1.3rem;
		width: 150px;
	}

I think that the width is conflicting.

	width: 150px;

External GIF link →

1325×605 164 KB

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.