JQuery toggle Function

codeispoetry · February 12, 2021, 7:20am

<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;
}

Paul_Wilkins · February 12, 2021, 7:43am

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

https://jsfiddle.net/bnzsct7u/

codeispoetry · February 12, 2021, 7:43am

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.

codeispoetry · February 12, 2021, 7:58am

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 →