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
– Christoph, Commented Jul 11, 2014 at 15:58

JRulle · Accepted Answer · 2014-07-11 16:04:22Z

2

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]);
  });
});

answered Jul 11, 2014 at 16:04

JRulle

7,5566 gold badges42 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Animate Javascript show / hide button

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related