jQuery Toggle Opacity On Click Using CSS Animation

javascript, jquery

Solution

Option 1

If you want to just toggle it hidden/visible you could just do

$('#registerButton').on('click', function()
{
    $('#register').toggle();
});

Option 2

If you want to use CSS animations you can use `toggleClass` like this;

$('#registerButton').on('click', function()
{
    $('#register').toggleClass('show hide');
});

And then add your css selectors like this

.show
{
    display: block;
    height: 260px;
}

.hide
{
    display: none;
    height:0;
}

Option 3

Using if statements checking opacity

$('#registerButton').on('click', function()
{
  var register = $('#register');

  // register is not visible lets make it visible.
  if(register.css('opacity') === '0')
  {
    register.css({
      'opacity': '0.9',
      'height': '260px'
    });
  }
  else //We know the opacity is not 0 lets make it 0.
  {
    register.css({
      'opacity': '0',
      'height': '0'
    });
  }
});

See working fiddle of option 3 here http://jsfiddle.net/rnhV5/

Problem

I'm probably just retarded, but I can't seem to get this to work. All I'm trying to do is make it so when you click something (In this case, `#register`), it changes a few lines of css. I want to make it so when you click it once, it appears, then if you click it again, it will disappear. I wrote this, and when you first click it, it will show it, but when you click it again, it won't disappear. I just can't figure out what I'm doing wrong. XD Thank you for any help you can give :P My Javascript ``` $(document).ready(function () { $('#registerButton').click(function () { if ($("#register").css("opacity") === ".9") { $("#register").css({ "opacity": "0" }); $("#register").css({ "height": "0px" }); } if ($("#register").css("opacity") === "0") { $("#register").css({ "opacity": ".9" }); $("#register").css({ "height": "260px" }); } }); }); ``` EDIT: I'm trying to use it this way so I can make some nice looking `css animations`, so just using the `toggle function` wouldn't work :(

Original source