t-andi
t-andi

Reputation: 1

Toggle button with add and remove css

How to make toggle button with add and remove or replace css, this my code

$(document).ready(function(){

  $("#wrapper").click( function() {
    if ($('.toggle').css({top: '-1000px'})) {
      $('.toggle').css({top: '0px'});
    } else {
      $('.toggle').css({top: '-1000px'})
    }
    // my toggle button is animate hamburger to 'x' button
    $(".icon").toggleClass("close");
  });

})

Upvotes: 0

Views: 451

Answers (1)

poorly-written-code
poorly-written-code

Reputation: 1073

Your if statement is setting the $('.toggle') position, not getting it. You would want something like this:

if ($('.toggle').css('top') === '-1000px') { }

But you could simplify this even further with a ternary and some jQuery chaining:

$("#wrapper").on('click', function() {
  $('.toggle').css('top', $('.icon').toggleClass('close').hasClass('close') ? '-1000px' : '0px');
});

Upvotes: 2

Related Questions