We Keep Coding

Close toggle when clicking navigation link

Currently, the toggle opens correctly and applies an 'open' css to the navigation when clicked. However, I cannot get the script to remove the class when you click on a menu item.
Usually this wouldn't be an issue but this menu is being used to scroll to anchor tags within one page, so needs to close once clicked.
Here is my basic markup:
$(document).ready(function(){
$("a.toggle").click(function(){
$("nav > ul").slideToggle(500);
$(this).toggleClass("open");
});
});
HTML
<nav id="main">
<ul>
<li>Example Link 1</li>
<li>Example Link 1</li>
<li>Example Link 1</li>
<li>Example Link 1</li>
</ul>
</nav>

You can attach click event to the menu item to toggle display of main menu. Hope this is what you are looking for.
$("#main ul li a").click(function () {
$("nav > ul").slideToggle(500);
$("a.toggle").toggleClass("open");
});
$(function () {
$("a.toggle").click(function () {
$("nav > ul").slideToggle(500);
$(this).toggleClass("open");
});
$("#main ul li a").click(function () {
$("nav > ul").slideToggle(500);
$("a.toggle").toggleClass("open");
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav id="main">
Home
<ul>
<li>Example Link 1</li>
<li>Example Link 1</li>
<li>Example Link 1</li>
<li>Example Link 1</li>
</ul>
</nav>

you have to look if you have to look if you have the latest version of jquery, if it does not use addclass and remoeclass instead of toggleclass

How do I set a bootstrap tab active?

I am using Twitter Bootstrap for a tabular interface. When I click on a tab, I am calling an function that hides and shows corresponding divs. This is my HTML Code:
<ul class="nav nav-tabs">
<li class="active" id="Chart1">Chart 1</li>
<li id="Chart2">Chart 2</li>
<li id="Chart3">Chart 3</li>
<li id="Chart4">Chart 4</li>
</ul>
Based on that, I am using the following jquery to show and hide content:
$(document).ready(function(){
$("#pie").hide();
$("#bar").hide();
$("#Chart2").click(function(){
$("#StateWise").hide();
$("#pie").show();
});
$("#Chart3").click(function(){
$("#StateWise").hide();
$("#pie").hide();
$("#bar").show();
});
});
How can I do that on click, the active class changes to that particular tab?

You can write like this:
$("#Chart2").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
$("#StateWise").hide();
$("#pie").show();
});
$("#Chart3").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
$("#StateWise").hide();
$("#pie").hide();
$("#bar").show();
});

If you are using bootstrap 4 then you can do like this.
$("#Chart1").click(function(){
$('#Chart1').tab('show');
});
check the below reference
https://getbootstrap.com/docs/4.3/components/navs/#tabshow

Try
$("#Chart1").click(function(){
$('li.active').removeClass('active');
$('this').addClass('active');
});

Try this
$("#Chart3").click(function(){
$('li.active').removeClass('active');
$('this').addClass('active');
});

Custom mouse events on links

Please see this fiddle
If you hover your mouse exactly on the link, a different link appears. But different text is also appearing when you hover on left or right of the link. I want to make the hover effect only when it is being hovered on the exact link.
How can I do this?
My HTML code:
<ul id="nav">
<li id="a1">original link 1</li>
<li id="a2" class="hack">hover link 1</li>
<li id="b1">original link 2</li>
<li id="b2" class="hack">hover link 2</li>
<li id="c1">original link 3</li>
<li id="c2" class="hack">hover link 3</li>
</ul>
My Javascript code:
$('.hack').hide();
$("#nav li").mouseenter(function() {
$('#' +this.id.charAt(0)+"2").show();
$('#' +this.id.charAt(0)+"1").hide();
}).mouseleave(function() {
$('#' +this.id.charAt(0)+"1").show();
$('#' +this.id.charAt(0)+"2").hide();
});
Please see the fiddle to see the effect I'm referring to.

Instead of using mouseenter event shortcut it would be better if you use event delegation and add event on "a" element like this...
$("#nav li").on({
"mouseenter" : function() { },
"mouseleave" : function() { }
}, "a");

Try the following:
$('.hack').hide();
$("#nav li a").mouseenter(function() {
$('#' +this.parentNode.id.charAt(0)+"2").show();
$('#' +this.parentNode.id.charAt(0)+"1").hide();
}).mouseleave(function() {
$('#' +this.parentNode.id.charAt(0)+"1").show();
$('#' +this.parentNode.id.charAt(0)+"2").hide();
});
You want to initiate the hover events on the a tags rather than the lis themselves.
EXAMPLE

I guess i updated the fiddle. I just added this style:
#nav li {
display: inline-block;
}

In your js, bind your function to "#nav li a" instead.

How do i .removeClass('active') for just one of my <li> elements with jQuery?

I am having some issues figure out how i can just remove a class ="active" from a just one of my lists.
I have a navigation bar:
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
I also have a menu within Home:
<div class="container_2">
<ul>
<li class="left-main-list active">Subject 1</li>
<ul class="list-in-list">
<li>Sub subject 1</li>
<li>Sub subject 2</li>
</ul>
<li class="left-main-list>Subject 2</li>
<li class="left-main-list>Subject 3</li>
</ul>
</div>
While i browse my menu on the home page, i want to change the the active list items class to active when clicked, so i now have this jQuery code:
$(document).ready(function() {
$('li').click(function() {
$('li').removeClass('active');
$(this).addClass('active');
});
});
This works for my menu, the class change to the current one, but it also delete my navigation bars class, which i don't want. :)
I have tried something like:
$(document).ready(function() {
$('.left-main-list').click(function() {
$('.left-main-list li').removeClass('active');
$(this).addClass('active');
});
});
I've tried '.left-main-list li' & 'li.left-main-list' without any success.
Greatful for answer to this question, and i hope my question (this time) is more accurate than my previous ones. :)
/Bill
ps: Can a sub subject AND a main subject be active at the same time, and that sub subject's class of active, be removed if you for example click another sub subject, but the main item still have it's class of active?

While i browse my menu on the home page, i want to change the the
active list items class to active when clicked
You could just target the lis within the relevant div, similar to this:
$(document).ready(function() {
var $listItems = $('div.container_2 li');
$listItems.click(function() {
$listItems.removeClass('active');
$(this).addClass('active');
});
});
DEMO - target lis within .container_2 only
Can a sub subject AND a main subject be active at the same time, and
that sub subject's class of active, be removed if you for example
click another sub subject, but the main item still have it's class of
active?
Still targeting the container you could use jQuery's parent(), similar to this:
$(document).ready(function () {
$('div.container_2 li').click(function () {
var $this = $(this);
var $children = $this.parent().find('li');
$children.removeClass('active');
$this.addClass('active');
});
});
DEMO - Using parent() to allow active menu and sub-menu but not when main menu changes
I looked at the possibility of making this more dynamic to add activation of items going up the chain when switching between sub menus located within different main menu elements.
Fixing the HTML of the nested uls whereby your nested uls are inside lis instead of just inside the upper ul you can do a fully dynamic implementation.
Assume your HTML like this:
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="container_2">
<ul>
<li class="left-main-list active">Subject 1
</li>
<li>
<ul class="list-in-list">
<li>Sub subject 1
</li>
<li>Sub subject 2
</li>
<li>
<ul class="list-in-list">
<li>Sub subject 1
</li>
<li>Sub subject 2
</li>
</ul>
</li>
</ul>
</li>
<li class="left-main-list">Subject 2
</li>
<li class="left-main-list">Subject 3
</li>
</ul>
</div>
Now, using the following script, you can also make parents of any sub menu items active when changing from a sub menu to another which is within another main menu item, similar to this:
$(document).ready(function () {
$('div.container_2 li>a').click(function () {
var $this = $(this);
var $relatedElements = $this.parents('ul').find('li');
if($this.hasClass('active')){
return;
}
$relatedElements.removeClass('active');
$this.parent('li').addClass('active');
var $parents = $this.parents('li');
$parents.each(function(){
$(this).not($this.parent()).prev().addClass('active');
});
});
});
DEMO - Chain-like activation
I think this should have all possible examples to get you started from here.
Hope this helps.

Try this:
$("li").click(function() {
$(this.parentNode).children("li").removeClass("active");
$(this).addClass("active");
});
This will affect only the siblings of the element you click on.

$('.left-main-list').click(function() {
$('.left-main-list').removeClass('active');
$(this).addClass('active');
});

I think what you're looking for is this:
$(document).ready(function() {
$('li').click(function() {
$('li.left-main-list').removeClass('active');
$(this).addClass('active');
});
});

How about
$('li').on ('click', function (){
$(this).addClass ('active').siblings ('li').removeClass ('active');
})

Show/hide content for menu sublink and close the content when click next new link

I'm looking for a solution, it must work in IE also, that I can have the content hidden and then when you click one of the menu items it shows the content. However, the content doesn't hide until a user clicks on the next link...

Please check this link
http://jsfiddle.net/varada/YLX9x/
you can use jquery hide() and show() functions for that.
Let the id of div that is to be hidden be hidden_div, let menu item be menu_item, next button be next,
Import the jquery.js
and write the ready function as below..
$(document).ready(function() {
$('#menu_item').click(function() {
$('#hidden_div').show();
});
$('#next').click(function() {
$('#hidden_div').hide();
});
});
or if you mean the content be visible till he click the next link on the menu item, add a class name say, menu_class to the menu items and write the code
$('.menu_class').click(function() {
$('#hidden_div').hide();
});
instead of $('#next').click(function()
if you have a menu like
<ul>
<li class='menu_class'>item 1</li>
<li id='menu_item' >item 2</li>
<li class='menu_class'>item 3</li>
</ul>
and the div
<div id='hidde_div' style='display:none'>
content
</div>
then if you click item 2 the div will get displayed. and if you click item 1 or item 3 it will get hidden. make sure you are using the code $('.menu_class').click(function() {

html:
<li class="main">Web
<ul>
<li>Designing</li>
<li>Development</li>
</ul>
</li>
<li class="main">IT
<ul>
<li>Sales & Service</li>
<li>CCTV</li>
<li>DVR</li>
</ul>
</li>
<li class="main">ITES
<ul>
<li>BPO</li>
<li>Online Portal</li>
<li>Online Marketing</li>
</ul>
</li>​
js:
$(document).ready(function(){
$('li ul:not(:first)').hide();
$('ul li').click(function(){
$(this).closest('.main').next().find('ul').show();
$(this).closest('ul').hide();
});
});​
http://jsfiddle.net/7QheB/