jQuery Add css and remove it after click event

Question

Hy guys, I would like to know how remove css styles after click event,

In fact at the first click I add css and remove some other things but I would like at the second click get the same css code at the beginning.

$('#show').click(function (){
  $('.sub-menu').css('width', '185px');
  $('.sub-menu').css('-webkit-transform', 'none');
  $('.sub-menu').css('transform', 'none');

  // and second click 

  $('.sub-menu').css('width', '');
  $('.sub-menu').css('-webkit-transform', 'scale(0)');
  $('.sub-menu').css('transform', 'scale(0)');

})

I don't want use toggleclass method cuz I don't want touch the css file.

Thanks.

Serg Chernata · Accepted Answer · 2017-11-09 13:19:52Z

4

A very simple option is to keep some kind of boolean marker.

var applied = false;

$('#show').click(function() {

  if (!applied) {
  
    $('.sub-menu').css('width', '185px');
    $('.sub-menu').css('-webkit-transform', 'none');
    $('.sub-menu').css('transform', 'none');
    applied = true;

  } else { // and second click 

    $('.sub-menu').css('width', '');
    $('.sub-menu').css('-webkit-transform', 'scale(0)');
    $('.sub-menu').css('transform', 'scale(0)');
    applied = false;
    
  }

})

answered Nov 9, 2017 at 13:19

Serg Chernata

12.4k6 gold badges35 silver badges50 bronze badges

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

Comments

Faisal Umair · Accepted Answer · 2017-11-09 13:42:52Z

0

You mentioned that you don't want to touch the css file. How about you create a css rule using jQuery and append it to the head tag.

var rule = $('<style>.myclass{width:185px; -webkit-transform:none; transform:none;}</style>');

$('html > head').append(rule);

$('#show').on('click',function(){
    $('.sub-menu').toggleClass('myclass');
});

edited Nov 9, 2017 at 13:42

answered Nov 9, 2017 at 13:34

Faisal Umair

3912 silver badges5 bronze badges

Collectives™ on Stack Overflow

jQuery Add css and remove it after click event

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related