toggling css with jquery

Question

I want to change css with only one onclick function

$('#hamburger').on('click',function(){

    $('nav').toggle(1000);

    $('.col-md-3').css('padding-bottom','30px');
        $('h5').toggle(1000);
    });

I want when I click again to show

 $('.col-md-3').css('padding-bottom','104px');

So first time when I click #hamburger I want my col-md-3 padding bottom 30px,and when I click again and close #hamburger I want my col-md-3 padding bottom should be 104px.

How to do that?

how to identify when the hamburger is open? there should be some distinguishing factor — gauravmuk, Jun 18 '17 at 17:45
Possible duplicate of [jQuery toggle CSS?](https://stackoverflow.com/questions/3337621/jquery-toggle-css) — Harpreet Singh, Jun 18 '17 at 17:47

score 0 · Answer 1 · answered Jun 18 '17 at 17:46

One dirty way:

$('#hamburger').on('click',function(){
 $('nav').toggle(1000);

 // check for existing css values
 if ($('.col-md-3').css('padding-bottom') === '30px') {
  $('.col-md-3').css('padding-bottom', '104px');
 } else {
  $('.col-md-3').css('padding-bottom', '30px');
 }

 $('h5').toggle(1000);
});

score 0 · Answer 2 · answered Jun 18 '17 at 17:47

Just grab the current padding of the element and set the new padding based on that - if it's 30px, set it to 104px and vice versa.

$('#hamburger').on('click',function(){
  $('nav').toggle(1000);
  $('h5').toggle(1000);

  var padding = $('.col-md-3').css('padding-bottom')
  $('.col-md-3').css(
    'padding-bottom', (padding === '30px')? '104px' : '30px'
  );
});

toggling css with jquery

2 Answers2