Javascript if else change css

Question

I was wonder if anyone can tell me why this isn’t working? It works just for once. I am trying to switch height of div with foundation's switch object. Also it switches perfectly when I click to #new tag. But that wasn't the idea.

var open = 0;
$('#newtopicbutton').click(function() {
  if (open === 0) {
    $('#new').css({
      'height': '440px',
      'color': 'white',
      'font-size': '44px'
    });
    open = 1;
  } else {
    if (open === 1) {
      $('#new').css({
        'height': '48px',
        'color': 'white',
        'font-size': '44px'
      });
      open = 0;
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="new" class="large-3 medium-3 small-3 columns" style="padding-top:10px;background:#2f2f2f;margin-top:20px;height:440px;color:white;font-weight:700;font-size:14px !important;">
  <div id="newtopicbutton" class="switch small">
    <input class="switch-input" style="background:red;" id="exampleSwitch" checked="true" type="checkbox" name="exampleSwitch">
    <label class="switch-paddle" for="exampleSwitch">
      <span class="show-for-sr float-right">NEW TOPICS</span>
    </label>
  </div>
</div>

It works just for once.

You could simplify this a lot by using [`.toggleClass()`](http://api.jquery.com/toggleclass/) and moving your CSS into a stylesheet class. — Blazemonger, Jul 19 '16 at 15:29
Agree with @Blazemonger, but if not then check this thread: http://stackoverflow.com/questions/9180087/how-to-handle-change-of-checkbox-using-jquery — Toby, Jul 19 '16 at 15:30
Did you know that the only CSS attribute you're changing with each click is the `height`? That works just fine. — Blazemonger, Jul 19 '16 at 15:32
what exactly it should do? the `#new` div minimizes/maximizes correcty — Valijon, Jul 19 '16 at 15:36
It seems that your first click is setting the same size it has by default on style tag (440px), so, first click will change nothing at all to the height. Maybe you should start with a style tag having height: 48px? — Aitor Calderon, Jul 19 '16 at 15:38
@Valijon i would guess the OP is wondering why the first click on `NEW TOPICS` (not the checkbox itself) will enlarge the box, but all following clicks on the text wouldn't have an effect (at leat that's the behaviour in chrome) — t.niese, Jul 19 '16 at 15:41
Thank you all for answers, @Valijon switch button should change it not div. When i click div area it switches too(http://puu.sh/q72Pj/ea21d8bbc9.png) I am pretty new with javascript. I just started. About css code; page was a demo. — Sezer Toker, Jul 19 '16 at 15:41
If you click on the label then the `click` even is fired twice. So your callback is invoked two times for each click on the `label` (see the duplicate question for more details). So on the first click it looks like it works, but is does, it immediately starts with you _second state_. You should use the `change` event instead. — t.niese, Jul 19 '16 at 15:47

score 2 · Accepted Answer · answered Jul 19 '16 at 15:40

you just need to listen of click event on the input button instead of it surrounding div

var open = 0;
$('#exampleSwitch').click(function() {
if (open===0) {
    $('#new').css({
        'height': '440px',
        'color': 'white',
        'font-size': '44px'
    });
 open=1;}
else{
 if (open===1) {
    $('#new').css({
        'height': '48px',
        'color': 'white',
        'font-size': '44px'
    });
 open=0;}
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="new" class="large-3 medium-3 small-3 columns" style="padding-top:10px;background:#2f2f2f;margin-top:20px;height:440px;color:white;font-weight:700;font-size:14px !important;">
  <div id="newtopicbutton" class="switch small">
    <input class="switch-input" style="background:red;" id="exampleSwitch" checked="true" type="checkbox" name="exampleSwitch">
    <label class="switch-paddle" for="exampleSwitch">
      <span class="show-for-sr float-right">NEW TOPICS</span>
    </label>
  </div>
</div>

but as mentioned in the comments it is better to do this with .toggleClass

Thanks it works perfectly. I felt dumb when i realised i listened div instead checkbox :( — Sezer Toker, Jul 19 '16 at 15:50
As a note: Because the purpose is to check if the `input` element changed, the correct event would be `change`. @SezerToker — t.niese, Jul 19 '16 at 15:51

score -1 · Answer 2 · answered Jul 19 '16 at 15:40

I revised your code a bit:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

<body>
<div id="new" class="large-3 medium-3 small-3 columns" style="padding-top:10px;background:#2f2f2f;margin-top:20px;height:440px;color:white;font-weight:700;font-size:14px !important;">
  <div id="newtopicbutton" class="switch small">
    <input class="switch-input" style="background:red;" id="exampleSwitch" checked="true" type="checkbox" name="exampleSwitch">
    <label class="switch-paddle" for="exampleSwitch">
      <span class="show-for-sr float-right">NEW TOPICS</span>
    </label>
  </div>
</div>
<style>
#newtopicbutton {
font-size: 14px;
}
</style>
<script>
var open = 1;
$('#newtopicbutton, .switch-paddle span').click(function() {
    if (open===0) {
        $('#new').css({
            'height': '440px',
            'color': 'white',
            'font-size': '44px'
        });
        open=1;
    }
    else {
        if (open===1) {
            $('#new').css({
            'height': '48px',
            'color': 'white',
            'font-size': '44px'
            });
        open=0;
        }
    }

    console.log(open);
});
</script>
</body>
</html>

Javascript if else change css

2 Answers2