We Keep Coding

jQuery's addClass works but browser doesn't apply new class

So, on my page I have navigation bar that helps to move around it. After clicking I remove .active class from previous < li> and give it to new one. In console everything looks nice but on the page there is a problem. I can't see the .active class properties in active < li> and scrolling around it isn't working like it used to before clicking. Here is my page and code:
https://kreha6.github.io/MacopediaTask/
(it's hard to describe what's exactly happening :) )
$(document).ready(function() {
function scrollToId(id){
id = id.replace("link", "");
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}
$("#navbar > ul > li > a").click(function(e) {
$('.active').removeClass('active');
$(this).addClass('active');
e.preventDefault();
scrollToId(this.id);
});
});
SCSS:
.active{
a{
background-color: $transparent !important;
text-decoration: overline;
text-decoration-color: $color1;
}
}
edit:
I changed my code to add class to parent element like this:
$(this).parent().addClass('active');
Bootstrap adds active class to < li> which is a's parent, I tried to do the same thing. For some reason it doesn't work. Anyone know why?

Well you are writing it wrong in SCSS because in JQ
$("#navbar > ul > li > a").click(function(e) {
$('.active').removeClass('active');
$(this).addClass('active'); //here you add class active to the clicked 'a' element
So the a element has class .active on click. But, as I understood from the comments you want the li to have class active , so use:
$(this).parents('li').addClass('active')
and also in CSS you should be more specific, because you could have some styles already set for li.active a, for e.g. write:
#navbar ul.nav li.active > a { /*styles*/ }

You need to target the parent div, try to change $("#navbar > ul > li > a") with $("#navbar > ul > li")
$(document).ready(function() {
function scrollToId(id){
id = id.replace("link", "");
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}
$("#navbar > ul > li").click(function(e) {
$('.active').removeClass('active');
$(this).addClass('active');
e.preventDefault();
scrollToId(this.id);
});
});

I look at your website, your classes are not targeted, change the way they are done in CSS, look the image I have attached for you, the class .active not applied]1
as you see the grey colour is overriden, but your classes get applied in javascript.

you can write script as $(this).parent().addClass('active');

changing a header color by clicking on an anchor href

I'm trying to make a nav bar which will be fixed to the side of the page with an unordered list. The list items will link down the page via anchor.
However, I want an h2 element to change colors based on which element in the fixed nav bar is clicked on.
For example: When "home" is clicked in the nav it will anchor down the page to the id #home and then also change the h2 color to an active color. THEN when "about us" is clicked in the nav, it needs to remove the active color from #home, and add it to #about.
This requires both adding and removing classes through jquery (maybe??) but I just don't know enough. I made a fiddle to get my point across.
This is my current jquery script which will not be able to add a color to an active anchor:
$('#header li a').on('click', function() {
$('li a.current').removeClass('current');
$('#1').addClass('current');});

#1 is in your href and not an id of the link. Using this will get you what was clicked on.
Now if you want alter the headers, you would need to select it with the hash
$('#header li a').on('click', function() {
$('li a.current, h2.current').removeClass('current'); //remove the current class from the link and h2
$(this).addClass('current'); //add current to the link that was clicked
$(this.hash).addClass('current'); //add class to h2 using the hash which gives you the #1, #2 in the href of the link
});
a.current {
background-color: yellow;
}
h2.current {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<ul>
<li>home</li>
<li>about us</li>
<li>directors</li>
<li>admissions</li>
</ul>
</div>
<div>
<h2 id="1">home</h2>
<h2 id="2">about us</h2>
<h2 id="3">directors</h2>
<h2 id="4">admissions</h2>
</div>

In order to change the color of h2 element that has the same id as given in the link you can use:
$('#header li a').on('click', function() {
$('li a.current').removeClass('current');
$($(this).attr('href')).addClass('current');
});

Removing and adding class on hover

I am making a panel of photos/text. All the panels will have an overlay color on them except the first one which has an active class on page load which removes the overlay. As you hover over the second/third etc panels, the overlay active class will remove from first panel and go onto the one that is hovered.
Right now it is only active on page load, I can't seem to get the class off the first div and onto the second div on hover.
if ( $(".overlay:first") ){
$(".overlay:first").addClass("active");
}
else {
if ( $(".overlay:not(:first)").hover ){
$(".overlay:first").removeClass("active");
}
}
https://jsfiddle.net/egdkuh16/3/

There is no need to use JavaScript or jQuery for this. It's best used in CSS with the :hover pseudo-selector. It's also much easier today.
.overlay:first-child {
background: white;
}
.overlay:first-child:hover {
background: gold;
}
If you insist on using jQuery, you can try this
$(".overlay:first").on("mouseover", function() {
$(this).addClass("active");
}).on("mouseout", function() {
$(this).removeClass("active");
});
.active {
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay">First overlay class</div>
<div class="overlay">Second overlay class</div>
This approach is highly frowned upon though

In jQuery, you could do it like this:
$(document).ready(function() {
// Make the first active
$(".overlay:first").addClass("active");
// On hover remove all active classes from .overlay
// and add .active only to the one that is hovered
$(".overlay").hover(function() {
$(".overlay").removeClass("active");
$(this).addClass("active");
});
});
but Richard Hamilton's answer is much better and cleaner.

You can use jQuery's on. For example:
$(".overlay:first").addClass("active");
$(".overlay").on("hover", function(){
$(this).addClass("active");
$(".overlay:first").removeClass("active")
});

Keep parent selected while mouseovering the dropdown in boostrap

What I'm trying to do is to keep the <a> selected while I'm mouseovering the dropdown:
I tried the closest selector but didn't work:
$('.dropdown-menu', this).stop().fadeIn("fast").closest("a").css("background-color", "#eee");
This is my jsfiddle. Thanks.

I'd suggest using CSS:
li:hover {
background-color: #eee;
}
JS Fiddle demo.
Obviously adjust selector-complexity as necessary.

use css
the default styles are added for a tag add this styles for li
.nav > li:hover, .nav > li:focus {
background-color: #eee;
}
demo - http://jsfiddle.net/gpLa33ad/9/

You can modify your function so that it toggles bootstrap's open class on the li element in the dropdown menu after your animation.
// Dropdown Menu Fade
jQuery(document).ready(function () {
$(".mega-inner-dropdown").hover(
function () {
$('.dropdown-menu', this).stop().fadeIn("fast");
$(this).children("li").addClass("open");
},
function () {
$('.dropdown-menu', this).stop().fadeOut("fast");
$(this).children("li").removeClass("open");
});
});
Live example: http://jsfiddle.net/08gxjset/

js Find Class Within Div + toggle CSS/Hide One Show Other

I have 2 divs and each div has a span. By default each span class is set to display: none. I am trying to display: inline the span within whichever div is clicked. If the span is already display: inline then I am trying to revert back to display: none. In other words,
click div1 and span1 shows,
then click div2, span1 hides and span2 shows,
then click div2 again and span2 hides, span1 stays hidden.
How can I achieve this? I am currently stuck on selecting the correct div then I will move on to showing and hiding correctly.
Here is what I currently have:
<html>
<div class="button">foo</div>
<span class='inner'>hey</span> <div class="button">bar</div>
<span class='inner'>hey again</span> </html>
<style>
.inner {
display: none;
}
.button{
display: inline-block;
height:20px;
width:70px;
background-color:#000000;
color:#ffffff;
text-align:center;
} </style>
<script>
$(document).ready(function() {
$('.button').click(function() {
//first off, I am not able to find the span class='inner' within my div.button so this is not correct to find my .inner within $(this)
//alert($(this).find('.inner').html());
//alert($('.inner',this).html());
//then should I do something like this(sorry for the bad syntax, I'm not sure exactly how to write it yet):
//if $(this).('.inner').css('display', 'inline'); { //this span is visible
$(this).('.inner').css('display', 'none'); //so hide this span
else { //span is not visible
$('.inner').hide(); //hide other span
$(this).find('.inner').css('display', 'inline'); //show this span
});
}); </script>
Thank you

Use this,
$(document).ready(function() {
$('.button').click(function() {
var next = $(this).next('.inner');
next.toggle();
$('.inner').not(next).hide();
});
});
Demo Fiddle
Or CSS method,
$(document).ready(function() {
$('.button').click(function() {
var next = $(this).next('.inner');
var cssState = (next.css('display') === 'none')?'inline':'none';
next.css('display',cssState);
$('.inner').not(next).css('display','none');
});
});
Demo Fiddle
.next() - next <span> element.
.toggle() - show/hide based on current state.

You can use jQuery accordian to fix this
All you need to do is import below mentioned lib file
http://code.jquery.com/ui/1.10.4/jquery-ui.js
HTML
<div id="accordion">
<div class="button">foo</div> <span>hey</span>
<div class="button">bar</div> <span>hey again</span>
</div>
JavaScript/jQuery
$(document).ready(function () {
$("#accordion").accordion({
collapsible: true,
active: false
});
})
Please check this demo to get a clear idea
Demo Here

Try,
$('.button').click(function() {
var inner = $(this).next('.inner');
var display = inner.css('display');
inner.css('display',(display === 'none')?'inline':'none');
});
DEMO

Try this :
$(document).ready(function() {
$('.button').click(function() {
$('.inner').hide(); // hide all inner span
$(this).next('.inner').show(); // show next inner span
});
});
Here is the JSFiddle Demo

working code below,please check commenting to understand coding
<script>
$(document).ready(function() {
$(".inner").hide(); //hide all spans
$('.button:first').click(function() {//click on first div
var span1 = $('span:first').show(); // first span will show
});
$('.button:last').click(function() {//click on second div
var span1 = $('span:last').toggle();
var span2 = $('span:first').hide();
});
}); </script>

Test you view this code
.button{
display: inline-block;
height:20px;
width:70px;
background-color:#000000;
color:#ffffff;
text-align:center;
padding:20px;
cursor:pointer;
}
http://jsfiddle.net/kisspa/24jTa/