Change width of text input with button instead of focus-CodePudding

I have an input box that expands when it is clicked but I want to be able to use a button instead of focus to change the size.

I have tried changing the css with jquery but it does not work?

$('#q').css('width','100%');

Sample code to change with focus

input[name=q]{
  width:180px;     /* NEEDED */
  transition:0.3s; -webkit-transition: 0.3s;
}
input[name=q]:focus{
  width:320px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input id ="q" name="q" type="text">

Its probably simple but I am hitting a brick wall, thank you

CodePudding user response：

If you're looking to change the size of the input when you click the button, here's how it would work:

document.getElementById("button").onclick = function() {
  document.getElementById("q").style.width = "320px";
}

input[name=q]{
  width:180px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
}

<input id ="q" name="q" type="text">
<button id="button">Click here</button>

The JavaScript code above looks for a button click (using the onclick event) and then changes the size of the input whenever that happens.

CodePudding user response：

you can simply add styles like this
$(`#q`).css('width','320px')

but there is a better method
make a class with all the styles you need and use it for this element
I used toggleClass() here but there is also addClass() and removeClass()

You can use onclick to make the button execute a function

function changeq(){
  $(`#q`).toggleClass('big')
}

input[name=q]{
  width:180px;     /* NEEDED */
  transition:0.3s; -webkit-transition: 0.3s;
}

input.big{
  width:320px ;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input id ="q" name="q" type="text">
<button onclick="changeq()">change</button>