Develop Reference

Hide dropdown menu when clicked - Bootstrap

I have a navigation bar in my website and all the links are loading a content in a container through AJAX.
Now, I need to hide the dropdown menu when a link is clicked. That's not the normal behavior of bootstrap.
Here's my code in the fiddle.
$(".dropdown-menu a").click(function() {
$(this).closest(".dropdown-menu").prev().toggle();
});
http://jsfiddle.net/fw7vh/158/
I recently browsed into existing answers but it removes the dropdown button. Please advise. Thanks!

Try with:
$(".dropdown-menu a").click(function() {
var menu = $(this).closest(".dropdown-menu");
$(menu).css('display','none');
setTimeout(function(){
$(menu).css('display','');
},200);
});

If I understood your question correctly, this might help you.
$(".dropdown-menu a").click(function() {
$(this).closest(".dropdown-menu").toggle();
});

You can achieve this easily with replacing your code
$(".dropdown-menu a").click(function() {
$(this).closest(".dropdown-menu").prev().toggle();
});
with this
$(".dropdown-menu a").click(function() {
$(document.body).click();
});
Here is the working fiddle

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

Highlighting Links while using nav arrows

I have a question similar to others on here but those didn't help because they referred to list links while these are not lists.
I have a horizontally sliding site. When you click the links at the top, they highlight according to what page it is sliding to. However, if you use the left and right nav arrows, the links don't highlight properly. It just stays highlightted on the last link that was clicked. I was wondeering if anyone could show me what I am doing wrong. I want the correct link to be highlighted even when the nav arrows are being used.
Here is the script on jsfiddle: http://jsfiddle.net/LD9YS/13/
And here is one of my failed attempts... (please don't try to figure out what I was doing here... I have no idea of this myself)
$(".arrow-right").click(function(){
prevA.removeClass("active");
prevA = $(A[index]).addClass("active");
});
It's painfully obvious that I haven't the first clue how to do this but at least i gave it a few attempts. I wanted to show more of my attempts but they were so obsurd that I can not even remember what I had done on those.
Can someone please help? If someone can't help with this, Im ready to just give up on it.

You'd do that like so
$('.arrow-left').on('click', function (e) {
e.preventDefault();
$('.tabs .active').prev().trigger('mousedown');
});
$('.arrow-right').on('click', function (e) {
e.preventDefault();
$('.tabs .active').next().trigger('mousedown');
});
FIDDLE

Here is what you should do:
$('.arrow-left').on('click', function(e){
e.preventDefault();
mySwiper.swipePrev();
$(".tabs .active").removeClass('active');
$($('.tabs a')[mySwiper.activeIndex]).addClass('active');
})
$('.arrow-right').on('click', function(e){
e.preventDefault();
mySwiper.swipeNext();
$(".tabs .active").removeClass('active');
$($('.tabs a')[mySwiper.activeIndex]).addClass('active');
})

This would work for right arrow...
$('.arrow-left').on('click', function(e){
e.preventDefault()
var current = $('.tabs').find('a.active').index();
if(current!= $('.tabs').find('a:first').index()){
$('.tabs a').removeClass('active');
$('.tabs a').eq(current-1).addClass('active');
}
mySwiper.swipePrev()
})
The same for left arrow
$('.arrow-right').on('click', function(e){
e.preventDefault()
var current = $('.tabs').find('a.active').index();
if(current!= $('.tabs').find('a:last').index()){
$('.tabs a').removeClass('active');
$('.tabs a').eq(current+1).addClass('active');
}
mySwiper.swipeNext()
})

Click Tab, Tabs Disappear

Creating tabs in jQuery. When you click another tab, all the tabs disappear. Can't figure out the fix
Here's the page not working: http://www.sleepfullnights.com/products/sfn-537
Here's the JSFiddle another guy made of it working: http://jsfiddle.net/gravitybox/7pHg4/ I've copied and pasted every element of this into the page and the issue is still there.
One person pointed out that something is giving the tabs the css "display:none" when clicked and I can't find where to fix it.
Also, another observation someone made was that "In Chrome dev tools, if you right click the ul.tabs in the "Elements" tab and select "Break On > Attributes modifications", it breaks on "$(contentLocation).show().addClass('active').siblings().hide().removeClass('act‌​ive');" when you click a tab".
Here's the jQuery code I have:
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
});
});
});
And the code from the working JSFiddle:
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
alert('yep');
});
});
});
Any help/guidance is greatly appreciated.

I'm the one who noted "In Chrome dev tools, if you right click the ul.tabs in the "Elements" tab and select "Break On > Attributes modifications", it breaks on "$(contentLocation).show().addClass('active').siblings().hide().removeClass('act‌​ive');"
It breaks there because that line is what is hiding the ul containing the tabs.
Looking at your website's code, you need to change the following inside app.js on Line 39.
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
to this:
$(contentLocation).show().addClass('active').siblings('div').hide().removeClass('active');
You only want to target the div siblings of the selected tab's content div. Right now, the ul is also a sibling of the selected div. Without the 'div', siblings() will select all of its siblings and hide() them (thus hiding the tabs too).
Preferably, I would add a tab-content class to the tab content div elements and use siblings('.tab-content') instead of siblings('div') to be more specific. That way if you add another div that happens to be a sibling, it won't hide that.

What's Going On
The code used for those tabs is much more complicated than you need, and I'm not really sure what is breaking. Rather than try to fix it, it would be easier to just start over. This is what you want:
Every time a user clicks on a tab, all tabs have the active class removed, and all content is hidden. Then, the active clicked on tab is given the active class and it's content is shown. This should seem instantaneous to the user. You will need to add a class to your content divs to accomplish this easily. I'd add tab-content.
Code
Working Fiddle
HTML (Only change is adding the class)
<div class="tab-content" id="tab-1">
...Content...
</div>
<div class="tab-content" id="tab-2">
...Content...
</div>
<div class="tab-content" id="tab-3">
...Content...
</div>
Javascript:
$(document).ready(function() {
$('.tabs li a').click(function(event){
event.preventDefault();
$('.tabs li a').removeClass('active');
$(this).addClass('active');
$('.tab-content').hide();
$($(this).attr('href')).show();
});
});

It's definitely a problem with the ul getting display: none. You could try overriding it in the click handler with $('ul.tabs').css('display','block'). It's hard to tell where the issues is coming from because of the amount of scripts on your page.

Navigation close onClick of another list item

Does anyone know how I can expand on the function at the moment, so that when one navigation is open, when the user clicks to open the other navigation, the navigation which is open presently collapses?
Please find the code below;
http://jsfiddle.net/N7xgC/

What you're currently doing is toggling the display of all elements with the sub class, so clicking on any link will display all of the sub menus. Instead, you want to hide all of the elements with the class sub that aren't a sibling of the link being clicked on, and then toggle only the element with the class sub that is a sibling of the link being clicked on.
$(document).ready(function() {
$('.main > li > a').click(function() {
var sibling = $(this).siblings('.sub'); // select the <ul> to exclude
$('.sub').not(sibling).hide(); // hide everything except that element
sibling.toggle(); // toggle that element
});
});
Updated jsFiddle

Updated your jsFiddle http://jsfiddle.net/N7xgC/6/
$(document).ready(function()
{
$('.main > li > a').click(function(event)
{
$('.main > li > ul').hide();
$(this).next().show();
});
});

Like this?
http://jsfiddle.net/foxbunny/N7xgC/10/
EDIT: A bit of a cleanup, with single click handler:
http://jsfiddle.net/foxbunny/N7xgC/11/