We Keep Coding

I want to make a list appear when I click on a square, How to do that in javascript?

I have 2 div block: the first one contains three div square and the other one a list. Aside every square, there is a list content. I want to make a list appear when I click on a square, How to do that in javascript? P.S: I don't want the all list appear, but the one corresponding to his square. For example, when I click on the first square, I want the home appear, the second square show the about and the last one for the contact.
<div class="ss">
<div class="s">
</div>
<div class="s">
</div>
<div class="s">
</div>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>

Is this what you want?
Added CSS so as display no list initially. Then had modified the html to include id and then used a js function.
<style>
.list {display: none;}
</style>
<div class="ss">
<div class="s" onclick = "Show('home')">DIV 1</div>
<div class="s" onclick = "Show('about')">DIV 2</div>
<div class="s" onclick = "Show('contact')">DIV 3</div>
</div>
<div class="nav">
<ul>
<li class="list" id = "home">Home</li>
<li class="list" id = "about">About</li>
<li class="list" id = "contact">Contact</li>
</ul>
</div>
<script>
function Show(element) {
var list = document.getElementsByTagName("li");
var i;
for (i = 0; i < list.length; i++)
list[i].style.display = "none";
document.getElementById(element).style.display = "list-item";
}
</script>

you can hide the list by using
display:none;
and add an eventlistner to the div that you want the user to click on to view the list and on click change the display of the list to block like this
document.querySelector(".<your div's classname>").addEventListner("click",function(){
document.querySelector(".list").style.display="block";
});

Is it possible to find out the id of the element mouse is curently pointing at (not clicking) with only javascript, no libraries? [duplicate]

This question already has answers here:
Getting id of any tag when mouseover
(3 answers)
Closed 4 years ago.
I have few separate elements in my html page right next to each other.
I want to show certain content while mouse is on one of those elements, and hide it when mouse moves away from them.
If I just use mouseon/mouseout events, I get some flickering on content i want to show when i move the mouse between correct elements.
For solution I figured i could create an aray of correct element ID's and then check if mouse is pointing at any of array's elements. But can't find a way to get element's id without clicking it.
So is it possible to get the id of the element mouse is curently hovering or pointing at without jquery or other libraries?
HTML part:
<div id="navigationBarContainer">
<ul id="navigationBarList">
<li>Naujienos</li>
<li id="dropDownBarControl">Veikla
<ul id="dropDownBar" class="hideList">
<li id="preschool" class="hide">Pradine</li>
<li id="middleschool" class="hide">Pagrindine</li>
<li id="highschool" class="hide">Abiturientai</li>
<li id="grownups" class="hide">Suauge</li>
<li id="conferences" class="hide">Konferencijos</li>
<li id="other" class="hide">Teminiai</li>
</ul><!--end of dropDownBar-->
</li>
<li>Kainorastis</li>
<li>Registracija
<ul>
<li id="forStudents" class="hide">Mokiniams</li>
<li id="forGrownups" class="hide">Suaugusiems</li>
</ul><!--end of dropDownBar-->
</li>
<li>Kontaktai</li>
</ul><!--end of navigationBarList-->
</div><!--end of navigationBarContainer-->
and Javascript:
function showItem(name){//make item visable
document.getElementById(name).classList.remove("hide");
}
function hideItem(name){//make item hidden
document.getElementById(name).classList.add("hide");
}
document.getElementById('dropDownBarControl').addEventListener("mouseover", function(){
document.getElementById('dropDownBar').classList.replace("hideList", "showList");
var links = ["preschool","middleschool","highschool","grownups","conferences","other"];
var time = 0;
links.forEach(function(element){
time = time + 20;
setTimeout(function(){
showItem(element);
}, time);
});
});
document.getElementById('dropDownBar').addEventListener("mouseout", function(){
document.getElementById('dropDownBar').classList.replace("showList", "hideList");
var links = ["other","conferences","grownups","highschool","middleschool","preschool"];
var time = 0;
links.forEach(function(element){
time = time + 20;
setTimeout(function(){
hideItem(element);
}, time);
});
});

Listens to mouse move and tracks when the underlying element changes.
uses document.elementAtPoint(x,y);
let element = undefined;
document.addEventListener('mousemove', (event) => {
let x = event.pageX;
let y = event.pageY;
let newElement = document.elementFromPoint(x,y);
if(!element || element !== newElement) {
element = newElement;
console.log(element.id||element);
}
});
<div id="navigationBarContainer">
<ul id="navigationBarList">
<li>Naujienos</li>
<li id="dropDownBarControl">Veikla
<ul id="dropDownBar" class="hideList">
<li id="preschool" class="hide">Pradine</li>
<li id="middleschool" class="hide">Pagrindine</li>
<li id="highschool" class="hide">Abiturientai</li>
<li id="grownups" class="hide">Suauge</li>
<li id="conferences" class="hide">Konferencijos</li>
<li id="other" class="hide">Teminiai</li>
</ul><!--end of dropDownBar-->
</li>
<li>Kainorastis</li>
<li>Registracija
<ul>
<li id="forStudents" class="hide">Mokiniams</li>
<li id="forGrownups" class="hide">Suaugusiems</li>
</ul><!--end of dropDownBar-->
</li>
<li>Kontaktai</li>
</ul><!--end of navigationBarList-->
</div><!--end of navigationBarContainer-->

Vanilla Javascript click and close nav

I am still learning to do plain old vanilla javascript. I am trying to hide my slideToggle or even the whole background of the drop down menu I did to close when user clicks on the any link. Am I missing something because I am not getting any error but it doesn't display none on the slideToggle class.
js
var anchors = document.querySelectorAll(".a");
for (var i = 0; i < anchors.length; i++) {
anchors[i].addEventListener('click', function(e){
var btn = document.querySelector(".slideToggle");
if (window.getComputedStyle(btn,null).getPropertyValue("display") != 'none') {
btn.click();
}
})
}
html
<nav id="mainNav">
<h1 class="hidden">Main Navigation</h1>
<button id="button"><span class="hidden">Toggle</span></button>
<ul id="burgerMenu">
<li>Home</li>
<li>Latest Work</li>
<li>About</li>
<li>Prices</li>
<li>Contact</li>
</ul>
</nav>

instead of using document.querySelectorAll(".a") use document.querySelectorAll("a"). also I don't see an element with slideToggle as a class. using a "." as a selector means you are searching for a class.

JS hiding a div while targeting anchor

I have multiple divs (class="profile") wich are hidden by default. Each div is only shown when targeted. I want all divs with class="employeeul" to be hidden when one of the profile divs is targeted. I don't get this working with css, does anyone know why? A JS solution is good as well. (I think I can't use something like onclick, because the divs must hide when the anchors are accessed from other sites.)
This is my code (I removed the divs content):
<div class="narrow_content">
<div class="profile" id="m_empfang0"></div>
<div class="profile" id="m_empfang1"></div>
<div class="profile" id="m_mitarbeiter0"></div>
<div class="profile" id="m_mitarbeiter1"></div>
<div class="profile" id="m_mitarbeiter2"></div>
<div class="profile" id="m_mitarbeiter3"></div>
<div class="profile" id="m_mieter0"></div>
<div class="profile" id="m_mieter1"></div>
<div class="profile" id="m_mieter2"></div>
<div class="employeeul">
<ul> <!-- Empfang -->
<li class="employee"></li>
<li class="employee"></li>
</ul>
</div>
<div class="employeeul">
<ul> <!-- Mitarbeiter -->
<li class="employee"></li>
<li class="employee"></li>
<li class="employee"></li>
<li class="employee"></li>
</ul>
</div>
<div class="employeeul">
<ul> <!-- Mieter -->
<li class="employee"></li>
<li class="employee"></li>
<li class="employee"></li>
</ul>
</div>
</div>

It seems like you just need the syntax for displaying/hiding items dynamically when the page has a specific url. In that case, here is a simple JS solution:
//get an array of elements with the class we're interested in working with
var employeeuls = document.getElementsByClassName("employeeul");
//get the current url
var url = window.location.href;
//if the current url is equal to example.php#profile, hide some elements
if(url == "example.php#profile")
{
//iterate over the array and apply the style to hide the elements
for(i=0; i < employeeuls.length; i++)
{
employeeuls[i].style.display = "none";
}
}
//otherwise, the elements should be hidden
else
{
//iterate over the array and apply the style to hide the elements
for(i=0; i < employeeuls.length; i++)
{
employeeuls[i].style.display = "block";
}
}
NOTE: "block" is the default display property for unordered lists.
I understand you're not using jQuery, but I'm going to include the jQuery equivalent for anyone viewing this post in the future:
//variable assigned to all elements with class "employeeul"
var employeeuls = $(".employeeul");
//get the current url
var url = $(location).attr("href");
//apply the style change
if(url == example.php#profile)
{
employeeuls.hide();
}
else employeeuls.show();

If by targeting, you mean the hash value in the URL, you just need to write some JS to grab that hash value and toggle the css. Then toggle show/hide (or a visibility class via jQuery).
$(document).ready(function(){
var $profiles = $('.profile'); // Store all the profiles in a query
var hashTarget = location.hash.replace('#', ''); // Returns hash value
function showTargetedDiv(){
$profiles.hide(); // Hide any divs that may previously be showing
$('#' + hashTarget).show();
}
showTargetedDiv();
$(window).on('hashchange', showTargetedDiv); // Event handler
});

How to change a colore of menu bar when user click on net link

I want yo Change a color of nave when user click on other nav button i don't no how can i do this by code here is a image below:
when user click in abut then that color should be change in orange and home page active orange color will be black and about will be orange. i want to do this by JavaScript. here is a code lines below.
<div class="container clearfix">
<nav id="menu" class="navigation"
role="navigation" style="float: left">
Show navigation
<ul id="nav">
<li class="active">Home</li>
<li>About</li>
<li>T-P</li>
<li>M-P</li>
<li>B-M</li>
<li>R-B</li>
<li>L-C</li>
</ul>
</nav>
</div>
i use this JavaScript for change this.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
var make_button_active = function()
{
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index)
{
$(this).removeClass('active');
} )
//Add the clicked button class
$(this).addClass('active');}
//Attach events to menu
$(document).ready(
function()
{
$(".menu li").click(make_button_active);
} )
</script>
but nothing happen please let me know how can i do this. anyone have any Idea?
Thank You

There are a number of issues here. For one menu is the value of an id so you would need to reference it in jquery with $('#menu"). Below is a working version of your code. I had to remove the href attributes to achieve the desired style change with minimal effort. You now have two choices:
Use this code and swap content dynamically using javascript and css display property
On each page in your site modify the markup, to set the active nav item; with this approach the javascript is not necessary.
<htmL>
<head>
<script type="text/javascript">
var make_button_active = function(){
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index){
$(this).removeClass('active');
});
//Add the clicked button class
$(this).addClass('active');
}
//Attach events to menu
$(document).ready(function(){
$("li").click(make_button_active);
});
</script>
<style>
.active{
background-color: red;
}
</style>
</head>
<body>
<div class="container clearfix">
<nav id="menu" class="navigation"
role="navigation" style="float: left">
Show navigation
<ul id="nav">
<li class="active"><a>Home</a></li>
<li><a >About</a></li>
<li><a >T-P</a></li>
<li><a >M-P</a></li>
<li><a >B-M</a></li>
<li><a >R-B</a></li>
<li><a >L-C</a></li>
</ul>
</nav>
</div>
</body>
</html>

Hi more simple way to chafe class in li
string thisURL = this.Page.GetType().Name.ToString();
switch (thisURL)
{
case "home_aspx":
lihome.Attributes.Add("class", "Active");
break;
case "support_aspx":
lisupport.Attributes.Add("class", "Active");
break;
case "logout_aspx":
lilogout.Attributes.Add("class", "Active");
break;
}
need to do this code on load event of page and it will working that vote for this solution=)