My goal is to conceal an id within a page and then reveal it once all the JavaScript has finished loading on the page. The JavaScript I am using to display the content again is:
$(document).ready(function() {
$("#HomePage")[0].style.visibility = "visible";
$('#HomePage').addClass('animated fadeIn');
$("#CategoryPage")[0].style.visibility = "visible";
$('#CategoryPage').addClass('animated fadeIn');
}
The CSS I am utilizing is as follows:
#HomePage { visibility:hidden; }
#CategoryPage { visibility:hidden; }
Here is the HTML for the home page:
<html>
<body>
<section id="HomePage" class="main-content">
...
</section>
</body>
</html>
And here is the HTML for the category page:
<html>
<body>
<section id="CategoryPage" class="main-content">
...
</section>
</body>
</html>
While this method successfully works for the home page, it seems that when I navigate to the category page, the JavaScript does not run. I am encountering an error on both pages, but I'm uncertain if this would affect it since it still runs on the home page - Uncaught TypeError: Cannot read property 'style' of undefined. Does anyone have any suggestions?