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/

Jquery Accordion open based upon .class

I have the following JQuery code to operate my accordion menu.
<script type="text/javascript" src="/media/jui/js/jquery.min.js"></script>
<script>
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).attr('href');
if($(e.target).is('.active')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section title
$(this).addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
</script>
How do I modify the code to detect the 'current' class and open the corresponding panel from the following html script.
<div class="main" style="width:300px">
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">accordion-1</a>
<div id="accordion-1" class="accordion-section-content" >
<ul class="nav menuside">
<li>Here</li>
<li>Here</li>
<li>Here</li>
<li>Here</li>
<li>Here</li>
</ul>
</div>
</div>
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-2">accordion-2</a>
<div id="accordion-2" class="accordion-section-content">
<ul class="nav menuside">
<li>Here</li>
<li>Here</li>
<li class="current">Here</li>
<li>Here</li>
<li>Here</li>
</ul>
</div><!--end .accordion-section-content-->
</div><!--end .accordion-section-->
</div>
</div>
How to current class in for open accordion panel.

scroll to top using href id

I want to scroll the div to top position.I have problem with get the href value.now 'a' returns undefined in console.log(a);
function myFunction()
{
var a=$(this).attr('href');
console.log(a);
$('html, body').animate({scrollTop: $('#'+a).offset().top-40}, 500);
}
#consulting,#segments,#partner,#insights{min-height:100vh;}
.secMenu{position:fixed;
}
<div class="container-fluid">
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1">Consulting & Solutions</li>
<li class="test2">Segments</li>
<li class="test3">Our Partners</li>
<li class="test4">Perspectives</li>
</ul>
</div>
</div> <!--End of second menu -->
<div class="row">
<div id="consulting">
div1
</div>
<div id="segments">
div11
</div>
<div id="partner">
div111
</div>
<div id="insights">
div1111
</div>
</div>
</div>

I've made an alternative to what you used, but it does the same thing. I removed the function you used and used jQuery instead. Hope my answer works for you:
$('.nav li a').on('click', function(e) {
e.preventDefault();
var a = $(this).attr('href');
$('html, body').animate({
scrollTop: $(a).offset().top
}, 500);
});
#consulting,
#segments,
#partner,
#insights {
min-height: 100vh;
}
.secMenu {
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1">Consulting & Solutions
</li>
<li class="test2">Segments
</li>
<li class="test3">Our Partners
</li>
<li class="test4">Perspectives
</li>
</ul>
</div>
</div>
<!--End of second menu -->
<div class="row">
<div id="consulting">
div1
</div>
<div id="segments">
div11
</div>
<div id="partner">
div111
</div>
<div id="insights">
div1111
</div>
</div>
</div>
To see it in action you can hit the Run code snippet button above or you can see a fiddle here.

Because this is bind to the global object by default (in browser it's window).
You can try pass this to myFunction() like this: myFunction(this). And in myFunction definition: function myFunction(target) {...}, target now refers to the anchor element.

Masonry js is messing with the Bootstrap tab function

I am using the Bootstrap tab function with Desandro's Masonry, and the problem is that when I load the page, it starts on the first tab for half a second, then jumps to the tab with the Masonry.
I am guessing that I could fix this with some scripting, but I am too new to js/jquery to figure it out.
I tried changing the order of the script code, because it looks to me like the page loads and then the Masonry script happens and forces its tab to the active state. But it still happens no matter what order the code is in.
Specifically what I need is either for someone to point out a mistake I overlooked or give me some pointers on how to make the page stay on the first tab when it loads.
I have included my html and js controls here, but I also made a fiddle with the full code at http://jsfiddle.net/jccarter1990/o15e98ts/3/
Thanks in advance
<ul class="nav nav-pills" role="tablist" id="myTab">
<li role="presentation" class="active">Cover Letter</li>
<li role="presentation">Features</li>
<li role="presentation">Gallery</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="page-one">Cover Letter</div>
<div role="tabpanel" class="tab-pane" id="page-two">Features</div>
<div role="tabpanel" class="tab-pane" id="page-three">
<div class="masonry js-masonry" >
<div class="item"><img class="thumbnail" src="img/paigeJohnLasVegas.jpg"></div>
<div class="item"><img class="thumbnail" src="img/engagementsCloseUp.jpg"></div>
<div class="item"><img class="thumbnail" src="img/jimmyJohns.jpg"></div>
<div class="item"><img class="thumbnail" src="img/paigeNinjaTurtle.jpg"></div>
<div class="item"><img class="thumbnail" src="img/sprayPaintSid.jpg"></div>
</div>
</div>
<script>
var container = document.querySelector('.masonry');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container );
});
var container = document.querySelector('.masonry');
var msnry = new Masonry( container, {
// options
columnWidth: 200,
itemSelector: '.masonry.item'
});
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$(function () {
$('#myTab a[href="#page-one"]').tab('show')
$('#myTab a[href="#page-two"]').tab('show')
$('#myTab a[href="#page-three"]').tab('show')
})
</script>

UPDATED ANSWER: Set your first tab and panel as the active tab:
Fiddle
<div class="container navigation"> <span class="nt-name">John Carter</span>
<br> <span class="nt-title">Professional Portfolio</span>
<ul class="nav nav-pills" role="tablist" id="myTab">
<li role="presentation" class="active">Cover Letter
</li>
<li role="presentation">Features
</li>
<li role="presentation">Gallery
</li>
</ul>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="page-one">
<div class="container">
<h1>Cover Letter</h1>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="page-two">
<div class="container">
<h1>Features</h1>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="page-three">
<div class="container">
<h1>Gallery</h1>
</div>
<div class="masonry js-masonry">
<div class="item">
<img class="thumbnail" src="img/paigeJohnLasVegas.jpg">
</div>
<div class="item">
<img class="thumbnail" src="img/engagementsCloseUp.jpg">
</div>
<div class="item">
<img class="thumbnail" src="img/jimmyJohns.jpg">
</div>
<div class="item">
<img class="thumbnail" src="img/paigeNinjaTurtle.jpg">
</div>
<div class="item">
<img class="thumbnail" src="img/sprayPaintSid.jpg">
</div>
</div>
</div>
</div>
Change your script to just this:
//bootstrap tab function
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
Leave out:
BTW, you don't have to include the bootstrap.js for tabs in your jsfiddle if you check the box to include Bootstrap, it includes the js. If you have other js to include, like masonry.js, add them using external resources instead of pasting them into the script panel This will make it much easier fior people to see the relevant code.

How to return content to two separate tabbable ID's upon one tab click using Twitter Bootstrap's Tabbable Tabs in a Rails 3.2 App

Using Twitter Bootstrap's bootstrap-tab.js, I have:
<ul class="tabnavcenter" id="myTab">
<li class="active">about</li>
<li>education</li>
<li>experience</li>
<li>verified skills</li>
<li> video</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Content 1</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
How can I get it so if I put:
<div class="tab-content">
<div class="tab-pane active" id="home">Content 2</div>
</div>
... two places in the profile (once above and once below a navbar) and with different content in each, it would work? As of now, the content appears, but once its clicked, it disappears. Can there be two "active" li's at the same time?
Edit:
Since I'm using this in a Rails 3.2 App, I currently have the following in bootstrap-tab.js:
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
$('#myTab a[href="#home"]').tab('show');
$('#myTab a[href="#tab2"]').tab('show');
$('#myTab a[href="#tab3"]').tab('show');
$('#myTab a[href="#tab4"]').tab('show');
$('#myTab a[href="#tab5"]').tab('show');
$('#myTab a[href="#home2"]').tab('show');
$('#myTab a[href="#tab22"]').tab('show');
and after putting the following in user_body.html.erb:
<script type="text/javascript">
$(function () {
$('#myTab >li>a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
//
$(this.getAttribute('href') + '2').html($(this).html());
});
});
... I get the second content in the div after refreshing the page, no change when I click on the second tab, and then a change back to the name of the first 'a' when I click back on the first one.
It's a mess.

Here is one solution without extra javascript, and compatible with the plugin API.
The principle is to use 2 .tab-content and take advantage of the data-target selector attribute.
HTML
The first .tab-content contains your normal .tab-pane
<div class="tab-content">
<div class="tab-pane active" id="home">home</div>
<div class="tab-pane home-tab">class home</div>
<div class="tab-pane profile-tab">profile</div>
<div class="tab-pane messages-tab">messages</div>
<div class="tab-pane settings-tab">settings</div>
</div>
and the second .tab-content contains the extra .tab-panes that are optionnal - plus an empty one (#notab_else here)
<div class="tab-content">
<div class="tab-pane active" id="home_else">home_else</div>
<div class="tab-pane home-tab">class home</div>
<div class="tab-pane profile-tab messages-tab settings-tab" id="notab_else"></div>
</div>
Then you have your tabs with one extra attribute, data-target :
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li class="">Class Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
This attribute data-target defines the .tab-pane(s) associated with it. The magic is that you can use #ids or .classes or any valid jQuery selector.
JavaScript
All you need to activate everything is the default code :
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
And you can also use your own actions to trigger the tabs as defined by the API.
You do not need that if you keep the default behavior for tabs.
$('#myTab a:first').tab('show');
EXTRA
You can be free of any javascript if you set data-toggle="tab" to the a elements
There is a fade effect available if you add the fade class to the .tab-pane (and fade in for the .active one)
DEMOS
Here is the demo (jsfiddle) and the demo with extra (jsfiddle)

you can only access one id at a time, this is why it is called an id.
Get the content from the first one and apply it to the second one.
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
$(this.href +'2').html($(this.href).html()
})
<div class="tab-content">
<div class="tab-pane active" id="home">Content 1</div>
</div>
<div class="tab-content2">
<div class="tab-pane active" id="home2">Content 2</div>
</div>

Here is a working solution for your problem (updated):
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Tab-1</div>
<div class="tab-pane" id="profile">Tab-2</div>
</div>
<div class="tab-content" id="tab-content2">
<div class="tab-pane active" id="home2">Home Content 2</div>
<div class="tab-pane" id="profile2">Profile Tab-2</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#tab-content2 div").each(function(i, e){
if(!$(e).hasClass('active')) $(e).hide();
});
$('#myTab>li>a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
$("#tab-content2 div").each(function(i, e) {
$(e).hide();
});
$(this.getAttribute('href') + "2").show();
});
});
</script>

<script type="text/javascript">
$(function () {
$('#myTab >li>a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
//
$('#extendedView').html($(this).html());
});
});
</script>
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Tab-1</div>
<div class="tab-pane" id="profile">Tab-2</div>
<div class="tab-pane" id="messages">Tab-3</div>
<div class="tab-pane" id="settings">Tab-4</div>
</div>
<div class="tab-content2">
<div class="tab-pane active" id="extendedView">Content 2</div>
OR
<script type="text/javascript">
$(function () {
$('#myTab >li>a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
//
$(this.getAttribute('href') + '2').html($(this).html());
});
});
</script>
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Tab-1</div>
<div class="tab-pane" id="profile">Tab-2</div>
<div class="tab-pane" id="messages">Tab-3</div>
<div class="tab-pane" id="settings">Tab-4</div>
</div>
<div class="tab-content2">
<div class="tab-pane active" id="home2"></div>
<div class="tab-pane" id="profile2"></div>
<div class="tab-pane" id="messages2"></div>
<div class="tab-pane" id="settings2"></div>
</div>