Develop Reference

Making a dropdown menu using vanilla Javascript

I'm trying to figure out what is a good approach to accomplish a dropdown menu that opens when a user clicks on a div which functions as a button and hides when the user click again on it. The style in my CSS sheet is set as display: none. and this is as far as i've gone:
var xx = document.getElementById('dropdown-Container');
if (xx.display.style = 'none') {
xx.addEventListener('click', function showMenu() {
document.getElementById('dropdown-Container').style.display = 'block';
} else {
xx.style.display = 'none';
}, false);
}
<div type="button" id="dropdown-Container">
<a class="dropdown1" href="#">Link 1</a>
<a class="dropdown1" href="#">Link 2</a>
<a class="dropdown1" href="#">Link 3</a>
</div>
Search
</div>
The menu is hiding properly but when the user clicks on it, it's not opening up as I wish.

You need a double-equals in the 'none' comparison, at the very least.

You have made a mistake in the code by placing the if statement above the event listener. Use it like this.
var menu = document.getElementById('yourDropdownMenuIdHere');
var dropdown = document.getElementById('dropdown-Container');
menu.addEventListener('click', function showMenu(){
if( dropdown.style.display = 'none' ) {
dropdown.style.display = 'block';
} else {
dropdown.style.display = 'none';
}
});
Accessibility Issue: A div is not supposed to be used as a button for handling click. You can use a button tag instead

Open one drop-down, close another with JavaScript

I am using this script to open a drop down menu and then close it when anything else but the trigger is clicked. Now I am trying to add a second drop down to another area on the page and repeat the script but it is breaking.
For instance, I click button A (Gravatar), and drop down A opens.
However when I add the second script and click button B (category) to open drop down B, down down A stays open.
Also adding the second script breaks the drop down close function of the first script.
Here is the script:
<script>
function openAccount(event) {
event.stopPropagation();
document.getElementById("gravatar").classList.toggle("open");
}
window.onclick = function(event) {
document.getElementById("gravatar").classList.remove("open");
}
</script>
<script>
function openCategory(event) {
event.stopPropagation();
document.getElementById("category").classList.toggle("open");
}
window.onclick = function(event) {
document.getElementById("gravatar").classList.remove("open");
}
</script>
<li class="gravatar">
<a href="#" class="dropbtn" onclick="openAccount(event)">
<img src="<?php echo $gravatar; ?>" alt="" />
<span class="fa fa-icon fa-caret-down"></span>
</a>
<ul class="dropdown" id="gravatar">
<li class="header">
<?php echo $user['email']; ?>
</li>
</ul>
</li>
<div class="category">
Properties<span class="fa fa-icon fa-caret-down"></span>
<div id="category">Test</div>
</div>
Goals:
Multiple drop down menus on different parts of the page.
On click opens drop down.
Click on anywhere else on the page closes the drop down.
On click also closes any previously opened menu.

I'd do something really simple like putting a data* attribute on the element that's clicked on that contains the ID of the element to show or hide, e.g.
// Toggle hidden class on/off
function toggleVis(event) {
// Stop click on element bubbling (to body)
event.stopPropagation();
// Get target element
var el = document.getElementById(this.dataset.id);
// If non-target elements are visible, hide them
hideAll(el);
// Toggle target
el.classList.toggle('hidden');
}
// Hide all, excluding passed element
function hideAll(el) {
Array.from(document.querySelectorAll('ul:not(.hidden)')).forEach(function(node){
if (el != node) node.classList.add('hidden');
});
}
// Attach listeners
window.onload = function() {
// Add to linkLike spans
Array.from(document.querySelectorAll('.linkLike')).forEach(function(node) {
node.addEventListener('click', toggleVis, false);
});
// Add hideAll listener to wndow
window.addEventListener('click', hideAll, false);
// Run hideAll
hideAll();
}
/* style span like link */
.linkLike {
text-decoration: underline;
cursor: pointer;
}
/* class to hide element */
.hidden {
visibility: hidden;
}
<ul id="a"><li>A</ul>
<ul id="b"><li>B</ul>
<ul id="c"><li>C</ul>
<ul id="d"><li>D</ul>
<div><span class="linkLike" data-id="a">Toggle A</span></div>
<div><span class="linkLike" data-id="b">Toggle B</span></div>
<div><span class="linkLike" data-id="c">Toggle C</span></div>
<div><span class="linkLike" data-id="d">Toggle D</span></div>
Of course there are other ways to do the association, but ID is simple, explicit and doesn't depend on document layout or formatting.

Toggling visibility of icon when window is resized

Problem
I have a dropdown menu that toggles between a hamburger menu and a cross icon when the navigation opens and closes. However, if a user opens the menu, then resizes the window and the window width is still less than 768px (still open), it shows both the icons stacked on top of each other when it only should show the cross.
On a side note, I'm looking to just simplify the complexity of this Javascript snippet. I'm not sure that adding and removing a class of is-visible was the correct/best approach.
JSFiddle: https://jsfiddle.net/bdmebsu8/
scripts.js
$(function(){
// Window size
if ($(window).width() <= 768) {
$(".icon-cross").hide();
$(".icon-menu").addClass("is-visible");
$(".icon-menu").show();
} else {
$(".icon-menu").hide();
$(".icon-menu").removeClass("is-visible");
}
$(window).resize(function(){
var w = $(this).innerWidth();
if (w > 768) {
$(".nav__list--dropdown").hide();
$(".icon-cross").hide();
$(".icon-menu").hide();
$(".icon-cross").removeClass("is-visible");
$(".icon-menu").removeClass("is-visible");
} else {
$(".icon-cross").hide();
$(".icon-menu").show();
$(".icon-menu").addClass("is-visible");
}
});
// Dropdown menu
$(".nav__menu").on("click", function(){
$(".is-hidden").slideToggle("slow");
var menuVisible = $(".icon-menu").hasClass("is-visible")
if (menuVisible) {
$(".icon-menu").removeClass("is-visible");
$(".icon-menu").hide();
$(".icon-cross").addClass("is-visible");
$(".icon-cross").show();
} else {
$(".icon-cross").removeClass("is-visible");
$(".icon-cross").hide();
$(".icon-menu").addClass("is-visible");
$(".icon-menu").show();
}
});
});
index.html
<div class="dropdown">
<ul class="nav__list--dropdown is-hidden">
<li class="item--services--dropdown">Services</li>
<li class="item--projects--dropdown">Projects</li>
<li class="item--teaching--dropdown">Teaching</li>
<li class="item--blog--dropdown">Blog</li>
<li class="item--contact--dropdown">Contact</li>
</ul>
</div>
<div class="nav__menu">
<img src="src/img/sm-menu.png" class="icon-menu" alt="Open Menu">
<img src="src/img/cross-dark.png" class="icon-cross" alt="Close Menu">
</div>

What you could do to simplify your script:
$(function(){
function updateMenu(){
// all logic in here for checking width and show/hide/set classes
}
updateMenu(); // runs on doc ready
$(window).on("resize", updateMenu);
}

How to show a particular div after click on a navigation link.?

function showHyd() {
window.location = "venueTravelHotel.html";
$(".tab2").addClass("displayNone");
$(".tab1").removeClass("displayNone");
}
HTML
<div class=" tab2">
Tab2
</div>
<div class="tab1 displayNone">
tab1
</div>
By default "tab1" div is displayNone and "tab2" is visible. When click on navigation link, I want go to that page and "tab1" div visible and "tab2" div hidden. But here after go to that page its loaded as default settings. How to fix this issue. Thanks in advance.

function showHyd() {
window.location = "venueTravelHotel.html";
$(document).ready(function() {
$(".tab2").addClass("displayNone");
$(".tab1").removeClass("displayNone");
});
}
just try this.

Javascript if/else not working as expected

I am trying to toggle a hidden menu with a link. But when i click on the link, it reopens the hidden menu instead of closing it.
Here is how i expect it to run:
When i click labelLink
if hiddenBox 's display = 'none', then change it to display = 'block'
if hiddenBox 's display = 'block', then delete its focus by blur() and set it display='none'
When i click outside of the hiddenBox when it has the focus, set hiddenBox 's display='none'
(This part is working well.)
JsFiddle
<ul>
<li>
<a id="labelLink" href="#"
onclick="
if(document.getElementById('hiddenBox').style.display === 'block'){
document.getElementById('labelLink').focus();
document.getElementById('hiddenBox').style.display ='none';
}
else{
document.getElementById('hiddenBox').style.display = 'block';
document.getElementById('hiddenBox').focus();
}
return false;"
>
Click Me
</a>
<div id="hiddenBox" tabindex="-1"
onblur="document.getElementById('hiddenBox').style.display ='none';"
>
I was hidden
</div>
</li>
</ul>

Do it this way instead.
var labelLink = document.getElementById('labelLink');
var hiddenBox = document.getElementById('hiddenBox');
labelLink.addEventListener('click', function() {
hiddenBox.style.display = hiddenBox.style.display == 'block' ? 'none': 'block';
});
labelLink.addEventListener('blur', function() {
hiddenBox.style.display = 'none';
})
#hiddenBox {
display: none
}
<ul>
<li><a id="labelLink" href="#">Click Me</a>
<div id="hiddenBox" tabindex="-1">I was hidden</div>
</li>
</ul>

As already pointed out, the two event listeners are interfering with each other. One way of fixing this is to remove the listener on labelLink when the hidden box is shown, and restore the listener with a slight pause after the hidden box is hidden again. JSFiddle
var labelLink = document.getElementById('labelLink'),
hiddenBox = document.getElementById('hiddenBox');
labelLink.addEventListener('click', showBox);
hiddenBox.addEventListener('blur', hideBox);
function showBox(){
hiddenBox.style.display = 'block';
hiddenBox.focus();
labelLink.removeEventListener('click', showBox);
}
function hideBox() {
hiddenBox.style.display = 'none';
labelLink.focus();
window.setTimeout(function() {
labelLink.addEventListener('click', showBox);
}, 500);
}
<a id="labelLink" href="#" >Click Me</a>
<div id="hiddenBox" tabindex="-1" style="display:none" >I was hidden</div>