Develop Reference

ClassName, Index, Multiple dropdown

I have several links in the menu. Each link is making opacity from 0 to 1 for hidden div. I made dropdown menu this way because I use flex inside that div so I toggle the opacity.
I am using document.getElementsByClassName for selecting an elements. When someone is making a variable with this selector basically he or she has an array with all of the elements with this class.
My code is working, because when I envoke the function from HTML, I'm doing it using parameters. What I would like to do is to connect the link I'm clicking and the div that it shows by index. For example, all links with class A are opening divs with class B. I want to be sure that the first link with class A always opens the first link with class B. I don't want to rely on the parameters in HTML.
How can I do it more efficiently?
function showDropDown(n) {
let hiddenDiv = document.getElementsByClassName("hidden_dropdown_div");
hiddenDiv[n].classList.toggle("active");
for (let i = 0; i < hiddenDiv.length; i++) {
if (i != n) {
hiddenDiv[i].classList.remove("active")
};
}
};
$(".maindrop_link").click(function(e) {
e.stopPropagation(); // This is the preferred method.
return false; // This should not be used unless you do not want
// any click events registering inside the div
});
$(document).click(function() {
let hiddenDiv = document.getElementsByClassName("hidden_dropdown_div");
for (let i = 0; i < hiddenDiv.length; i++) {
hiddenDiv[i].classList.remove("active");
}
});
.hidden {
opacity: 0;
}
.active {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- See the link above the hidden block -->
<li class="dropmenu inlineblock">
<a class="maindrop_link" href="#" onclick="showDropDown(0)">Makeup</a>
</li>
<div class="hidden_dropdown_div hidden" id="hidden_dropdown_div">
<div class="hidden_dropdown_link_wrapper">
<ul class="hidden_dropdown_ul">
<li><a class="hiddendrop_link" href="#">Wedding Makeup</a></li>
<li><a class="hiddendrop_link" href="#">Event Makeup</a></li>
<li><a class="hiddendrop_link" href="#">Creative Makeup</a></li>
</ul>
</div>
<div class="hidden_dropdown_pic_wrapper">
<div class="item_for_hidden_div">
<div class="picholder_for_hidden_div"></div>
<div class="textholder_for_hidden_div"></div>
</div>
<div class="item_for_hidden_div">
<div class="picholder_for_hidden_div"></div>
<div class="textholder_for_hidden_div"></div>
</div>
<div class="item_for_hidden_div">
<div class="picholder_for_hidden_div"></div>
<div class="textholder_for_hidden_div"></div>
</div>
</div>
</div>

alert when multiple elements with the same class name have an added class

I need an alert to show up when all elements have had a class added to them
html
<ul class="container">
<li class="box"> </li>
<li class="box"> </li>
<li class="box"> </li>
</ul>
jquery -
$(document).ready(function() {
$('.box').click(function() {
$(this).addClass('Boxaddedclass');
});
});
After each box is clicked, a class of 'Boxaddedclass' is added to each list with the class of '.box'.
jquery -
$(document).ready(function () {
$(".box").click(function () {
if($(".box").hasClass("Boxaddedclass")) {
alert('all boxes have the added class')
}
});
At the moment, after I click each individual Box class, an alert comes up each time, I need the alert to appear when all of them have the added class rather than individually. Any way around this?

Compare the number of elements classed .box with .Boxaddedclass
var boxCount = $(".box").length;
var addedBoxClass = $(".Boxaddedclass").length;
if (boxCount === addedBoxClass) {
alert("All boxes have added the class"); //note that I don't support alert, you really should console.log it, or do something fancier
}

$(".box.Boxaddedclass") selector could be used to check .box elements also has .Boxaddedclass class.
Only using $(".Boxaddedclass") will not consider .box elements having Boxaddedclass class!
$('.box').click(function() {
$(this).addClass('Boxaddedclass');
});
$('button').on('click', function() {
var boxCount = $(".box").length;
var addedBoxClass = $(".box.Boxaddedclass").length;
if (boxCount === addedBoxClass) {
alert("All boxes have added the class");
} else {
alert('Not yet!')
}
});
.Boxaddedclass {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="container">
<li class="box">Content...</li>
<li class="box">Content...</li>
<li class="box">Content...</li>
</ul>
<div class="Boxaddedclass">Other content not having `box` class but `Boxaddedclass`</div>
<br>
<button>Check</button>

Change class of div on click

Seemingly simple question which is confusing me... all answers seem to be for JQuery only.
I am generating a table calendar with PHP.
Each day on the calendar is a tr > td > div which looks like this at the moment:
{cal_cell_content}
<div class="" id="event" href="" onclick="this.className=\'selected\';return getDate({day});">
{day}
</div>
{/cal_cell_content}
When a user clicks on one of the divs I want the background of that div to change its css class to 'selected'.
Then, if the user clicks another div I want that class to change to selected and the previous class to be removed so that only one div at any time can be 'selected'.
At the moment I am using this.className='selected which works except multiple divs can be selected!
How do get behaviour so that I can select a single div and highlight it, then if I decide to click another div, the previous div becomes de-selected and the new div is 'selected'?

Add an event listener to the div class via a loop, and add another class "selected" to the div if it is clicked. Otherwise, remove the "selected" class. The "selected" class will contain your css stuff.
For instance,
var x = document.getElementsByClassName('yourClass')
for (var i = 0; i < x.length; i++) {
x[i].addEventListener("click", function(){
var selectedEl = document.querySelector(".selected");
if(selectedEl){
selectedEl.classList.remove("selected");
}
this.classList.add("selected");
}, false);;
}

try this native javascript
document.getElementById('event').setAttribute('class', 'selected');

Your divs have same ID, which is wrong, do it like this
{cal_cell_content}
<div class="event" href="">
{day}
</div>
{/cal_cell_content}
$('.event').click(function(){
$('.event').removeClass('selected');
$(this).addClass('selected');
});
with javascript:
{cal_cell_content}
<div class="event" href="" onclick="selectMe(this);">
{day}
</div>
{/cal_cell_content}
function selectMe(obj){
var divs = document.getElementsByClassName("event");
for(var i = 0; i < divs.length; i++)
{
divs[i].className = "event";
}
obj.className = "event selected"
}

$('#event').click(function(){
$(this).attr('class', 'selected');
});

In Standard javascript:
document.getElementById('foo').className += ' selected'
or in JQuery:
$('#foo').addClass('selected');

Hide/show div in ul with javascript

Let me start by saying I know this is a duplicate, however I couldn't find a solution by looking through previous answers so I was hoping someone can explain what I'm doing wrong with this.
This is part of a menu output by a php script:
<ul id="mtk_main_menu">
<li class="mtk_topmenu" onMouseOver="showMenu('mtk_submenu_0', 'mtk_div_submenu_0');">Manager Options
<div id="mtk_div_submenu_0">
<ul id="mtk_submenu_0">
<li class="mtk_submenu">Preferences</li>
<li class="mtk_submenu">Employee Options</li>
</ul>
</div>
</li>
with the following as my script as per https://stackoverflow.com/a/11842992, which should show each submenu when hovering its parent container
function showMenu(a,b) {
$(a).hover(
function(){
$(b).show();
},
function(){
$(b).hide();
})
}
Javascript and CSS being my weak suits, could someone tell me where my problem is? I feel like onMouseOver doesn't work the way I would expect it to. However I am still learning to manipulate the DOM, please bear with me, thank you!
Edited to reflect missingno's suggestions

For simple scenarios, i'd rather stay away from using JS
Heres how
HTML
<ul id="mtk_main_menu">
<li class="mtk_topmenu" onMouseOver="showMenu('mtk_submenu_0, mtk_div_submenu_0');">Manager Options
<div id="mtk_div_submenu_0">
<ul id="mtk_submenu_0">
<li class="mtk_submenu">Preferences</li>
<li class="mtk_submenu">Employee Options</li>
</ul>
</div>
</li>
CSS
#mtk_main_menu:before,
#mtk_main_menu:after {
content:"";
display:table;
clear:both;
}
#mtk_main_menu {
*zoom:1;
}
#mtk_main_menu > li {
position:relative;
float:left;
}
#mtk_main_menu > li > div {
position:absolute;
left:-999px;
background:grey;
}
#mtk_main_menu > li:hover > div {
left:0;
}
That will do the trick
Fiddle: http://jsfiddle.net/Varinder/7pXSw/
Edit
If you really want to go the JS way - heres how:
HTML
<ul id="mtk_main_menu">
<li class="mtk_topmenu" onMouseOver="showMenu('mtk_submenu_0, mtk_div_submenu_0');">Manager Options
<div id="mtk_div_submenu_0">
<ul id="mtk_submenu_0">
<li class="mtk_submenu">Preferences</li>
<li class="mtk_submenu">Employee Options</li>
</ul>
</div>
</li>
CSS
#mtk_main_menu:before,
#mtk_main_menu:after {
content:"";
display:table;
clear:both;
}
#mtk_main_menu {
*zoom:1;
}
#mtk_main_menu > li {
position:relative;
float:left;
}
#mtk_main_menu > li > div {
position:absolute;
display:none;
/*left:-999px;*/
background:grey;
}
#mtk_main_menu > li:hover > div {
/*left:0;*/
}
JS
function showMenu( args ) {
var arguments = args.split(",");
var submenuWrapper = arguments[1].replace(" ", "");
var $subMenuWrapper = $( "#" + submenuWrapper );
$subMenuWrapper.show();
var $menuItem = $subMenuWrapper.closest("li");
$menuItem.on("mouseout", function() {
$subMenuWrapper.hide();
$(this).off("mouseout");
});
}
Fiddle: http://jsfiddle.net/Varinder/vnwy3/1/

You are calling the event handler with a single string parameter instead of two. Try changing
showMenu('mtk_submenu_0, mtk_div_submenu_0')
into
showMenu('mtk_submenu_0', 'mtk_div_submenu_0')
Additionally, inside your script you should use are using literal strings instead of using your parameters
//This looks for an element of class "a"
$("a").hover(
//This uses the contents of the `a` variable instead:
$(a).hover(
Finally, your function is using 'mtk_submenu_0' as a jquery selector. This searches for a class instead of an id. Change the selector to add a "#" on front or change your jquery logic to not need ids (for example, you could create selectors to search for the first div and ul descendants of the current element.

By doing what you are doing, every time the onMouseOver event is triggered, you're attaching the jQuery hover event. Each time you're attaching another listener.
Instead, initialize your event on document ready:
$(function () {
$("#tk_div_submenu_0").hover(
function(){
$("#mtk_submenu_0").show();
},
function(){
$("#mtk_submenu_0").hide();
})
);
});
That will initialize it when the document is ready, and it will initialize it once.
Then just remove your onMouseOver event from the HTML.
<li class="mtk_topmenu">Manager Options ... </li>

First, you're going the long way around the problem. jQuery has a built in toggle method that performs the show/hide for you. Secondly you're putting the hover call on the child element of the item you're trying to show on hover. Here's an updated version of your code:
<ul id="mtk_main_menu">
<li class="mtk_topmenu" onMouseOver="showMenu(this,'mtk_div_submenu_0');">
Manager Options
<div id="mtk_div_submenu_0">
<ul id="mtk_submenu_0">
<li class="mtk_submenu">Preferences</li>
<li class="mtk_submenu">Employee Options</li>
</ul>
</div>
</li>
</ul>
JS:
function showMenu(a,b) {
var divStr = '#' + a.id + " div";
$(divStr).toggle();
}
I used the hover event on the LI element as it makes more sense in this case.
Here it is in a fiddle: http://jsfiddle.net/3Ecrq/

One thing I find strange about your code is that the first div you mention, mtk_submenu_0, is inside the div you are showing / hiding, mtk_div_submenu_0. Once you hide the outer div, the inner div cannot be 'hovered over', thus preventing it from being shown again.
To ensure the inner div does not get hidden, try something like this:
HTML:
<ul id="mtk_main_menu">
<li class="mtk_topmenu">Manager Options
<div id="mtk_div_submenu_0">
<ul id="mtk_submenu_0">
<li class="mtk_submenu">Preferences</li>
<li class="mtk_submenu">Employee Options</li>
</ul>
</div>
</li>
Javascript:
$(document).ready(function() {
$('.mtk_topmenu').hover(
function() {
$('#mtk_div_submenu_0').show();
},
function() {
$('#mtk_div_submenu_0').hide();
});
});
Because of your line:
<li class="mtk_topmenu" onMouseOver="showMenu('mtk_submenu_0', 'mtk_div_submenu_0');">
I assumed you were looking to have the mtk_div_submenu_0 div show / hide whenever the text Manager Options is moused over. Hopefully this helps!

Linking to a section of a site that is hidden by a hide/show JavaScript function

I am using a bit of JavaScript to show/hide sections of a site when a tab is clicked. I'm trying to figure out if there is a way I can link back to the page and have a certain tab open based on that link.
Here is the JS:
var ids=new Array('section1','section2','section3','section4');
function switchid(id, el){
hideallids();
showdiv(id);
var li = el.parentNode.parentNode.childNodes[0];
while (li) {
if (!li.tagName || li.tagName.toLowerCase() != "li")
li = li.nextSibling; // skip the text node
if (li) {
li.className = "";
li = li.nextSibling;
}
}
el.parentNode.className = "active";
}
function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}
function hidediv(id) {
//safe function to hide an element with a specified id
document.getElementById(id).style.display = 'none';
}
function showdiv(id) {
//safe function to show an element with a specified id
document.getElementById(id).style.display = 'block';
}
And the HTML
<ul>
<li class="active"><a onclick="switchid('section1', this);return false;">One</a></li>
<li><a onclick="switchid('section2', this);return false;">Two</a></li>
<li><a onclick="switchid('section3', this);return false;">Three</a></li>
<li><a onclick="switchid('section4', this);return false;">Four</a></li>
</ul>
<div id="section1" style="display:block;">
<div id="section2" style="display:none;">
<div id="section3" style="display:none;">
<div id="section4" style="display:none;">
I haven't been able to come up with a way to link back to a specific section. Is it even possible with this method?
Thanks!

You could run some script when your page loads that checks the url hash & loads the appropriate section:
// on page load
var sectionid = /section\d/i.exec(location.hash);
if (sectionid) {
var link = document.getElementById(switchid[0] +"_link");
switchid(sectionid[0], link);
}
& add an id to your links:
<li><a id="section2_link" onclick="switchid('section2', this);return false;">Two</a></li>

HTML functionality is entirely independent of CSS. Therefore the following code will always work even if the intended section is set to display:none.
Link to section3