jquery - Drop down choice slides textbox to the right making it required, and undoing if other option is chosen -

I'm trying to figure out how I will look and hide and require fields or dropdowns I can not use jQuery on the basis

So I have a drop like this:

What am I trying to do, when the second is selected from the dropdown, I want other textbox (# other 1) to slide to the right and need that textbox A make.

But if any other option is selected from the dropdown then I want to slide it back and no longer want to do the text box.

I can not understand the correct way to write this JavaScript so that any help greatly appreciated!

  $ (document) .on ('change', '#boatfuel', function () {var other1 = $ ('# other1'); var boatFuelOther = $ ("# boatFuelOther" ) If ($ (this) .val () === 'other') {boatFuelOt her.slideRight (); other1.prop ('required', true);} other {nafeel other goldlight (); hide (); Other1.prop ('required', false);}});  

  & lt; Script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> & Lt; Div class = "clearfix" & gt; & Lt; Label = "boatfuel" & gt; Fuel: & lt; / Label & gt; & Lt; Select Name = "NAFFUIL" id = "NAFUFUL" is required & gt; & Lt; Option value = "" selected = "selected" & gt; Select Fuel & lt; / Option & gt; & Lt; Option value = "gas" & gt; Gas & lt; / Options & gt; & Lt; Option value = "diesel" & gt; Diesel & lt; / Options & gt; & Lt; Option value = "Electric" & gt; Electric & lt; / Options & gt; & Lt; Option value = "Other" & gt; Other & lt; / Options & gt; & Lt; / Select & gt; & Lt; / Div & gt; & Lt; Div id = "boatFuelOther" style = "display: none" & gt; & Lt; Label = "other 1" & gt; Other: & lt; / Label & gt; & Lt; Input type = "text" name = "other 1" id = "other 1" value = "" /> & Lt; / Div & gt;  

I can hide it and work with show options but I am actually trying to figure it out Slide Out Options

Your best bet is to show and hide only:
< / P>

Otherwise I have a problem when I slide right and then to hide it, again to slide it again, if the user is running back and forth. Using the code given below:

  $ (this). Show ("slide", {direction: "right"}, 1000); $ (This). Side ("slide", {direction: "left"}, 1000); 
 
 
 
  & lt; Script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> & Lt; Div class = "clearfix" & gt; & Lt; Label = "boatfuel" & gt; Fuel: & lt; / Label & gt; & Lt; Select Name = "NAFFUIL" id = "NAFUFUL" is required & gt; & Lt; Option value = "" selected = "selected" & gt; Select Fuel & lt; / Option & gt; & Lt; Option value = "gas" & gt; Gas & lt; / Options & gt; & Lt; Option value = "diesel" & gt; Diesel & lt; / Options & gt; & Lt; Option value = "Electric" & gt; Electric & lt; / Options & gt; & Lt; Option value = "Other" & gt; Other & lt; / Options & gt; & Lt; / Select & gt; & Lt; Label = "other 1" style = "display: none" & gt; Other: & lt; / Label & gt; & Lt; Input style = "display: none" type = "text" name = "other 1" id = "other 1" value = "" /> & Lt; / Div & gt;