w3school include HTML, javascript not working

Question

So, I recently used w3school include html, so that i dont have to copy-paste same div to all my pages.

First, i used it for header and footer, which uses some CSS styli

Answer 1

You need to delegate your events beacouse w3school script uses ajax and adds new items to the dom

$('body').on('click','#leftDrop1',function() {
  if ($('#sub1').css('display') == 'block') {

    $('#sub1').hide()

  } else {
    $("#sub1").show()
  }
})

$('body').on('click','#leftDrop2',function() {
  if ($('#sub2').css('display') == 'block') {

    $('#sub2').hide()

  } else {
    $("#sub2").show()
  }
})

Answer 2

Now w3.includeHTML from w3.js allows a callback after html is loaded.

w3.includeHTML(function() { 
  $('#leftDrop1').on('click', function() {
    if ($('#sub1').css('display') == 'block') {
      $('#sub1').hide()
    } else {
      $("#sub1").show()
    }
  })
  $('#leftDrop2').on('click', function() {
    if ($('#sub2').css('display') == 'block') {
      $('#sub2').hide()
    } else {
      $("#sub2").show()
    }
  })
});