Remove / add class when based on toggle

Question

I have a column that slides to the left on a click function. I then add the class of w to the container to change its width once the column slides out. What I am trying to do is add the class of e when it slides back in and then remove the class of w by wrapping it in the toggle functions, but the container still contains the class of w and won't add the class of e. Thoughts?

FIDDLE: http://jsfiddle.net/QDUQk/1926/

.container {
  border: 1px solid #000;
  width: 200px;
}

.container.e {
  width: 80%;
}

.container.w {
  width: 100%;
}

<div class="togl">Menu</div>
<div class="col">
  SLIDE ME SLIDE ME PLX PLX
</div>
<div class="container">
</div>

$('.togl').click(function() {
  if ($('.container').is(':visible')) {
    $('.col').toggle('slide', {
      direction: 'left'
    }, 1000, function() {
      $('.container').addClass('w');
      $('.container').removeClass('e');
    });
  } else {
    $('.col').toggle('slide', {
      direction: 'left'
    }, 1000, function() {
      $(".container").removeClass('w');
      $(".container").addClass('e')
    });
  }
});

guest271314 · Accepted Answer · 2016-11-12 05:52:01Z

1

The visibility of .container does not change from true. Check for "w" className at .is()

$('.togl').click(function() {
  if (!$('.container').is('.w')) {
    $('.col').toggle('slide', {
      direction: 'left'
    }, 1000, function() {
      $('.container').addClass('w');
      $('.container').removeClass('e');
    });
  } else {
    $('.col').toggle('slide', {
      direction: 'left'
    }, 1000, function() {
      $(".container").removeClass('w');
      $(".container").addClass('e')
    });
  }
});

jsfiddle http://jsfiddle.net/QDUQk/1927/

answered Nov 12, 2016 at 5:52

guest271314

1

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

2 Comments

guest271314 Over a year ago

@coding_question See :visible Selector "Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero. Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout." jsfiddle.net/QDUQk/1928

RizkiDPrast Over a year ago

consider using hasClass() instead

ScanQR · Accepted Answer · 2016-11-12 06:11:10Z

0

Your container visibility does not change on click. Try following,

$('.togl').click(function() {
   if ($('.container').hasClass('e')) {
      $('.col').toggle('slide', {
                      direction: 'left'
      }, 1000, function() {
    $('.container').addClass('w');
    $('.container').removeClass('e');
  });
} else {
$('.col').toggle('slide', {
  direction: 'left'
}, 1000, function() {
  $(".container").removeClass('w');
  $(".container").addClass('e')
});
}});

answered Nov 12, 2016 at 6:11

ScanQR

3,8202 gold badges16 silver badges34 bronze badges

Collectives™ on Stack Overflow

Remove / add class when based on toggle

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related