jQuery “Uncaught TypeError: undefined is not a function” when using fadeIn();

Question

I am new to JS and I am writing a basic jQuery-rich webpage with fade-in/fade-out for each page in the same document (using the same div element with separate IDs). Anyway, when I try to fade in the current page, I receive the error "Uncaught TypeError: undefined is not a function", I've had a search around online but couldn't find a solution.

The HTML is loaded before the script and the full jQuery library has been included in the header of the page.

The div element I am targeting has "display: none;" set in my CSS.

HTML

<div class="page_content" id="page_home">
Content removed
</div>

JS:

<script>

var cp = "page_home";
var tp = document.getElementById(cp);
tp.fadeIn('slow');

</script>

Anyone experienced anything similar and have a solution? I'm sure it's something simple, since my code is anyway...

Answer 1

tp is a plain javascript object and it does not has a function called .fadeIn()

Try to wrap it inside $() to make it a jquery object then do,

$(tp).fadeIn('slow');

or better use jquery's id selector to grab the element,

$("#page_home").fadeIn('slow');

Answer 2

Because tp is not a jquery object, it will not have the methods related to jquery.

Use,

$("#page_home").fadeIn('slow');