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 :(

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 :(

• javascript
• jquery

• Have you used console.log() or the debugger to see what actual value is returned from .css() for the opacity? – Pointy Commented Feb 20, 2014 at 20:15
• .css() returns the value as string but with a leading zero 0.9. BTW, it may return something like "0.8999999761581421" – Hashem Qolami Commented Feb 20, 2014 at 20:16
• 2 I'm assuming you're using jQuery, so why not just use .toggle()? Much easier IMO... – Dryden Long Commented Feb 20, 2014 at 20:16
• take a look if its not entering in both ifs and keeping visible – André Junges Commented Feb 20, 2014 at 20:17

1 Answer 1

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/rnhV5/