We Keep Coding

Simultaneously toggle active class in child li and at the same time toggle class in grand-parent div that matches the active child li class

I already know how to toggle the active class within each list item (li) when clicked.
But what I need is to copy the uniquely numbered class from the active li (example: .content-item-3.active) to the grand-parent div (.content-grand-dad) > (.content-grand-dad.content-item-3) when each li is toggled and active.
I do not mind if the code is through JQuery or Vanilla JavaScript.
$(document).ready( function() {
$('.content-item').click(function() {
$('.content-item.active').removeClass("active");
$(this).addClass("active");
});
});
.content-item {
cursor: pointer;
}
.content-item-1.active {
color: red;
}
.content-item-2.active {
color: blue;
}
.content-item-3.active {
color: green;
}
.content-item-4.active {
color: yellow;
}
.content-cousin {
display: none;
}
.content-grand-dad.content-item-1 ~ .content-cousin-1, .content-grand-dad.content-item-2 ~ .content-cousin-2, .content-grand-dad.content-item-3 ~ .content-cousin-3, .content-grand-dad.content-item-4 ~ .content-cousin-4 {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-grand-dad content-item-1">
<ul class="content-column">
<li class="content-item content-item-1 active">
<p>Line 1</p>
</li>
<li class="content-item content-item-2 ">
<p>Line 2</p>
</li>
<li class="content-item content-item-3 ">
<p>Line 3</p>
</li>
<li class="content-item content-item-4 ">
<p>Line 4</p>
</li>
</ul>
</div>
<div class="content-cousin content-cousin-1">
<h3>Word 1 </h3>
</div>
<div class="content-cousin content-cousin-2">
<h3>Word 2 </h3>
</div>
<div class="content-cousin content-cousin-3">
<h3>Word 3 </h3>
</div>
<div class="content-cousin content-cousin-4">
<h3>Word 4 </h3>
</div>

For my answer I replaced the numbered classes with a data attribute that holds the number.
Then on load I find the active item and show the corresponding cousin.
Then in my event handler, I simply remove an active class from the cousin, then add an active class to the appropriate cousin based on the selected data attribute.
I also have a new active class that is display block, without the need for the full list of css selectors as before.
Instead of referring to the classes, I also used nth-child to change the color of the items in the list so that way the ids can be more dynamic if needed.
$(document).ready( function() {
//load initial cousins
let active = $(".content-item.active").data("item");
$(".content-cousin[data-item='" + active + "']").addClass("active");
$('.content-item').click(function(e) {
$('.content-item.active').removeClass("active");
$('.content-cousin.active').removeClass("active");
$(this).addClass("active");
$(".content-cousin[data-item='" + $(this).data("item") + "']").addClass("active");
});
});
.content-item {
cursor: pointer;
}
.content-column .content-item.active:nth-child(1){
color: red;
}
.content-column .content-item.active:nth-child(2){
color: blue;
}
.content-column .content-item.active:nth-child(3){
color: green;
}
.content-column .content-item.active:nth-child(4){
color: yellow;
}
.content-cousin {
display: none;
}
.content-cousin.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-grand-dad">
<ul class="content-column">
<li data-item="1" class="content-item active">
<p>Line 1</p>
</li>
<li data-item="2" class="content-item">
<p>Line 2</p>
</li>
<li data-item="3" class="content-item">
<p>Line 3</p>
</li>
<li data-item="4" class="content-item">
<p>Line 4</p>
</li>
</ul>
</div>
<div data-item="1" class="content-cousin">
<h3>Word 1 </h3>
</div>
<div data-item="2" class="content-cousin">
<h3>Word 2 </h3>
</div>
<div data-item="3" class="content-cousin">
<h3>Word 3 </h3>
</div>
<div data-item="4" class="content-cousin">
<h3>Word 4 </h3>
</div>

How can I make all elements work with onmouseover, onmouseout correctly?

My first go at making my own mini webpage from scratch, specifically looking to understand how onmouseover/onmouseout works using .display.opacity. I would like to hover my mouse over each element and it displays text specified text while the rest of the webpage disappears. Hope I gave enough information first time using StackOverflow.
my first element works perfectly with the function created showHilton().
however my second element and function "showInnovel();" does not
I currently have 3 elements and would like this to work with all if possible
<ul>
<li onmouseover="showHilton();" onmouseout="showHilton();"class="hiltonGrand" id="HGV">Hilton Grand Vacations</li>
<li id="hilton" style="opacity:0; background: black; color: white; text-align:right;">hello</li>
<li onmouseover="showInnovel();" onmouseout="showInnovel();"class="in" id="inSol">Innovel Solutions</li>
<li id="iS" style="opacity:0; background: black; color: white; text-align:right;">innovel</li>
<li class="DR" id="Dr">Diamond Resorts</li>
<li id="diamond" style="opacity:0; background: black; color: white; text-align:right;">Diamond</li>
</ul>
</div>
<div>
<!--Back button-->
<!--Home Button-->
<!--Customer Service-->
</div>
<script type="text/javascript">
var hilton = document.getElementById("hilton");
var innovel = document.getElementById("inSol");
var Dr = document.getElementById("Dr");
var hGV = document.getElementById("HGV");
var iS = document.getElementById("iS");
function showHilton() {
if(hilton.style.opacity == 0){
//element.style.display = "block";
hilton.style.opacity= 1;
innovel.style.opacity = 0;
Dr.style.opacity=0;
} else {
//element.style.display = "none";
hilton.style.opacity=0;
innovel.style.opacity=1;
Dr.style.opacity=1;
}
}
function showInnovel() {
if(iS.style.visibility == 0){
//element.style.display = "block";
iS.style.opacity = 1;
hGV.style.opacity = 0;
Dr.style.opacity=0;
} else {
//element.style.display = "none";
iS.style.opacity=0;
hGV.style.opacity=1;
Dr.style.opacity=1;
}
}

Your current setup uses a HTML structure like so:
<ul>
<li>Toggle 1</li>
<li>Content 1</li>
<li>Toggle 2</li>
<li>Content 2</li>
</ul>
This makes it quite hard to toggle the next element, whichc would require some js as you've already stated in your question.
I would re-work the html, to something like:
<ul>
<li>
Toggle 1
<p>Content 1</p>
</li>
<li>
Toggle 2
<p>Content 2</p>
</li>
</ul>
This way we can use native css to toggle the display property on the child elements to get the desired output:
/* Hide */
li > p {
display: none;
background: black;
color: white
}
/* Show on hover */
li:hover > p {
display: block;
}
<div>
<ul>
<li class="hiltonGrand" id="HGV">
Hilton Grand Vacations
<p>hello</p>
</li>
<li class="in" id="inSol">
Hilton Grand Vacations
<p>innovel</p>
</li>
<li class="DR" id="DR">
Hilton Grand Vacations
<p>Diamond</p>
</li>
</ul>
</div>
<div>
<!--Back button-->
<!--Home Button-->
<!--Customer Service-->
</div>

Menu bar Malfunctioning with AngularJs

I am bit new to AngularJs so I have got stuck into the problem.
Let me explain what I want to achieve.
I have design two div with child and parent relation.
// first parent div
<div>
<div>
child div // show/hide content of this div
</div>
</div>
// second parent div
<div>
<div>
child div // show/hide content of this div
</div>
</div>
When I hover or move the mouse over parent div it should hide/show the respective child div.
But with my code on hover it hides/shows the content of both the child div.What changes do I have to do in code?
See complete code
<body ng-app="app">
<div ng-app="headermain" ng-controller="headerController">
<div class="top-menu col-xs-36 ">
// parent div one
<div class="menu-item col-xs-6" ng-mouseover="hoverIn()" style="background-color:pink">
<span >Parent one</span>
// child div, want to hide/show content of this div
<div class="drop-down;col-xs-10" ng-show="showMe" ng-mouseleave="hoverOut()" style="background-color:pink">
<ul>
<li>child one details</li>
<li>parent one detail</li>
</ul>
</div>
</div>
// parent div two
<div class="menu-item col-xs-6" ng-mouseover="hoverIn()">
<span >Parent two</span>
// child div, want to hide/show content of this div
<div class="drop-down;col-xs-10" ng-show="showMe" ng-mouseleave="hoverOut()">
<ul>
<li>child two Details</li>
<li>parent two detail</li>
</ul>
</div>
</div>
</div>
</div>
Controller for this code, see below
var app = angular.module("app", []);
app.controller("headerController",function($scope){
$scope.hoverIn = function(){
this.showMe = true;
};
$scope.hoverOut = function(){
this.showMe = false;
};
});
Css file
.top-menu {
overflow: hidden;
}
.top-menu .drop-down {
position: absolute;
top: 20px;
z-index: 10000;
background-color: white;
box-shadow: 0px 0px 3px rgb(241, 241, 241);
border: 1px solid #d1d1d1;
}
.top-menu .drop-down ul {
padding: 0px;
margin: 0px;
list-style-type: none;
min-width: 180px;
}

You have to change the name of your functions since both div's are using the same function and changing the same attribute showMe.
HTML:
<body ng-app="app">
<div ng-app="headermain" ng-controller="headerController">
<div class="top-menu col-xs-36 ">
// parent div one
<div class="menu-item col-xs-6" ng-mouseover="hoverIn(1)" style="background-color:pink">
<span>Parent one</span> // child div, want to hide/show content of this div
<div class="drop-down;col-xs-10" ng-show="showMe[1]" ng-mouseleave="hoverOut(1)" style="background-color:pink">
<ul>
<li>child one details</li>
<li>parent one detail</li>
</ul>
</div>
</div>
// parent div two
<div class="menu-item col-xs-6" ng-mouseover="hoverIn(2)">
<span>Parent two</span> // child div, want to hide/show content of this div
<div class="drop-down;col-xs-10" ng-show="showMe[2]" ng-mouseleave="hoverOut(2)">
<ul>
<li>child two Details</li>
<li>parent two detail</li>
</ul>
</div>
</div>
</div>
</div>
JS:
$scope.showMe=[];
$scope.hoverIn = function(id) {
$scope.showMe[id] = true;
};
$scope.hoverOut = function() {
$scope.showMe[id] = false;
};

jQuery switch active class depending on which section is showing

I have several sections within a document as follows:
<section id="step1">
</section>
<section id="step2" style="display:none">
</section>
<section id="step3" style="display:none">
</section>
I am showing and hiding these depending on user interaction. I wanted to have some kind of circular heading to indicate the user is on section 2 of 3 for example like so:
<div id="indicators" class="clearfix">
<div class="center-div">
<ul>
<li id="step1-circle" class="circle active"></li>
<li id="step2-circle" class="circle"></li>
<li id="step3-circle" class="circle"></li>
</ul>
</div>
</div>
How would I switch the active class depending on which section is showing?

You can use the addClass() method in tandem with the removeClass() method like:
function makeIndicatorCircleActive(id){
// Remove active state of current circle
$('#indicators .active').removeClass('active');
// Add active state to desired element
$(id).addClass('active');
}
// Somewhere else in the code...
makeIndicatorCircleActive('#step2-circle);

I've added a button for the animation. You'd need to show more example code of your implementation, but you may be able to get away with let $section = $('section:visible') and instead of putting this in a click function, create a generic function name, which is triggered whenever your event occurs.
$('button').click(function() {
// context used for jQuery
let $section = $(this).closest('section');
// get next circle, if current circle is last, then get first circle
var $next = $('.circle.active', $section).next('.circle'),
$next = ($next.length && $next) || $('.circle', $section).first();
$('.circle.active', $section).removeClass('active'); // remove all actives
$next.addClass('active'); // add new active
});
.circle {
background: black;
border-radius: 25px;
display: inline-block;
list-style-type: none;
width: 50px;
height: 50px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}
.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="clearfix">
<div class="center-div">
<ul>
<li class="circle active"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
</div>
<button>Next</button>
</div>
</section>
<section>
<div class="clearfix">
<div class="center-div">
<ul>
<li class="circle active"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
</div>
<button>Next</button>
</div>
</section>

jquery toggle tabs hide active class when clicking same tab

when i click tab 1, 1 content show and active tab class is added.
when i click tab 2, 1 content hides remove tab active class and 2 content show and adds tab active class
but the effect i want is when i click tab 1, 1 content show, click again tab 1 content hides but the tab active class doesn't remove.
Any suggest will be help thanks
<div id="tabs_container">
<ul class="tabs">
<li>
Option 1
</li>
<li>
Option 2
</li>
</ul>
<div class="tab_contents_container">
<div id="tab_1_contents" class="tab_content tab_contents_active">
Option 1 stuff
</div>
<div id="tab_2_contents" class="tab_content">'
Option 2 stuff</div>
</div>
</div>
</div>
<script>
$('.tab-content').hide();
$('.tab').click(function() {
var target = $(this.rel);
$('.tab-content').not(target).hide();
target.toggle();
$('#tabs_container > .nav-tabs > li.tabActive')
.removeClass('tabActive');
$(this).parent().addClass('tabActive');
$('#tabs_container > .tab_contents_container > div.tab_contents_active')
.removeClass('tab_contents_active');
$(this.rel).addClass('tab_contents_active');
});
</script>

you need to use .toggleClass();
$('#tabs_container > .nav-tabs > li.tabActive').not($(this).parent()).removeClass('tabActive');
$(this).parent().toggleClass('tabActive');
$('.tab').click(function() {
var target = $(this.rel);
$('#tabs_container li').not($(this).parent()).removeClass('tabActive');
$(this).parent().toggleClass('tabActive');
$('#tabs_container > .tab_contents_container > div').not($(target)).removeClass('tab_contents_active');
$(target).toggleClass('tab_contents_active');
}).eq(0).click();
.tabActive{
background : #005eff;
padding : 5px;
}
.tabActive > a{
color :#fff;
}
.tab_content{
display : none;
}
.tab_contents_active{
display : block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs_container">
<ul class="tabs">
<li>
Option 1
</li>
<li>
Option 2
</li>
</ul>
<div class="tab_contents_container">
<div id="tab_1_contents" class="tab_content">
Option 1 stuff
</div>
<div id="tab_2_contents" class="tab_content">
Option 2 stuff
</div>
</div>
</div>

Use target.show(); instead of target.toggle();. .toggle() will show()/hide() elements based on its current visibility
Also correct typo. You are using - instead of _ while selecting items.
$('.tab_content').hide(); //typo here!
$('.tab').click(function() {
$('.tab_content').hide();
var target = $(this.rel);
if ($(this).parent().hasClass('tabActive')) {
target.hide();
$(this).parent().removeClass('tabActive');
} else {
$('.tabs li').removeClass('tabActive');
target.show();
$(this).parent().addClass('tabActive');
}
});
.tabActive {
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="tabs_container">
<ul class="tabs">
<li>
Option 1
</li>
<li>
Option 2
</li>
</ul>
<div class="tab_contents_container">
<div id="tab_1_contents" class="tab_content">
Option 1 stuff
</div>
<div id="tab_2_contents" class="tab_content">Option 2 stuff</div>
</div>
</div>

A simpler version of your code:
$('.tab').click(function() {
$('.tab_content').removeClass('tab_contents_active');
$(this.rel).addClass("tab_contents_active");
});
.tab_content { display:none;}
.tab_content.tab_contents_active { display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs_container">
<ul class="tabs">
<li>
Option 1
</li>
<li>
Option 2
</li>
</ul>
<div class="tab_contents_container">
<div id="tab_1_contents" class="tab_content tab_contents_active">
Option 1 stuff
</div>
<div id="tab_2_contents" class="tab_content">
Option 2 stuff</div>
</div>
</div>
</div>