We Keep Coding

Show/Hide on click with Javascript not working

I'm trying to use a basic on click to expand so when the user clicks on the title it shows more details but for some reason it isn't working.
Here is the page in question:
http://eftposnz.wpengine.com/integrated-eftpos/pos-vendors/
I'm not sure if the issue is with the code itself or if I'm not using it correctly.
Here is the code I'm using:
$(document).ready(function () {
$(".content").hide();
$(".show_hide").on("click", function () {
var txt = $(".content").is(':visible') ? 'Read More' : 'Read Less';
$(".show_hide").text(txt);
$(this).next('.content').slideToggle(50);
show_hide.preventDefault();
});
});
Any help would be greatly appreciated and please let me know if you need any further information.

I'm not familiar with WordPress, but it seems like the jQuery version it's using (or that you chose to use) won't let you use $ from the get-go.
As you can see on the jQuery version included on your page, jQuery.noConflict() is called at the end, making $ unavailable.
Here's what you can do, as an easy/safe workaround:
(function($) {
// your code using $ here
})(jQuery);

The site is currently using wordpress, so there is not "$" defined in the window context, instead of this, is only avalible via "jQuery".
A solution can be:
(function($){
$(function(){
/* Here your code */
});
})(jQuery);

Your jQuery is known in the window's scope as jQuery instead of $, which is a result of jQuery.noConflict().
Now you could create $ yourself by writing this above your code:
var $ = jQuery; // yuck!
But that would pollute your global scope!!
It would be cleaner to wrap your code into an anonymous function like this:
(function ($) {
// your code
}(jQuery));

jQuery Conflict, dropdown functionality of the sidebar doesn't work [duplicate]

I have a simple jQuery script in a WordPress plugin that is using a jQuery wrapper like this:
$(document).ready(function(){
// jQuery code is in here
});
I am calling this script from within the WordPress Dashboard and am loading it AFTER the jQuery framework has loaded.
When I check the page in Firebug I constantly keep receiving the error message:
TypeError: $ is not a function
$(document).ready(function(){
Should I maybe wrap the script in this function:
(function($){
// jQuery code is in here
})(jQuery);
I have had this error quite a few times and am not sure how to handle it.
Any help would be greatly appreciated.

By default when you enqueue jQuery in Wordpress you must use jQuery, and $ is not used (this is for compatibility with other libraries).
Your solution of wrapping it in function will work fine, or you can load jQuery some other way (but that's probably not a good idea in Wordpress).
If you must use document.ready, you can actually pass $ into the function call:
jQuery(function ($) { ...

This should fix it:
jQuery(document).ready(function($){
//you can now use $ as your jQuery object.
var body = $( 'body' );
});
Put simply, WordPress runs their own scripting before you can and they release the $ var so it won't collide with other libraries. This makes total sense, as WordPress is used for all kinds of web sites, apps, and of course, blogs.
From their documentation:
The jQuery library included with WordPress is set to the noConflict()
mode (see wp-includes/js/jquery/jquery.js). This is to prevent
compatibility problems with other JavaScript libraries that WordPress
can link.
In the noConflict() mode, the global $ shortcut for jQuery is not
available...

This solution worked for me
;(function($){
// your code
})(jQuery);
Move your code inside the closure and use $ instead of jQuery
I found the above solution in https://magento.stackexchange.com/questions/33348/uncaught-typeerror-undefined-is-not-a-function-when-using-a-jquery-plugin-in-ma
...after searching too much

var $=jQuery.noConflict();
$(document).ready(function(){
// jQuery code is in here
});
Credit to Ashwani Panwar and Cyssoo answer: https://stackoverflow.com/a/29341144/3010027
Reasons why in WordPress jQuery and not $ is used: https://pippinsplugins.com/why-loading-your-own-jquery-is-irresponsible/

You can avoid confliction like this
var jq=jQuery.noConflict();
jq(document).ready(function(){
alert("Hi this will not conflict now");
jq('selector').show();
});

Try this:
<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script>
jQuery.noConflict();
(function ($) {
function readyFn() {
// Set your code here!!
}
$(document).ready(readyFn);
})(jQuery);
</script>

Also, I find the good solution for use jQuery noConflict mode.
(function($){
$(document).ready(function(){
// write code here
});
// or also you can write jquery code like this
jQuery(document).ready(function(){
// write code here
});
})(jQuery);
I found this solution from here TryVary.com.

You have to pass $ in function()
<script>
jQuery(document).ready(function($){
// jQuery code is in here
});
</script>

replace $ sign with jQuery
like this:
jQuery(function(){
//your code here
});

Double check your jQuery references. It is possible that you are either referencing it more than once or you are calling your function too early (before jQuery is defined). You can try as mentioned in my comments and put any jQuery reference at the top of your file (in the head) and see if that helps.
If you use the encapsulation of jQuery it shouldn't help in this case. Please try it because I think it is prettier and more obvious, but if jQuery is not defined you will get the same errors.
In the end... jQuery is not currently defined.

Use
jQuery(document).
instead of
$(document).
or
Within the function, $ points to jQuery as you would expect
(function ($) {
$(document).
}(jQuery));

(function( $ ) {
"use strict";
$(function() {
//Your code here
});
}(jQuery));

What worked for me. The first library to import is the query library and right then call the jQuery.noConflict() method.
<head>
<script type="text/javascript" src="jquery.min.js"/>
<script>
var jq = jQuery.noConflict();
jq(document).ready(function(){
//.... your code here
});
</script>

<script>
var jq=jQuery.noConflict();
(function ($)
{
function nameoffunction()
{
// Set your code here!!
}
$(document).ready(readyFn);
})(jQuery);
now use jq in place of jQuery

You come across this issue when your function name and one of the id names in the file are same. just make sure all your id names in the file are unique.

You can use
jQuery(document).ready(function(){ ...... });
or
(function ($) { ...... }(jQuery));

wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )
If you are using jquery for frontend, you can achieve it by passing $deps as jquery

velocity.js: $ is not defined

I am getting started with velocity.js and I included the file like this:
<script src="velocity.js"/> </script>
and in the script part I wrote
window.onload = function(){
$("div").velocity({opacity:1});
}
The rest of the function is only the css for the div, so not very important.
The problem I have is that I always get the error code:
Uncaught ReferenceError: $ is not defined
If I use jQuery with .animate no such problem appears (but in the code above I only use velocity).

If you don't want to use jQuery, you cannot use $.
I've never used it before, but if this tutorial is right, you could do:
window.onload = function(){
var divs = document.getElementsByTagName("div");
divs.forEach(function(el) {
Velocity(el, {opacity:1});
});
}

I think you have an conflict with jQuery. Try .noConflict() to avoid it.
See: https://api.jquery.com/jquery.noconflict/
$j.noConflict();
jQuery( document ).ready(function( $j ) {
// Code that uses jQuery's $j can follow here.
});
Have you tried this?
Velocity(document.getElementById("dummy"), { opacity: 0.5 }, { duration: 1000 });

Toggleclass not working, altough should

This is pretty basic, still doesn't work... I'm trying to change the class of my button, which has the id "nav_list". I wrote the script:
var specialSection = document.getElementById("nav_list");
specialSection.onclick = function() {
alert("what");
$('#nav_list').toggleClass('active');
};
I get the "what" alert, but the class isn't toggled. What am I missing? Thanks in advance!

toggleClass is a jQuery method, for use it you must include jQuery in your page.
Like:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
At the moment if you check the console you must see an error like (demo: http://jsfiddle.net/IrvinDominin/GyaBY/):
ReferenceError: Can't find variable: $
Avoid mixing jQuery and javascript event binding so your code will look like:
$('#nav_list').click(function() {
alert("what");
$(this).toggleClass('active');
});
Demo: http://jsfiddle.net/IrvinDominin/GyaBY/2/

jQuery not rendering properly

I'm using this jQuery to render a text box onClick. But, It's not rendering... Also, on a side note I'm using Drupal 7. I have the jQuery in the Head tags of the html.php.
<script type="text/javascript">
$(document).ready(function() {
$("#front-background").hide();
$(window).load(function() {
$('#links-top-1').hover(function() {
$('#front-background').fadeIn(2000);
});
});
});
</script>

This may also be because of how Drupal handles compatibility with other JavaScript libraries.
You can wrap your jQuery function in:
(function ($) {
//your existing code
})(jQuery);
or if you're comfortable theming using the template.php file, you can add the JS through the function drupal_add_js().
See http://drupal.org/node/171213 for more details.

You dont need window load event if you are already using $(document).ready method. Try this.
$(document).ready(function() {
$("#front-background").hide();
$('#links-top-1').hover(function() {
$('#front-background').fadeIn(2000);
});
});

I didn't see any onClick functionality there. This should work:
CSS:
#front-background {
display:none;
}
JQuery hover replacement. Fade in on hover, fadeout on leave
$(function() {
$('#links-top-1').hover(function() {
$('#front-background').fadeIn(2000);
},function(){
$('#front-background').fadeOut(2000)
});
});