'How to fix "TypeError: $ is not a function" error in WordPress custom page?

I created custom WordPress page via plugin where I want to toggle on/off comments using this code

<script type="text/javascript">                 
  $("comment_switch").click(function () {
    $("comments").toggleClass("hidden");
  });
</script>

I placed it inside the <body> tag. To generate <head> tag I used standard WordPress function wp_head();. When I check the source code of the page I can see in head section <script src="http://10.1.1.6/wp-includes/js/jquery/jquery.js?ver=1.10.2" type="text/javascript"> which I thought would be enough to use jQuery.

Could someone help me to make the jQuery code work? The whole source code of the page could be found here

jqueryhtmlwordpress


Solution 1:[1]

you need to encapsulate your javascript in function that executes on DOM ready event

<script type="text/javascript">                 
 $(function () {
   $("comment_switch").click(function () {
    $("comments").toggleClass("hidden");
  });
});
</script>

Solution 2:[2]

    <script type="text/javascript">                 
 (function () { // 1) remove the "$"
   $(".comment_switch").click(function () { // 2) add "." if this a class or "#" // if it is an id
    $(".comments").toggleClass("hidden");
  });
});
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 DevZer0
Solution 2 hamza omar

Related Questions