javascript - Toggle Width of a Div Using Jquery -

i want toggle width of div using button. i'm not sure how use if-else statement check css, , i'm not clear on syntax.

let's assume have following:

css

.firstdiv {     border:1px solid black;     padding:10px;     width: 80px;     margin:5px;     display:relative; } 

html

<button id="boxtoggle">change width</button> <div class="firstdiv">     <p>this paragraph.</p> </div> 

javascript

$("#boxtoggle").click(function () {     $("#firstdiv").css("width", "120px"); }); 

right now, javascript change width once , not go back, still isn't working , i'm assuming syntax wrong.

a jsfiddle of above can found @ link.

https://jsfiddle.net/647ye1pk/

any appreciated.

you can use toggleclass achieve effect

//i need "if-else" statement in here, i'm not sure how use css condition  $("#boxtoggle").click(function () {      $(".firstdiv").toggleclass('largewidth');  });

.firstdiv {      border:1px solid black;      padding:10px;      width: 80px;      margin:5px;      display:relative;  }    .largewidth{      width:120px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  <button id="boxtoggle">change width</button>  <div class="firstdiv">      <p>this paragraph.</p>  </div>

and if don't want use toggleclass method try

//i need "if-else" statement in here, i'm not sure how use css condition  click = 0;  $("#boxtoggle").click(function () {      if (click == 0) {          $(".firstdiv").css("width", "120px");          click = 1;      } else {          $(".firstdiv").css("width", "80px");          click = 0;      }  });

.firstdiv {      border:1px solid black;      padding:10px;      width: 80px;      margin:5px;      display:relative;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>  <button id="boxtoggle">change width</button>  <div class="firstdiv">      <p>this paragraph.</p>  </div>