0

i have two pages index.html and header.html

index.html

<body>
  <div id="tpHeader"></div>
  <script>
    $(function(){
      $("#tpHeader").load("header.html");
    });
  </script>
</body>

header.html

<div id="con1">
content 1
</div>
<div id="con2">
content 2
</div>

so..when i view my file index.html in browser it looks like

<div id="tpHeader">
  <div id="con1">
    content 1
  </div>
  <div id="con2">
    content 2
  </div>
</div>

now i want to use some js or jquery in index.html to hide #con2 in other words.. i want to write some code in index.html , which makes the element having id="con2" hidden

i have tried

index.html

<body>
  <div id="tpHeader"></div>
  <script>
    $(function(){
      $("#tpHeader").load("header.html");
      $("#con2").hide(); // but this is not working 
    });
  </script>
</body>

also i have tried using

document.getElementById("con2").style.display = "none";

none of them are working ..pls help me

Ravi Soni
  • 953
  • 1
  • 7
  • 17

1 Answers1

1

Use .load( url [, data ] [, complete ] ) methods complete function

A callback function that is executed when the request completes.

Code

$("#tpHeader").load("header.html", function() {
    $("#con2").hide(); 
});
Satpal
  • 132,252
  • 13
  • 159
  • 168