Develop Reference

Changing html classes using jquery

I have many elements with the same class name such as:
<li class="contact" id="content">
// some content here....
</li>
.
.
<li class="contact active" id="content">
// some content here....
</li>
.
.
<li class="contact" id="content">
// some content here....
</li>
.
.
<li class="contact" id="content">
// some content here....
</li>
.
.
All the classes have the same name except for one which says 'contact active'.
This element in the page will be highlighted when the user clicks on it. I've wrote a jquery script to change the class name when clicked on here:
$('#content').click(function() {
$(this).removeClass('contact');
$(this).addClass('contact active');
});
But the problem is, it only searches for one matching id and then it stops. So, except for the first element all the other elements have no effect. Also I would like to change the name of the already active class ('contact active') back to just 'contact' when I click on the other elements.

IDs must be unique. Your id selector is assigning click event to only first element in matched set.
You need to modify the click event to have class selector and not ID Selector:
var $contactDiv = $('.contact');
$contactDiv.click(function() {
$contactDiv.removeClass('active'); // remove all active
$(this).addClass('active'); // add it back on this object
});

The main problem you have is that id attributes need to always be unique within the DOM. If you want to group elements with a common identifier, use a class.
You can then select the elements by that class and call toggleClass() on them. Note that you also don't need to remove/add the contact class either.
the last problem is there can be only one active class at a time so the other active class should get unselected.
In that case you can simply call removeClass() on all the .content elements but the one which was clicked. Try this:
$('.content').click(function() {
$('.content').not(this).removeClass('active');
$(this).toggleClass('active');
});
.active {
color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="content contact">
Content...
</li>
<li class="content contact active">
Content...
</li>
<li class="content contact">
Content...
</li>
<li class="content contact">
Content...
</li>
</ul>

$('.contact').click(function() {
$('.contact').removeClass('active');
$(this).addClass('active');
});
.active {
color: #000;
font-size:20px;
font-weight:700;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="contact">
Content 1...
</li>
<li class="contact">
Content 2...
</li>
<li class="contact">
Content 3...
</li>
<li class="contact">
Content 4...
</li>
</ul>
The main issue is id. id should be unique on a page. As you are using id="content" multiple times on a single page. Now you need to modify your jQuery as:
$('.contact').click(function() {
$('.contact').removeClass('active');
$(this).addClass('active');
});

How to take an li and put it into specific DIV

I'm new to jquery and I'm doing a slider.
I have:
<ul>
<li> <img src="image.jpg"><p>description of the current image</p></li>
<li> <img src="image.jpg"><p>description of the current image</p></li>
<li> <img src="image.jpg"><p>description of the current image</p></li>
<li> <img src="image.jpg"><p>description of the current image</p></li>
</ul>
what I need to do is when I click on a specific <li> element, it will be displayed in a lightbox with its content.
<div id="lightbox">Here is clicked li and its content</div>
I don't know really where to start.
How do I tell jQuery to take a li and put into div?

You could do as follows:
$(document).ready(function() {
$('li').on('click', function() {
$('#lightbox').html($(this).html());
});
});

Removing active state when toggling between divs

I have created multiple top down menu items. When the links are clicked a div slides down to show some content.
What I am trying to do with these links is toggle between them. When one div is opened an active state is added to the link, when it is closed the active state is removed and the div hidden. When you click between the links I have managed to get them to toggle between each other and the active state is added to the div that is opened.
What I cannot achieve is removing the active state and resetting some css.
Here is my Javascript:
//menu toggle
$(".trigger").click(function() {
var divToToggle = $( $(this).data('target') );
$(".toggle:visible").not(divToToggle).hide();
$(".trigger").not(divToToggle).removeClass('active');
$('.top-nav').css('margin-top', '20px');
divToToggle.slideToggle("fast", "linear");
$(this).toggleClass('active');
$('.top-nav').css('margin-top', '0px');
return false;
});
The .toggle class is on all the divs that are toggled:
<div class="account-container toggle hide"></div>
<div class="collections-container toggle hide"></div>
<div class="search-container toggle hide"></div>
The .trigger class is on all my links:
<ul class="top-nav">
<li><a class="hidden-tablet" href="">home </a></li>
<li><a class="hidden-tablet" href="">about us </a></li>
<li><a class="hidden-tablet" href="">where to buy </a></li>
<li><a class="hidden-tablet" href="">contact us </a></li>
<li class="tablet-menu visible-tablet"><a class="tablet-menu trigger" href="" data-target=".tablet-menu-container">tablet menu</a></li>
<li class="account"><a class="account trigger" href="" data-target=".account-container">account</a></li>
<li class="collection"><a class="collection trigger" href="" data-target=".collections-container">collections</a></li>
<li class="search"><a class="search trigger" href="" data-target=".search-container">search</a></li>
<li class="basket"><a class="basket trigger" href="" data-target=".home-basket-container">basket</a></li>
</ul>

It's hard to say where exactly your code is going wrong, but I've re-written it so it works slightly differently. Your click handler has to handle two possibilities: either we're clicking to hide an existing section, or we're clicking to switch to a new section. But we can also think of this as being two steps, with the second one optional: either we hide an existing section, or we hide an existing section and show a new one.
I've also switched to using ev.preventDefault() to stop the link from firing, named the jQuery variables so they start with $ (which makes them easier to differentiate). You can try it out on jsfiddle here.
$(document).ready(function () {
$(".trigger").click(function (ev) {
ev.preventDefault();
var $clickedLink = $(this);
var $divToToggle = $($(this).data('target'));
var isHideOnly = $clickedLink.hasClass('active');
// Hide the existing div and remove 'active' class.
$(".toggle:visible").hide();
$(".trigger").removeClass('active');
$('.top-nav').css('margin-top', '20px');
// If we're showing a new one, reveal it and set the active class on the link.
if (!isHideOnly) {
$divToToggle.slideToggle("fast", "linear");
$('.top-nav').css('margin-top', '0');
$clickedLink.addClass('active');
}
});
});

Adding a class to an element which is not selected/focused

I have a button, when it is hovered i want to add a CSS class to another element. However i have multiple elements and only want to add it to a specific one.
Currently i have :
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
var button = $('#loginButton');
button.hover(function (login) {
$("ul.navbar-nav li span").addClass("subhover");
}, function () { //On Hover Out
$("ul.navbar-nav li span").removeClass("subhover"); //On hover out, remove class "subhover"
});
This works, however it adds the class to all the elements.
<li>
<a id="loginButton">
<img class="IconStyle" src="Icons/loginIcon.ico"></img>
</a>
<ul class="subnav">
<li>
</li>
<li>
</li>
</ul>
<span class=""></span> // This is the element i want to add a class to.
The is what i would like to add the class to, however as i said there are 5 of these created programmatically

You could use toggleClass and in/out hover handler:
button.hover(function (login) {
$(this).closest('li').find('span').toggleClass("subhover");
});

Change your HTML to:
<li>
<a id="loginButton">
<img class="IconStyle" src="Icons/loginIcon.ico"></img>
</a>
<ul class="subnav">
<li>
</li>
<li>
</li>
</ul>
<span id = 'spanElement'></span>
and your JQuery to:
var button = $('#loginButton');
alert($("ul.navbar-nav li span").eq(1000000));
button.hover(function (login) {
$("#spanElement").addClass("subhover");
}, function () { //On Hover Out
$("#spanElement").removeClass("subhover"); //On hover out, remove class "subhover"
});

Parent Selector Jquery

I want to add a class of 'active' to the parent class of an <li>
<div id="navigation">
<ul data-identifier="50dd2c0b-3904-4100-9076-627145a3a949" class=" nav nav-pills nav-edit " id="nav-main-menu"><li class=" nav-link dropdown ">WHO WE ARE <b class="caret"></b><ul class="dropdown-menu"><li class=" nav-link active ">Mission </li><li>History </li><li>Executive Team </li></ul></li><li class=" nav-link dropdown ">A GREAT BUSINESS OPPORTUNITY <b class="caret"></b><ul class="dropdown-menu"><li>Demand </li><li>Growth </li><li>United State Opportunity </li><li>Canada Opportunity </li></ul></li><li class=" nav-link dropdown ">THE FRANCHISEE ADVANTAGE <b class="caret"></b><ul class="dropdown-menu"><li>Strategy and Tactics </li><li>Performance Enhancement </li><li>Business Tools </li></ul></li><li class=" nav-link dropdown ">THE MATHNASIUM METHOD <b class="caret"></b><ul class="dropdown-menu"><li>How It Works </li></ul></li><li class=" nav-link dropdown ">INVESTMENT <b class="caret"></b><ul class="dropdown-menu"><li>United States / Canada </li><li>International </li></ul></li><li class=" nav-link dropdown ">MEET OUR FRANCHISEES <b class="caret"></b><ul class="dropdown-menu"><li>Video Testimonials </li><li>Written Testimonials </li></ul></li><li>STEPS TO OWNERSHIP </li><li>NEWS / PRESS </li><li class=" nav-link dropdown ">Q&A <b class="caret"></b><ul class="dropdown-menu"><li>United States / Canada </li><li>International </li></ul></li></ul>
<div id="consumerSite"><br><div style="margin-left:22px">
<img src="../upload/1/img/cosumerArrow.gif" width="5" height="9" style="margin-right:4px;">Tell a Friend<img src="upload/1/img/tellafriend.jpg" width="20" height="11" class="tellafriend"><br><br>
<img src="../upload/1/img/cosumerArrow.gif" width="5" height="9" style="margin-right:4px;"><a href="http://www.mathnasium.com/" target="_blank">Visit our consumer site at<br>
www.mathnasium.com</a>
<br>
</div>
</div>
</div>
Javascript:
jQuery('ul li ul li a').parent('ul li').addClass('active');
I'm not sure as to why I can't grab the li that belongs to whoweare.
EDIT: Provided complete section of code. Just trying to add a active class onto the WHO WE ARE tag.

Maybe you should simplify yourself with this:
$('ul li').on('click', 'a', function() {
$(this).parent().addClass('active');
});
If you want to add the class active on your first li in the list, do this:
$(document).ready(function() {
$('ul li').first().addClass('active');
// or select the li with an "a" in it
$('ul li a').first().parent().addClass('active');
});

Your outermost <li> is not enclosed in a <ul>, so the first selector ("ul li ul li a") won't find anything. Use this instead:
jQuery('li ul li a')
This selects your 3 hyperlinks under your ul with class "dropdown-menu". The next problem is with the parent method. When you call parent('ul li'), that selector is causing jQuery (and myself) some confusion. Simply call parent() without any selector, because parent() always moves only one level up the DOM tree and stops there. It will automatically select the <li> that encloses each <a>.
This should do the trick:
jQuery('li ul li a').parent().addClass('active')