Animate Javascript show / hide button

Question

I'm building a site and in the header there is a mail icon. When you click the icon an input field and submit button appear so people can sign up for a newsletter. Is there a way to use width instead of using display:none and display:inline? So when you click the mail icon the input field is animated to slide out from the left rather than just instantly appear?

Here's the javascript code im using...

  <!--Show & Hide Script Start-->
<script language="JavaScript">
function setVisibility(id1) {
if(document.getElementById('bt1').value=='H'){
document.getElementById('bt1').value = 'S';
document.getElementById(id1).style.display = 'none';

}else{
document.getElementById('bt1').value = 'H';
document.getElementById(id1).style.display = 'inline';

}
}
</script>
<!--Show & Hide Script End-->

that code is oldschoooooool =D Read into some modern javascript. `language="Javascript"` looks like your sources are from the last century. — Christoph, Jul 11 '14 at 15:58

score 2 · Answer 1 · answered Jul 11 '14 at 16:04

Welcome to the wonderful world of jQuery!

Include this in your <head></head>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

The rework your function to this:

function setVisibility(id1) {
  if($('#bt1').val() == 'H'){
    $('#bt1').val('S');
    $('#' + id1).fadeOut();
  }
  else{
    $('#bt1').val('H');
    $('#' + id1).fadeIn();
  }
}

If you want, you can even take it a step further and set up your click events in jQuery as well...

$(function(){ //this part of the code wait until the DOM has loaded to execute
  $('[ID or Class selector for the button]').click(function(){
    setVisibility([string identifier for your element to hide/show]);
  });
});

Animate Javascript show / hide button

1 Answers1

Linked