Make input box slide in from left or right

Question

here is my code: https://jsfiddle.net/hsf4yo5t/

HTML code:

<input type="button" id="my-button" value="Show text input">
<input type="text" id="my-input">

CSS code:

#my-input {
  visibility: hidden;
}

Javascript code:

document.getElementById('my-button').onclick = function() {
    document.getElementById('my-input').style.visibility = 'visible';
}

when I click the button, it shows. but how can i make it slide out using javascript OR jquery?

Answer 1

Here's a jQuery option selecting by input. (you can switch back to selecting by class)

The 'squeeze' at the end may be annoying.

fiddle

https://jsfiddle.net/Hastig/etfzt6fq/

$(".buttonNfield input[type='button']").click(function() {
	$(".buttonNfield input[type='text']").css({
  	'width': '70%',
    'opacity': '1'
  });
})

.buttonNfield {
  display: flex;
  width: 100%; 
}
.buttonNfield input[type="button"] {
  width: 30%;
  margin: 0 10px 0 0;
  cursor: pointer;
}
.buttonNfield input[type="text"] {
  width: 0%;
  overflow: hidden;
  margin: 0;
  padding: 5px;
  transition: width 1.3s ease;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttonNfield">
  <input type="button" value="Show text input">
  <input type="text" placeholder="type here">
</div>

---

Centered

This one expands from center. The submit button appears when the last empty field is focused on.

fiddle

https://jsfiddle.net/Hastig/rjab85rc/

$(".buttonNfield input[type='button']").click(function() {
	var pseudoThis = $(this).closest('.buttonNfield').find("input[type='text']");
	$(pseudoThis).show( 100, function() {
  	$(pseudoThis).css({
      'display': 'flex',
      'width': '70%',
      'marginLeft': '10px',
      'opacity': '1'
    });
  });
  $(pseudoThis).focus();
})

var totalFields = 0;
var remainingFields;

$(function() {
  $("input[type='text']").each(function() {
   	totalFields = totalFields + 1;
  })
})

$("input[type='button']").on("click", function() {
	// fly in total fields box
})

$("html").on("mouseover", function() {
	remainingFields = totalFields;
  $("input[type='text']").each(function() {
    if ($(this).val() != '') {
      remainingFields = remainingFields - 1;
    }
  })
  if (remainingFields > 0) {
  	$('.remaining').html(remainingFields + ' ' + 'fields remaining');
  } else {
  	$('.remaining').css('opacity', '0');
    // fly in submit button
    $("input[type='submit']").css({
    	'marginLeft': '0',
      'marginRight': '0'
      });
  }
})

$("input[type='text']").on("focus", function() {
	if (remainingFields < 2) {
    $("input[type='submit']").css({
    	'marginLeft': '0',
      'marginRight': '0'
    });
  }
})

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 20px;
  overflow: hidden;
  box-sizing: border-box;
}
form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%; 
  padding-top: 50px;
}
.buttonNfield {
  display: flex;
  justify-content: center;
  width: 100%; 
  margin: 15px 0;
}
.buttonNfield input[type="button"] {
  width: 30%;
  cursor: pointer;
}
.buttonNfield input[type="text"] {
  display: none;
  width: 0%;
  overflow: hidden;
  transition: width 0.5s ease;
  opacity: 1;
  box-sizing: border-box;
}

.submitNinfo {
  display: flex;
  justify-content: center;
  width: 100%;
}
input[type="submit"] {
  margin: 5px -100% 0px 100%;
  padding: 10px;
  font-size: 20px;
  color: hsla(0, 0%, 70%, 1);
  background-color: hsla(0, 0%, 20%, 1);
  border-style: solid;
  border-color: black;
  border-width: 1px;
  border-radius: 3px;
  cursor: pointer;
  transition: margin 0.6s, background 0.2s;
}
input[type="submit"]:hover {
  background-color: hsla(0, 0%, 0%, 1);
}
.remaining {
  position: fixed;
  top: 10px;
  left: 50%; transform: translateX(-50%);
  display: flex;
  justify-content: center;
  width: 100%;
  transition: opacity 1s;
  font-size: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="buttonNfield">
    <input type="button" value="Enter First Name">
    <input type="text" placeholder="type here">
  </div>
  <div class="buttonNfield">
    <input type="button" value="Enter Last Name">
    <input type="text" placeholder="type here">
  </div>
  <div class="submitNinfo">
    <input type="submit" value="submit form">
  </div>
  <div class="remaining"></div>
</form>

Answer 2

Here's a jQuery solution: It animates the opacity and the left parameter, which initially is set to a (negative) value so that the input field is off the screen (you have to use position: relative to make that possible):

$("#my-button").click(function() {
  $("#my-input").animate({
    'left': '0px',
    'opacity': '1'
  });
});

#my-input {
  position: relative;
  left: -300px;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="my-button" value="Show text input">
<input type="text" id="my-input">

Right to left would be:

$("#my-button").click(function() {
  $("#my-input").animate({
    'right': '0px',
    'opacity': '1'
  });
});

#my-input {
  position: relative;
  right: -1600px;
  opacity: 0;
}

body {
  overflow-x: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="my-button" value="Show text input">
<input type="text" id="my-input">

Answer 3

If you don't mind wrapping the input in an element, you can transition translateX() to make it slide out.

document.getElementById('my-button').onclick = function() {
	document.getElementById('my-input').classList.toggle('show');
}

span {
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}

#my-input {
  transform: translateX(-100%);
  opacity: 0;
  transition: opacity .25s, transform .25s;
}

#my-input.show {
  transform: translateX(0);
  opacity: 1;
}

<input type="button" id="my-button" value="Show text input">
<span class="span"><input type="text" id="my-input"></span>

You can also transition scaleX() without a wrapping element around the input, but it isn't really sliding as much as contracting/expanding from the left side.

document.getElementById('my-button').onclick = function() {
	document.getElementById('my-input').classList.toggle('show');
}

#my-input {
  transform: scaleX(0);
  opacity: 0;
  transition: opacity .25s, transform .25s;
  transform-origin: 0 0;
}

#my-input.show {
  transform: scaleX(1);
  opacity: 1;
}

<input type="button" id="my-button" value="Show text input">
<input type="text" id="my-input">