We Keep Coding

jQuery toggleClass() not working

I was just wondering how I would go about making something toggle on and off in jQuery. What I want to do is have the download dropdown menu toggle when somebody clicks on "download" The class works with the hover effect, but won't work for the click effect for some reason! Any help would be awesome!
JSFiddle: https://jsfiddle.net/830f119e/1/
<div class="navigation">
<div class="nav">
<div class="logo">
ZeteticRSPS
</div>
<ul>
<li>Forum</li>
<li>Store</li>
<li class="download-dropdown">
Download<i class="fa fa-caret-right nav-icon" aria-hidden="true"></i>
<div class="dropdown-content">
Mediafire
Direct Download
</div>
</li>
<li>Vote</li>
</ul>
</div>
jQuery:
$( "download-dropdown" ).click(function() {
$( this ).toggleClass( "download-dropdown-toggle" );
});

Try following code.
$( ".download-dropdown a" ).click(function() {
$( this ).parent().find('.dropdown-content').slideToggle();
});
Working Fiddle.
You haven't chosen jQuery in JSFiddle.

Show/hide jQuery menu click functions

I have the following code for my menu, the trouble is I want it to hide/close as soon as I click on one of the options, instead of closing at the X button:
THIS IS THE HTML
MENU
<div class="mobilenav">
<li>HOME</li>
<li>SERVICES</li>
<li>WORK</li>
<li>TALK</li>
</div>
ICON
<a href="javascript:void(0)" class="icon">
<div class="MENU">
<div class="menui top-menu"></div>
<div class="menui mid-menu"></div>
<div class="menui bottom-menu"></div>
</div>
</a>
AND JS
$(document).ready(function () {
$(".icon").click(function () {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});

Try this:
$( ".icon" ).bind( "click", function() {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
This will bind the click function to the class. Also a side-note watch where you place your scripts. From personal experience I've had best results putting all js code (inline and external) right before the tag (even when using document.ready()) but this is probably just personal preference.
DOCUMENTATION FOR BIND

On click highlight the tab and display the content

currently I'm trying like if I click on the tab it will change color instead of the standard color I set.How do I go about doing it because I'm using the toggle() function.
Currently I'm stuck at here.
$("li").click(function(){
$(this).css('background-color',"#6F0")
})
http://jsfiddle.net/eMLTB/112

Hide all .tabContent elements on page load and show them on click of li.
Write:
JS:
$("li").click(function () {
$($(this).find("a").attr("href")).toggle();
$(this).toggleClass("active");
});
CSS:
.active {
background-color:#6F0;
}
.tabContent {
display:none;
}
DEMO here.

Check the line of script where i placed a comment, I think after adding this solves your problem.
<div id="container">
<nav id="tabs">
<ul id ="ta" class="nav">
<li id="a">0</li>
<li id="b">5</li>
<li id="c">10</li>
</ul>
<div class="tabContent" id="tabs-1" >
<h2>Testing1</h2>
</div>
<div class="tabContent" id="tabs-2">
<h2>Testing2</h2>
</div>
<div class="tabContent" id="tabs-3">
<h2>Testing3</h2>
</div>
</nav>
And in your Script
var i;
$("li").each(
function(){
$(this).click(
function(){
i = $(this).find("a").attr("href");
$(i).toggle();
}
);
}
);
$("li").click(function(){
$('li').css('background-color',"#fff");//------>I set it #fff , you Can Put here your standard color code
$(this).css('background-color',"#6F0")
})

First, put the class attribute for <li> tag, example :
<ul id ="ta" class="nav">
<li id="a" class="navi">0</li>
<li id="b" class="navi">5</li>
<li id="c" class="navi">10</li>
</ul>
next, make your code like this :
$("li").click(function(){
$(".navi").css('background-color', "");
$(this).css('background-color', "#6F0");
});

I would suggest using the .toogleClass() method.
It is similar like .toogle() but better for CSS manipulation.
First create class in your CSS that will represent your color and then toogle that class.
http://api.jquery.com/toggleClass/

jQuery effect not working in Wordpress template file?

I have my template file for home page, Home-template.php, and in it I have a sliding menu html.
This is my script for sliding menu:
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("fast");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("fast");
});
$(".toggle a").click(function () {
$(".toggle a").toggle();
});
e.preventDefault();
});
and both jquery and this script are loaded on the page but the slide effect doesnt work, its only poping up and down without effect.
Any help?
here is html code:
<div id="panel">
<nav id="main-menu">
<ul>
<li>Home</li>
<li>About me</li>
</ul>
</nav>
</div>
<div class="toggle"><a id="close" style="display: none;position: absolute;right:5px;top:5px;" class="close" href="#"></a></div>
<div class="toggle" style="position: absolute;right:10px;top:10px;"><a id="open" class="open" href="#"></a></div>
here is a link of a page:
http://pavlovic.com/about-me/

Well for one the e is not defined and secondly I'm not sure how you are including your js so
you should read this: http://wp.tutsplus.com/articles/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins/

try the following code which works for me
$(this).effect('slide', { direction: 'down'}, 500);
for the slide effect to work in wordpress along with jquery file the jquery-effects-core and jquery-effects-slide has to be also loaded.
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-effects-slide');
this code also works:
$('#test').effect( "slide", "right" );

jQuery .show & .hide not working

I am currently working on building a small menu that will change divs based upon which one it clicked. So if one is clicked it will show the div associated with it and hide the others, ect. But I cannot get it to work, nor can I figure out why. Any help would be appreciated. Thanks.
Below is my code. I've clipped out the content as there was a lot of it.
<script type="text/javascript">
$('.mopHeader').click(function() {
$('#raid-progress-mop').show();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.cataHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').show();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.wotlkHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').show();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.tbcHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').show();
$('#raid-progress-vanilla').hide();
});
$('.vanillaHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').show();
});
</script>
<span class="h4">Raid Progress <span class="mopHeader">MoP</span> <span class="cataHeader">Cata</span> <span class="wotlkHeader">WotLK</span> <span class="tbcHeader">TBC</span> <span class="vanillaHeader">WoW</span></span>
<div id="raid-progress-mop">
<ul id="raid-mop">
<li>Content A</li>
</ul>
</div>
<div id="raid-progress-cata">
<ul id="raid-cata">
<li>Content B</li>
</ul>
</div>
<div id="raid-progress-wotlk">
<ul id="raid-wotlk">
<li>Content C</li>
</ul>
</div>
<div id="raid-progress-tbc">
<ul id="raid-tbc">
<li>Content D</li>
</ul>
</div>
<div id="raid-progress-vanilla">
<ul id="raid-vanilla">
<li>Content E</li>
</ul>
</div>

Wrap your code in:
$(function(){ ... });
...which is the short form of:
$(document).ready(function(){ ... });
Cheers

You need to put the script underneath your markup. Either that, or put it inside document.ready callback:
$(document).ready(function() {
// code here
});
The problem is that when the script appears above the markup, it will execute before the HTML is loaded, and so the browser won't yet know about raid-progress-mop, etc.

How about doing that a little more dynamically inside a ready() function :
<script type="text/javascript">
$(function() {
$('[class$="Header"]').on('click', function() {
var myClass = $(this).attr('class').replace('Header', '');
$('[id^="raid-progress"]').hide();
$('#raid-progress-' + myClass).show();
});
});
</script>

jsBin demo
Wrap your code into a ready finction and this code I wrote is all you need:
$(function(){
$('span[class$="Header"]').click(function(){
var classNameSpecific = $(this).attr('class').split('Header')[0];
$('div[id^="raid-progress-"]').hide();
$('#raid-progress-'+classNameSpecific).show();
});
});
Explanation:
$('span[class$="Header"]') = target any span element which class ends with Header
Now just attach a click handler to all that spans.
Than, to hide all your div elements do:
$('div[id^="raid-progress-"]').hide(); = will hide any div which id starts with raid-progress-
and than you just need to target the div that contains the magic word:
$('#raid-progress-'+classNameSpecific).show();

$('.mopHeader') isn't defined yet. wrap your script with $(function(){...})