Javascript if else change css [duplicate]

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() and moving your CSS into a stylesheet class. — Blazemonger
– Blazemonger, Commented Jul 19, 2016 at 15:29
Agree with @Blazemonger, but if not then check this thread: stackoverflow.com/questions/9180087/… — Toby
– Toby, Commented Jul 19, 2016 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
– Blazemonger, Commented Jul 19, 2016 at 15:32
what exactly it should do? the #new div minimizes/maximizes correcty — Valijon
– Valijon, Commented Jul 19, 2016 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
– Aitor Calderon, Commented Jul 19, 2016 at 15:38

Amir Hoseinian · Accepted Answer · 2016-07-19 15:40:52Z

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 :(
As a note: Because the purpose is to check if the input element changed, the correct event would be change. @SezerToker

GunWanderer · Accepted Answer · 2016-07-19 15:40:07Z

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>

Collectives™ on Stack Overflow

Javascript if else change css [duplicate]

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related