We Keep Coding

How to use jQuery to switch divs on and off

Okay so I am looking at this website, http://codetunnel.net/, and I saw that it only used one page, but jQuery was used to display different divs, therefore making it feel like a multipage website. I tried using the jQuery in my codepen, but it never worked. Can someone help me understand how the jQuery works, and how I can implement it into my own sites? The jQuery looks like this:
$(function(){
$("#nav-home").click(function(){
$("#home").show();
$("#projects").hide();
$("#contact").hide();
$(".selected").removeClass("selected");
$("#nav-home").addClass("selected");
});
$("#nav-projects").click(function(){
$("#home").hide();
$("#projects").show();
$("#contact").hide();
$(".selected").removeClass("selected");
$("#nav-projects").addClass("selected");
});
$("#nav-contact").click(function(){
$("#home").hide();
$("#projects").hide();
$("#contact").show();
$(".selected").removeClass("selected");
$("#nav-contact").addClass("selected");
});
});
https://codepen.io/orchtechnerd/pen/dRzGZV // my codepen

Actually, your code works.
Unfortunately, the visible div is covered by the #nav.
So the only thing you should do is add a "padding-top: 4em" style to the body.

Auto Loading HTML in a Div with Javascript

I'm looking to use this code in JS Fiddle http://jsfiddle.net/syE7s/ to load some content into a div.
It's exactly what I need but I want link A to auto load when the page loads. My knowledge of Javascript is fairly minimal so if someone could get it working in jsfiddle I would be very greatful.
I've tried googling everything but I just can't seem to make it work.
It is essential I use the HTML as the links I use parse tokens that use {} to identify them as tokens but it obviously gets confused with Javascript when they are sat together.
enter code here
thanks

Here is a working JS Fiddle, I added a function to load the first link :
function launch() {
var link = $('#A').attr("href");
$('#target').load(link);
}
launch();
http://jsfiddle.net/dhmLjme6/

You can add just one line to your javascript.
It will look like this (line 3):
$(document).ready(function(){
$('#target').load($('.trigger').attr("href"));
$('.trigger').click(function(e){
e.preventDefault();
var link = $(this).attr("href");
$('#target').load(link);
});
});

Jquery doesnt work on payment gateways woocommerce

I want to hide a div when an option is selected:
jQuery(document).ready(function(){
if (jQuery('#Plaats').val() == "option_a") {
jQuery(".payment_method_cod").hide();
}
});
On this example, $payment_method_cod doesn't hide but if i change it to another div ID ( for example, #payment ) it works!
I hope someone can help me.
Thanks in advance!

There is a chance that other code might run which will result in not hiding the div you wanted. So what i would suggest is run this code the bottom of the site.
You can hook this code to the footer of the site using wp_footer hook
Comment or ask me if you have any doubts.
After Inspecting Questioner site.
Actually it is class not id. Please check it well. So the code should be follows
jQuery('.payment_method_cod').hide();
Whole code is
jQuery(document).ready(function(){
if (jQuery('#Plaats').val() == "option_a") {
jQuery('.payment_method_cod').hide();
}
});

I think the script loaded to quick because the payment part of woocommerce is also done with jQuery. After adding in the setTimeout() function it worked!

jQuery .change not working in WooCommerce

I am trying to do something very simple. If you go to http://cutecuttingboards.com/product/apple/, I simply want to hide the "From:" price after the user choose a size in the drop down menu. I am trying the code below, which is working fine in Fiddle but not on the live site:
jQuery('#size').on('change', function(){
jQuery('p.price').hide();
});
Here is the fiddle with unformatted code: http://jsfiddle.net/anneber/U2Mat/
Any help is much appreciated!
Anne

i know it's kind of late but.. in case someone else is having the same problem, this should do the trick:
jQuery(document).ready(function($) {
$(document).on("change", ".variations #size", function() {
$('p.price').hide();
});
});

If I copy/paste your code above into web inspector and then change the selection it works, so most likely, the code is either not in the page, not being run, or being run before the related elements have been loaded into the DOM.

There is an error in your cutecutb.js file the Unterminated comment. i.e you are not terminating the comment
There is no "*/" sign.
EDIT :
Now another reason in add-to-cart-variation.min.js there is already an onchange event of dropdown
You can see you "#size" element is inside ".variations" class

jQuery .slideDown executes twice instead of once

I'm new to jquery and bumped into a problem i can't fix
I want that on pageload my content is sliding down so i use the next code:
$(document).ready(function () {
$("#content").hide();
$("#content").slideDown(1000);
});
when i load the page the content slides down narmally, than the content gets hidden and slides down again.
When i go to the css and do #content{display: none;} instead of $("#content").hide(); everything works fine. (can't use this for browsers without js)
Does anyone know the cause of this?
Thanks!

You are saying that everything works fine while using css #content{display: none;}
than i offer u to use Jquery .css() method( http://api.jquery.com/css/ )..
u can use it like :
$(document).ready(function () {
$("#content").css( { 'display' : 'none' } );
$("#content").slideDown(1000);
});
sipmle as that.
and i also agree with #Billy Moon , it can be a browser specific bug or u may be calling a page refresh command, somewhere within ur code.

Your code has no problem inside. It's somewhere else in your code.
isn't that function call in some function that is called twice?