Develop Reference

How to set active class to multiple tabs in one page onclick?

I have multiple tabs in one page and having trouble in setting up an active class to the selected menu. It's working great if I only have one set of tab. If I click on the first tab menu, the 2nd tab menu will lose its active class. Also the fade in effect is not workin. Please help. thank you. Fiddle here.
$(".tabs a").click(function() {
$(".tabs a").parent().removeClass("active");
$(this).parent().addClass("active").fadeIn('slow');
});

Do it like this
$(".tabs a").click(function(e) {
e.preventDefault();
var p = $(this).closest('.tabs');
var i = '#'+$(this).attr('data-tab');
$(this).closest('ul').find('li').removeClass("active");
$(this).parent().addClass('active');
$(p).find('.tabInner div').hide();
$(p).find(i).fadeIn('slow');
});
JFIDDLE EXAMPLE

Try this to fix the selection of the tabs:
$(".tabs a").click(function () {
$(this).closest('ul').find('li').removeClass("active");
$(this).parent().addClass("active").fadeIn('slow');
$(this).closest('ul').next(".tabInner").find("div").eq($(this).parent().index()).hide().fadeIn('slow');
});
jsFiddle example

jQuery remove class after second click

I have my own drop down navigation working, so when a user clicks on one of the links a page overlay will appear. I just need when they click again the page overlay removes.
Here is my code to add the overlay
$('#nav li a').on('click', function(){
$('#page-overlay').addClass('active').siblings().removeClass('active');
});
And a working DEMO is here - http://dsm.fishtankcreative.co.uk/
I just need help for when a user clicks off the navigation the page overlay class disappear.
Thanks in advanced.

Use toggleClass()
$('#nav li a').on('click', function(){
$('#page-overlay').toggleClass('active').siblings().removeClass('active');
});
Note: I don't think there is a need to use .siblings().removeClass('active'), as you are not adding the active class to any other elements

Animate existing drop down menu on click

This is the HTML
<header>
<a class="show-menu">Menu</a>
<nav>
<a>anchor1</a>
<a>anchor2</a>
<a>anchor3</a>
</nav>
</header>
The CSS currently hides the nav anchors until the button is clicked, then the jquery toggles the class attribute to change display:none to display:block.
This is the current JS which successfully displays the list when Menu is clicked, but I'm trying to animate it, so that when the button is clicked the list will slide into position.
$(function() {
$('a.show-menu').click(function() {
$('header nav').toggleClass('active');
});
});

How about jQuery Slide Toggle?
$(function() {
$('a.show-menu').click(function() {
$('header nav').slideToggle();
});
});
http://jsfiddle.net/5FZmd/

$(function() {
$('a.show-menu').click(function() {
$('header nav').slideToggle(function(){$(this).toggleClass('active')});
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^and toggle your class if you want
//or can you use simple slideToggle();
});
});
reference slideToggle()

jQuery UI extends the jQuery native toggleClass to take second optional parameter: duration
toggleClass( class, [duration] )
Documentation.

How would I trigger a javascript responsive menu to hide on click?

I'm using the following JS to show and hive a responsive-specific menu. Basically, when an h4 is clicked, a list with my my within #secondary-navigation slides down. I'm using this menu on a page with page anchors, so I'd like the menu to slideUp when one of the menu items is clicked. How would I go about accomplishing this with my code below? Thanks for any help.
<script>
(function($) {
$(function() {
var header = $('h4', '#secondary-navigation');
header.click(function() {
if($(this).next().is(':hidden')) {
$(this).next().slideDown('fast');
} else {
$(this).next().slideUp('fast');
}
});
});
})(jQuery);
</script><!-- end mobile nav -->

Edit: I misread your question at first. You need to add a second function that triggers when one of the menu children is clicked. That's a separate event.
Assuming your menu items are wrapped in a div or ul with an id of #menu:
$('#menu a').click(function() {
$('#menu').slideUp('fast');
});
Add this as a separate function, outside of the one you posted above.

How to show only the first by hover with jQuery?

if i make a hover over my menulinks currently all submenues which are on the first level will be shown
i dont know whats wrong, see my code:
$('#menu li').hover(function () {
//show its submenu
$('ul', this).slideDown(100);
}, function () {
//hide its submenu
$('ul', this).slideUp(100);
});
so in my opinion it must work very well because a hover over a link should only display this first submenu. But also the submenu of this first link will show directly by a hover and i dont know how to fix it better than yet.
need some help please.
For a better understanging i hve created a fiddle here.

Your selector in your hover functions are finding all ul elements that are descendants of the li element. You want to show only direct children. Try this instead:
$('#menu li').hover(function() {
//show its submenu
$(this).children('ul').slideDown(100);
}, function() {
//hide its submenu
$(this).children('ul').slideUp(100);
});

The <ul> which is holding your submenus also contains the sub-submenus. So if you display the first list, it automatically also shows all elements contained in that list.

you should separate the ul for different levels of submenu using different class for different levels of menus.
if you want to just change your code you might want to try this change:
//show its submenu
$('ul', this).eq(0).slideDown(100);

You need to specify the list you want to show. Use $(this) as context to find the <ul> inside, and then filter the result with the :first pseudo-selector.
Try something like this for both hoverIn and hoverOut events:
$("#menu").on('hover', 'li', function(e){
// $(this) refers to the <li> being hovered
$(this).find('ul:first').slideToggle(100);
});
See the docs for on() and slideToggle() methods.