if var > then div display: none

Question

I have a variable lineNum that increment when I click on h1

I am trying to make ' if ' make a div display:none , but I just cant type the if code right?

Here is the if JQuery line I am having trouble with below:

if (lineNum > 1) {blue-sun-div, display: none;}

thank you for your help : )

---

***EDIT: hello here is the jquery code I have made ( my first jquery coding project)

Two divs move across the screen when I click 'h1'and 'h2', 'var' also increments. When 'var' goes 1 or above: blue-sun-div should disappear.

I can make the blue-sun-div disapear if I refresh the browser but only whilst i manually enter 'var' =1 or more ,so I have the div-name correct, but it will not disappear when lineNum++ raises the var 'lineNum' past 1 automatically.

Do I need to re trigger the code at the end, after lineNum does its job? sorry if this does not make sense. its 4am here.

here is the code. thank you very much

$(document).ready(function() {

  var lineNum = 0;

$("h1").click(function() {
    $("#blue-sun-div, #red-sun-div").animate({
            "left": "+=200px"
    }, 1000);
  });

$("h2").click(function() {
    $("#blue-sun-div, #red-sun-div").animate({
            "left": "-=200px"
    }, 1000);
  });

lineNum++;

if(lineNum > 1) {
    $("#blue-sun-div").css({ display: "none" });
}

})

Answer 1

do you have access to jquery? or are you just using plain javascript?

the easiest way would be:

if(lineNum > 1)
{
   $('#blue-sun-div').hide();
}

this assumes that you have jquery setup already and that blue-sun-div is the id of the div ( <div id="blue-sun-div"> )

if it is the class ( <div class="blue-sun-div"> ) then the jquery above needs to change to $('.blue-sun-div').hide();

for plain javascript, the best way would be to create a hide function and call it in the onclick of the h1.

in your javascript:

function hideDiv(divId){
   document.getElementById(divId).style.display="none";
}

then in the html:

<h1 id="SomeID" onclick="hideDiv('blue-sun-div');">H1 TEXT</h1>

Answer 2

just do: if blue-sun-div is a classname

if(lineNum>1){
  $(".blue-sun-div").hide();
}

if blue-sun-div is an ID

if(lineNum>1){
  $("#blue-sun-div").hide();
}

Answer 3

To make an element have css display: none , you can use the following method:

Pure JavaScript:

if(lineNum > 1) {
    document.getElementById("blue-sun-div").style.display = "none";
}

With JQuery (I recommend this)

if(lineNum > 1) {
    $("#blue-sun-div").css({ display: "none" });
}

This is assuming you have a <div id="blue-sun-div"> ... .