We Keep Coding

Find active submenu and remove its class

I have a main menu and sub-menu. When I click the main menu it displays its content. When the sub-menu is clicked, the sub-menu contents are displayed. But when I click the main menu after the sub-menu it displays the main menu content along with the sub-menu content because it is not removing the sub-menu active class. I tried the following code to find the id of the active sub-menu and remove it.
var ref = $("ul#submenu li a").find(".active");
var ide= ref.attr("id");
$('#ide').removeClass("active");
For better understanding of my issue I have attached a jsfiddle
https://jsfiddle.net/0pmzzp7e/11/

Is this what you want?
function clickHome(){
$('#home-content').addClass('active').show();
$('#home-content').siblings().removeClass('active');
$("ul#submenu li").removeClass("active");
};
function clickContact(){
$('#contact-content').addClass('active').show();
$('#contact-content').siblings().removeClass('active');
$("ul#submenu li").removeClass("active");
}
https://jsfiddle.net/h1afncux/1/

Please do not use inline JavaScript, try to separate JavaScript and HTML as much as possible.
$("ul a[href=\"#home\"]").on("click", function () {
$(".active").removeClass("active");
$("#home-content").addClass("active");
});
$("ul a[href=\"#contact\"]").on("click", function () {
$(".active").removeClass("active");
$("#contact-content").addClass("active");
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-12 container">
<ul class="nav nav-tabs" id="main-menu">
<li class="active">
Home
</li>
<li>
Contact
</li>
</ul>
<div class="tab-content clear-fix">
<!-- Home-->
<div class="tab-pane active" id="home">
<ul class="nav nav-tabs">
<li>
Home 1
</li>
<li>
Home 2
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="home-content"> Home Content </div>
<div class="tab-pane" id="home1"> Home 1 Submenu</div>
<div class="tab-pane" id="home2">Home 2 Submenu</div>
</div>
</div>
<!-- Contact-->
<div class="tab-pane" id="contact">
<ul class="nav nav-tabs">
<li>
Contact 1
</li>
<li>
Contact 2
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="contact-content"> Contact Content</div>
<div class="tab-pane" id="contact1">Contact1 Content</div>
<div class="tab-pane" id="contact2">Contact2 Content</div>
</div>
</div>
</div>
</div>

You're currently only finding the a tags in the submenu that are active. What I assume you want to do is to check for any active element in the entire tab-pane section. If doing that you can then iterate all the found active items and remove the active class from them as such:
var ref = $(".tab-pane .active")
$(ref).each(function(){
$(this).removeClass("active");
})
Here's a forked JSFiddle:
https://jsfiddle.net/2zd309eo/1/

How do I save active tab after page refresh javascript

I am trying to save to active tab state on page refresh. Currently, I have the following code, however, when I output to console the ui-state-active it gives me back -1 as the value. And it doesn't seem to even register my click() function, cause my console.log in the function never outputs. I believe I am doing something wrong here.
<script language="javascript" type="text/javascript">
$(".tabs").tabs();
var tabIndex = parseInt(localStorage.getItem('activeTab')) + 1;
console.log("local storage value parseInt: " + tabIndex);
if(tabIndex != null){
console.log("I am in the if statement: " + localStorage.getItem('activeTab'));
$('.tabs > ul > li:nth-child('+ (tabIndex) +')').find('a').click();
}
$(document).on("click", ".tab-links a", function(e) {
$('.active').removeClass('active');
$(this).parent().addClass('active');
var curTab = $('.tab-links').find('.active')[0].id;
console.log("This is the currentTab value: " + curTab.replace ( /[^\d.]/g, '' ));
var curTabIndex = (curTab.replace ( /[^\d.]/g, '' ) - 1);
localStorage.setItem('activeTab', curTabIndex);
});
</script>
<div class="tabs">
<ul class="tab-links">
<li id="t1">One</li>
<li id="t2">Two</li>
<li id="t3">Three</li>
<li id="t4">Four</li>
<li id="t5">Five</li>
<li id="t5">Six</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active" >
<?php include("tab_1.html"); ?>
</div>
<div id="tab2" class="tab" >
<?php include("tab_2.html"); ?>
</div>
<div id="tab3" class="tab" >
<?php include("tab_3.html"); ?>
</div>
<div id="tab4" class="tab active">
<?php include("tab_4.html"); ?>
</div>
<div id="tab5" class="tab active">
<?php include("tab_5.html"); ?>
</div>
<div id="tab6" class="tab active">
<?php include("tab_6.html") ?>
</div>
</div>
</div>

What I would recommend doing is inside your click handler, removing the 'active' class to begin with, then affixing it to the clicked element:
$('.tab-links a').click(function(e) {
$('.active').removeClass('active');
$(this).parent().addClass('active');
var curTab = $(this).parent()[0].id; // Or $('.tab-links').find('.active')[0].id;
console.log("This is the currentTab value: " + curTab);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
<ul class="tab-links">
<li id="t1">One</li>
<li id="t2">Two</li>
<li id="t3">Three</li>
<li id="t4">Four</li>
<li id="t5">Five</li>
<li id="t5">Six</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active"></div>
<div id="tab2" class="tab"></div>
<div id="tab3" class="tab"></div>
<div id="tab4" class="tab"></div>
<div id="tab5" class="tab"></div>
<div id="tab6" class="tab"></div>
</div>
</div>
Note that you should only ever have one 'active' class at any one time.
Also be aware that if you are adding your elements dynamically, you will need to hoist the scope and utilise event delegation. In this case, replace $('.tab-links a').click(function(e) {}) with $(document).on("click", ".tab-links a", function(e) {}):
$(document).on("click", ".tab-links a", function(e) {
$('.active').removeClass('active');
$(this).parent().addClass('active');
var curTab = $(this).parent()[0].id; // Or $('.tab-links').find('.active')[0].id;
console.log("This is the currentTab value: " + curTab);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
<ul class="tab-links">
<li id="t1">One</li>
<li id="t2">Two</li>
<li id="t3">Three</li>
<li id="t4">Four</li>
<li id="t5">Five</li>
<li id="t5">Six</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active"></div>
<div id="tab2" class="tab"></div>
<div id="tab3" class="tab"></div>
<div id="tab4" class="tab"></div>
<div id="tab5" class="tab"></div>
<div id="tab6" class="tab"></div>
</div>
</div>
Hope this helps! :)

Here you go with a solution https://jsfiddle.net/dhynozb5/2/
$("#tabs").tabs();
var currentTab = $('.ui-state-active a').index();
if(localStorage.getItem('activeTab') != null){
$('#tabs > ul > li:nth-child('+ (parseInt(localStorage.getItem('activeTab')) + 1) +')').find('a').click();
}
$('#tabs > ul > li > a').click(function(e) {
var curTab = $('.ui-tabs-active');
curTabIndex = curTab.index();
localStorage.setItem('activeTab', curTabIndex);
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="tabs">
<ul class="tab-links">
<li id="t1">One</li>
<li id="t2">Two</li>
<li id="t3">Three</li>
<li id="t4">Four</li>
<li id="t5">Five</li>
<li id="t5">Six</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active" >
tab_1.html
</div>
<div id="tab2" class="tab" >
tab_2.html
</div>
<div id="tab3" class="tab" >
tab_3.html
</div>
<div id="tab4" class="tab active">
tab_4.html
</div>
<div id="tab5" class="tab active">
tab_5.html
</div>
<div id="tab6" class="tab active">
tab_6.html
</div>
</div>
</div>
Highlighting an active tab after page refresh I've used localStorage.
Hope this will help you.

Either move your entire <script></script> block below the html or do the following:
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".tabs").tabs();
var currentTab = $('.ui-state-active a').index();
console.log("hi");
console.log("this is the currentTab value: " + currentTab);
$('.tablinks a').click(function(e) {
console.log("i am in here");
var curTab = $('.ui-tabs-active');
curTabIndex = curTab.index();
console.log(curTabIndex);
});
});
</script>

Understanding with custom jQuery slider next button

I have a div with 3 divs inside it each of the inner divs have a class of content and one has a class of current. I was trying to show only one .content at a time and just have a next button that hides the div and removes the .current class and adds it to the next one. It all works fine but when I get to the end of the divs. I want it to just circle back to the first one. The following code doesn't do that. The first one shows but the next button stops working after that:
js:
var $ = jQuery
$( document ).ready( function() {
$('#next').click(function(){
var item = $('.content.current');
item.removeClass('current');
item.slideUp();
item.next().addClass('current');
if(item.next().length == 0) {
$('.content').first().slideDown().addClass('current').end();
}
})
})
HTML:
<div id="holder">
<a class="btn btn-warning next" id="next">next</a>
<div class="wrap">
<div class="content current">
<div id="header"><h3>Basic</h3></div>
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimited Diskspace</li>
<li>10 Email Accounts</li>
<li>24/7 Support!</li>
<li>$4/month</li>
<li><a class="btn btn-success">Order Now!</a></li>
</ul>
</div>
<!-- .content -->
<div class="content">
<div id="header"><h3>Professional</h3></div>
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimited Diskspace</li>
<li>10 Email Accounts</li>
<li>24/7 Support!</li>
<li><a class="btn btn-success">Order Now!</a></li>
</ul>
</div>
<!-- .content -->
<div class="content">
<div id="header"><h3>St. Joseph</h3></div>
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimited Diskspace</li>
<li>10 Email Accounts</li>
<li>24/7 Support!</li>
<li><a class="btn btn-success">Order Now!</a></li>
</ul>
</div>
<!-- .content -->
</div>
<!-- .wrap -->
</div>
<!-- holder -->

What your $('.content').first().slideDown().addClass('current').end(); does is it'll show the first element and add the current class to it. Change your script to this
var $ = jQuery
$( document ).ready( function() {
$('#next').click(function(){
var item = $('.content.current');
item.removeClass('current');
item.slideUp();
item.next().addClass('current');
if(item.next().length == 0) {
$('.content').slideDown();
$('.content').first().addClass('current');
}
});
});
and it will work. Here is a example fiddle. Hope this helps you.

var $ = jQuery
$( document ).ready( function() {
var i = 1;
$('#next').click(function(){
++i;
$('.content.current').removeClass("current").slideUp();
$(".content:nth-child("+i+")").addClass("current").slideDown();
if(i == 3) i=0;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">
<a class="btn btn-warning next" id="next">next</a>
<div class="wrap">
<div class="content current">
<div id="header"><h3>Basic</h3></div>
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimited Diskspace</li>
<li>10 Email Accounts</li>
<li>24/7 Support!</li>
<li>$4/month</li>
<li><a class="btn btn-success">Order Now!</a></li>
</ul>
</div>
<!-- .content -->
<div class="content">
<div id="header"><h3>Professional</h3></div>
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimited Diskspace</li>
<li>10 Email Accounts</li>
<li>24/7 Support!</li>
<li><a class="btn btn-success">Order Now!</a></li>
</ul>
</div>
<!-- .content -->
<div class="content">
<div id="header"><h3>St. Joseph</h3></div>
<ul>
<li>Unlimited Bandwidth</li>
<li>Unlimited Diskspace</li>
<li>10 Email Accounts</li>
<li>24/7 Support!</li>
<li><a class="btn btn-success">Order Now!</a></li>
</ul>
</div>
<!-- .content -->
</div>
<!-- .wrap -->
</div>
<!-- holder -->
It's very easy if you insist to do it with JS :
$( document ).ready( function() {
var i = 1;
$('#next').click(function(){
++i;
$('.content.current').removeClass("current").slideUp();
$(".content:nth-child("+i+")").addClass("current");
if(i == 3) i=0;
})
})
but better option is BOOTSTRAP which I guess you are using.
you can find it here: Collapse Bootstrap

Jquery Show div with matching class

I'm trying to display a div when an item with a class name the same as the hidden div's id is clicked.
The problem is when I click it reveals all of them instead of the particular one I'm clicking on.
This is my code so far:
$("#mixers").on("click", ".clear-tile", function() {
$("#mixers li").each(function() {
$('#' + $(this).attr('class')).removeClass('display-hide');
});
});
.display-hide{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="mixers">
<li class="one"><span class="clear-tile">Show One</span></li>
<li class="two"><span class="clear-tile">Show Two</span></li>
<li class="three"><span class="clear-tile">Show Three</span></li>
</ul>
<div id="one" class="display-hide"><p>I'm One</p></div>
<div id="two" class="display-hide"><p>I'm Two</p></div>
<div id="three" class="display-hide"><p>I'm Three</p></div>

Dont iterate over them with each, that will show them all
Use parent() to traverse up to the li with the class identifier
$("#mixers").on("click", ".clear-tile", function() {
$('#' + $(this).parent('li').attr('class')).removeClass('display-hide');
});
.display-hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="mixers">
<li class="one"><span class="clear-tile">Show One</span>
</li>
<li class="two"><span class="clear-tile">Show Two</span>
</li>
<li class="three"><span class="clear-tile">Show Three</span>
</li>
</ul>
<div id="one" class="display-hide">
<p>I'm One</p>
</div>
<div id="two" class="display-hide">
<p>I'm Two</p>
</div>
<div id="three" class="display-hide">
<p>I'm Three</p>
</div>

You need to use:
$("#mixers").on("click", ".clear-tile", function() {
$('#' + $(this).parent().attr('class'))
.toggleClass('display-hide')
.siblings('div')
.addClass('display-hide');
});
Working Demo

jquery toggle only one item

i try to add jQuery script that will toggle my footer columns, my problem is how I can make to stop toggling all items. Now when someone click on H4 tags all H4 tags are toggle together.
HTML:
<div class="row footer-cols">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
<h4>Information<span class="toggle"></span></h4>
<div class="footer-cols-content">
<ul>
<li>About Us</li>
<li>Customer Service</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<h4>Why buy from us<span class="toggle"></span></h4>
<div class="footer-cols-content">
<ul>
<li>Shipping & Returns</li>
<li>Secure Shopping</li>
<li>International Shipping</li>
</ul>
</div>
</div>
</div>
</div>
</div>
jQuery SCRIPT
jQuery('.footer .footer-cols h4').append('<span class="toggle"></span>');
jQuery('.footer h4').on("click", function(){
if (jQuery(this).find('span').attr('class') == 'toggle opened') { jQuery(this).find('span').removeClass('opened').parents('.footer-cols').find('.footer-cols-content').slideToggle(); }
else {
jQuery(this).find('span').addClass('opened').parents('.footer-cols').find('.footer-cols-content').slideToggle();
}
});

You could also try the following code:
jQuery('.footer .footer-cols h4').append('<span class="toggle"></span>');
jQuery('.footer-cols h4').on("click", function(){
if (jQuery(this).find('span').attr('class') == 'toggle opened') { jQuery(this).find('span').removeClass('opened').parent().next().slideToggle();
}
else {
jQuery(this).find('span').addClass('opened').parent().next().slideToggle();
}
});
The problem with your selector is that with
parents('.footer-cols')
You basically select
<div class="row footer-cols"></div>
element on top. Thus
find('.footer-cols-content')
selects all child elements in it resulting all of them to slideToggle()

on the click handler change .parents('.footer-cols') for .parents('.col-sm-4')

You will need to add content to the span to give the user something to click
This one changes the plus/minus and hides other content
$(function() {
$(".footer-cols").find("h4").on("click", function() {
var $content = $(this).parent().find(".footer-cols-content");
var $span = $(this).find("span");
if ($span.length==0) $(this).append('<span class="toggle" />');
$(".footer-cols-content").not($content).hide();
$content.slideToggle();
$span.text($span.text() == "-" ? "+" : "-");
});
});
To add the span on the fly:
if ($span.length==0) {
$span=$('<span class="toggle" />');
$(this).append($span);
}
$(function() {
$(".footer-cols").find("h4").on("click", function() {
var $content = $(this).parent().find(".footer-cols-content");
var $span = $(this).find("span");
if ($span.length==0) {
$span=$('<span class="toggle" />');
$(this).append($span);
}
$(".footer-cols-content").not($content).hide();
$content.slideToggle();
$span.text($span.text() == "-" ? "+" : "-");
});
});
.footer-cols-content {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row footer-cols">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
<h4>Information </h4>
<div class="footer-cols-content">
<ul>
<li>About Us
</li>
<li>Customer Service
</li>
<li>Privacy Policy
</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<h4>Why buy from us <span class="toggle">+</span></h4>
<div class="footer-cols-content">
<ul>
<li>Shipping & Returns
</li>
<li>Secure Shopping
</li>
<li>International Shipping
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

I am not sure why are you appending span class but If I am not worng only slide toggle should do the work that you intend to do.
jQuery('.footer-cols h4').on("click", function(){
$(this).find('span').toggleClass('opened').end().next().slideToggle();
});
jQuery('.footer-cols h4').on("click", function(){
$(this).find('span').toggleClass('opened').end().next().slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row footer-cols">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
<h4>Information<span class="toggle"></span></h4>
<div class="footer-cols-content">
<ul>
<li>About Us</li>
<li>Customer Service</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<h4>Why buy from us<span class="toggle"></span></h4>
<div class="footer-cols-content">
<ul>
<li>Shipping & Returns</li>
<li>Secure Shopping</li>
<li>International Shipping</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The above code will work only when the footer-cols-content div is always next to h4. To avoid as such you can use parent().
jQuery('.footer h4').on("click", function(){
$(this).parent().find('footer-cols-content').slideToggle();
});