How to add mutually exclusivity on toggling dropdown menu - javascript

I have a menu with dropdown submenus. I'm trying to close an item when clicking on another, so that I don't have multiple items open at the same time. In a previous question: How to Apply .nextElementSibling to the next item of a dropdown menu a user suggested that I take a look at the function called mutually exclusivity. How can I add it to my menu?
var dropdownBtn = document.querySelectorAll('.menu-btn');
dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
var menuContent = this.nextElementSibling;
menuContent.classList.toggle("show");
}));
.menu-btn {
background: #e0e0e0;
padding: 10px;
margin: 5px 0px 0px 0px;
}
.menu-btn:hover {
background: #000;
color: #fff;
}
.drop_container {
display: none;
background-color: #017575;
transition: 0.3s;
opacity: 0;
}
.drop_container.show {
display: contents;
visibility: visible;
opacity: 1;
}
.drop_container > .item {
display: flex;
flex-direction: column;
margin-left: 10px;
padding: 10px 0px 0px 0px;
}
<div class="dropdown-menu">
<div class="menu-btn">One</div>
<div class="drop_container">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
<div class="menu-btn">Two</div>
<div class="drop_container">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
</div>


Store previously clicked menu in a variable, and clear it's class if another menu was clicked
var dropdownBtn = document.querySelectorAll('.menu-btn'),
lastOpened = null;
dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
var menuContent = this.nextElementSibling;
menuContent.classList.toggle("show");
if (lastOpened && lastOpened !== menuContent)
lastOpened.classList.remove("show");
lastOpened = menuContent;
}));
.menu-btn {
background: #e0e0e0;
padding: 10px;
margin: 5px 0px 0px 0px;
}
.menu-btn:hover {
background: #000;
color: #fff;
}
.drop_container {
display: none;
background-color: #017575;
transition: 0.3s;
opacity: 0;
}
.drop_container.show {
display: contents;
visibility: visible;
opacity: 1;
}
.drop_container > .item {
display: flex;
flex-direction: column;
margin-left: 10px;
padding: 10px 0px 0px 0px;
}
<div class="dropdown-menu">
<div class="menu-btn">One</div>
<div class="drop_container">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
<div class="menu-btn">Two</div>
<div class="drop_container">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
</div>


You could add a function that closes all menu's except the one you pass into it:
var dropdownBtn = document.querySelectorAll('.menu-btn');
dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
var menuContent = this.nextElementSibling;
closeMenusExcept(menuContent);
menuContent.classList.toggle("show");
}));
function closeMenusExcept(menuContent) {
dropdownBtn.forEach((element) => {
if (menuContent !== element.nextElementSibling) {
element.nextElementSibling.classList.remove("show");
}
})
}
.menu-btn {
background: #e0e0e0;
padding: 10px;
margin: 5px 0px 0px 0px;
}
.menu-btn:hover {
background: #000;
color: #fff;
}
.drop_container {
display: none;
background-color: #017575;
transition: 0.3s;
opacity: 0;
}
.drop_container.show {
display: contents;
visibility: visible;
opacity: 1;
}
.drop_container>.item {
display: flex;
flex-direction: column;
margin-left: 10px;
padding: 10px 0px 0px 0px;
}
<div class="dropdown-menu">
<div class="menu-btn">One</div>
<div class="drop_container">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
<div class="menu-btn">Two</div>
<div class="drop_container">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
</div>


Note
I changed the class names so they easier to type and read.
We'll use the programming paradigm call event delegation.
Bind event to an ancestor tag (a tag that holds all of the tags you want to control)
Figure I
const menu = document.querySelector(".dropdown");
menu.addEventListener('click', //...
Next, design an event handler that only reacts when the right tags are clicked
Figure II
//...
function(event) {
// This is the tag the user clicked
const clicked = event.target;
// Find .show
const current = document.querySelector('.show');
// See if the clicked tag has .show class
let state = clicked.matches('.show');
// Only react if the clicked tag has .btn class
if (clicked.matches('.btn')) {//...
Note: The .show class is now assigned to the .btn. See Figure IV
Figure III
//...
// if there already is a .show
if (current) {
// remove .show
current.classList.remove('show');
}
// if the clicked tag did not have .show previously...
if (!state) {
// ...add .show to it
clicked.classList.add("show");
}
}
});
In CSS this ruleset uses the adjacent sibling combinator which is equivalent to .nextElementSibling
Figure IV
/* .btn.show + .list <=that's the next sibling */
.show+.list {
display: block;
}
Removed visibility and opacity since original state is display:none which is a switch that inhibits any sort of transition (also removed). The display: content was changed to display: block. display: content doesn't have any standard behavior, when applied, the .items were black and white, but once replaced their original green returned. As a general rule dealing with CSS is if you don't see it being used in the examples, don't use it because there's probably a good reason why it isn't being used.
With this setup you never have to worry about how many button/items you have as long as it is inside the ancestor tag. Also, if you add any button/items dynamically, they do not need to be bound to the event. All you'll ever need is one event listener for each event you want to listen for.
const menu = document.querySelector(".dropdown");
const btns = document.querySelectorAll('.btn');
menu.addEventListener('click', function(event) {
const clicked = event.target;
const current = document.querySelector('.show');
let state = clicked.matches('.show');
if (clicked.matches('.btn')) {
if (current) {
current.classList.remove('show');
}
if (!state) {
clicked.classList.add("show");
}
}
});
.btn {
background: #e0e0e0;
padding: 10px;
margin: 5px 0px 0px 0px;
}
.btn:hover {
background: #000;
color: #fff;
}
.list {
display: none;
background-color: #017575;
}
.show+.list {
display: block;
}
.list>.item {
display: flex;
flex-direction: column;
margin-left: 10px;
padding: 10px 0px 0px 0px;
}
<div class="dropdown">
<div class="btn">One</div>
<div class="list">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
<div class="btn">Two</div>
<div class="list">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
<div class="btn">Three</div>
<div class="list">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
</div>

Related

JS issue with mouseover event to show extra buttons

I'm working on an interface which, when the user hovers over an LI element 2 buttons become visible to offer more functionality. Let's say "edit" and "remove".
I'm having issues with the mouse hit zones.
Mouseover works well when the mouse is actually on the LI element (the grey background) but does not work when the mouse is over text or the actual buttons which need to be clicked.
(For context, this is within a Chrome extension and no in-line JS is allowed. )
Summary demo here: https://jsfiddle.net/matthewzammit/uh9abfcr/16/
thanks!
Matt
-FULL CODE-
HTML
<div id="populateArrayList">
<ul id="myList">
<!--dynamically fill list-->
<li id="0" class="urlElement" name="urlElement">
<div class="urlDetails">
<div class="urlFavicon">
<img src="https://www.google.com/s2/favicons?domain=facebook.com">
</div>
<div name="url" class="urlAddress" id="0">website1.com</div>
</div>
<div class="actionButtons">
<a id="remove0" class="removeButton" name="Remove" href="#"></a>
<a id="edit0" class="editButton" name="Edit" href="#"></a>
</div>
</li>
<!-- item 2 -->
<li id="1" class="urlElement" name="urlElement">
<div class="urlDetails">
<div class="urlFavicon">
<img src="https://www.google.com/s2/favicons?domain=google.com">
</div>
<div name="url" class="urlAddress" id="1">website2.com</div>
</div>
<div class="actionButtons">
<a id="remove1" class="removeButton" name="Remove" href="#"></a>
<a id="edit1" class="editButton" name="Edit" href="#"></a>
</div>
</li>
</ul>
</div>
JS
document.getElementById("myList").addEventListener("mouseover", e => {
e.target.querySelector('.actionButtons').classList.add("editVisibility");
console.log("Target: " + e.target);
})
document.getElementById("myList").addEventListener("mouseout", function (e) {
e.target.querySelector('.actionButtons').classList.remove("editVisibility");
})
document.getElementById("myList").addEventListener("click", function (e) {
if (e.target && e.target.getAttribute('name') == "Remove") {
let idToRemove = e.target.parentElement.parentElement.getAttribute('id');
alert("Remove");
}
if (e.target && e.target.getAttribute('name') == "Edit") {
let idToEdit = e.target.parentElement.parentElement.getAttribute('id');
alert("Edit");
}
});
CSS
.urlElement {
list-style-type: none;
background: #ebebeb;
margin: 10px;
padding: 10px;
border-radius: 7px;
height: 15px;
}
.urlDetails {
/* background-color: red; */
}
.urlFavicon {
float: left;
margin-right: 10px;
/* background-color: green; */
}
.urlAddress {
float: left;
/* background-color: blue; */
}
.actionButtons {
display: none;
}
/* temp icon */
.removeButton {
margin-left: 5px;
padding-right: 20px;
background-image: url("https://img.icons8.com/ios/15/000000/delete-sign.png");
background-repeat: no-repeat;
}
/* temp icon */
.editButton {
margin-left: 5px;
padding-right: 20px;
background-image: url("https://img.icons8.com/ios/15/000000/edit.png");
background-repeat: no-repeat;
/* display: none;*/
}
.editVisibility {
display: unset;
/* Hide button */
}

You can do this with just CSS like this:
.urlElement:hover .actionButtons {
display: block;
}
You can delete the javascript event handlers.

Second level of sidebar

I want to create a sidebar with a submenu that extends to the right instead of down. A rough picture below:
I'm fairly new with flexbox and that is all I could come up with:
HTML:
<div class="d-flex align-items-stretch">
<nav class="side-navigation">
<ul class="sidebar-nav d-flex flex-column">
<li class="sidebar-nav-expand d-flex toggle">
<a class="nav-link sidebar-nav-expand-toggle py-3" href="#">
<span class="icon icon-ic_compute"></span>
<span class="nav-item-text">Menu1</span>
<span class="float-right"><i class="fas fa-mortar-pestle"></i></span>
</a>
<div class="sidebar-nav-expand-items">
<ul class="sidebar-nav">
<li class="sidebar-nav-item py-3">
<a class="nav-link py-1" href="#some-url1">
<span class="nav-item-text">Menu1 subitem1</span>
</a>
</li>
<li class="sidebar-nav-item py-3">
<a class="nav-link py-1" href="#some-url2">
<span class="nav-item-text">Menu1 subitem2</span>
</a>
</li>
<li class="sidebar-nav-item py-3">
<a class="nav-link py-1" href="#some-url3">
<span class="nav-item-text">Menu1 subitem3</span>
</a>
</li>
</ul>
</div>
</li>
<li class="sidebar-nav-expand d-flex">
<a class="nav-link sidebar-nav-expand-toggle py-3" href="#">
<span class="icon icon-ic_management"></span>
<span class="nav-item-text">Menu2</span>
<span class="float-right"><i class="fas fa-mortar-pestle"></i></span>
</a>
<div class="sidebar-nav-expand-items">
<ul class="sidebar-nav">
<li class="sidebar-nav-item py-3">
<a class="nav-link py-1" href="#some-url21">
<span class="nav-item-text">Menu2 subitem1</span>
</a>
</li>
<li class="sidebar-nav-item py-3">
<a class="nav-link py-1" href="#some-url22">
<span class="nav-item-text">Menu2 subitem2</span>
</a>
</li>
<li class="sidebar-nav-item py-3">
<a class="nav-link py-1" href="#some-url23">
<span class="nav-item-text">Menu2 subitem3</span>
</a>
</li>
</ul>
</div>
</li>
<li class="sidebar-nav-expand">
<a class="nav-link py-3" href="#some-url">
<span class="icon icon-ic_administration"></span>
<span class="nav-item-text">Direct link</span>
<span class="float-right"><i class="fas fa-mortar-pestle"></i></span>
</a>
</li>
</ul>
</nav>
<div class="main">
Content
</div>
</div>
SCSS:
$white: #fff;
$whitesmoke: #ECEFF1;
$aliceblue: #f1f6ff;
$light-gray: #D6DADC;
$blue: #2971FB;
$light-blue: #BFD5FE;
$black: #263238;
$light-black: #364046;
$orange: #FF8F00;
.side-navigation {
max-width: 540px;
transition: all 0.3s;
}
.sidebar-nav {
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
.nav-link {
display: block;
padding: .75rem 1rem;
color: $white;
text-decoration: none;
background: 0 0;
&:hover {
color: $orange;
}
}
.sidebar-nav-item {
width: 100%;
}
.sidebar-nav-expand {
width: 100%;
background-color: $black;
&.toggle {
.sidebar-nav-expand-toggle {
color: $orange;
}
.sidebar-nav-expand-items {
margin-left: 0;
}
}
.sidebar-nav-expand-toggle {
width: 270px;
z-index: 2;
}
.sidebar-nav-expand-items {
width: 270px;
height: 100%;
background-color: $light-gray;
transition: margin-left .25s ease-in-out;
margin-left: -270px;
color: $black;
.nav-link {
color: $black;
&:hover {
color: $orange;
}
&:not(.active) {
margin-left: 8px;
}
&.active {
border-left: solid 8px $orange;
}
}
}
}
}
.main {
width: 100%;
min-height: 100vh;
padding-left: 10px;
}
JS:
$('.sidebar-nav-expand-toggle').on('click', function() {
let self = $(this);
self.parent('.sidebar-nav-expand').toggleClass('toggle');
$('.main').toggleClass('toggle');
});
https://jsfiddle.net/cj4375er/
As you can see the child is not properly hidden under the parent and submenus are stacked, if a menu is opened I want all other menus to close. Also, there is too much space between menu items.
I would just need some points in the right direction. If there is an example of a similar case I would be happy.

I see that you tried to cover the submenu bar using z-index: 2 at that sidebar-nav-expand-toggle. However, your items are not properly hidden because your sidebar-nav-expand-toggle has no background (i.e. it's transparent). The background is actually from sidebar-nav-expand (#263238) that bleeds through the sidebar-nav-expand-toggle because sidebar-nav-expand-toggle is transparent. Therefore, the solution is to instruct the sidebar-nav-expand-toggle to inherit the same background as its parent, resulting in this code below:
.sidebar-nav-expand-toggle {
width: 270px;
z-index: 2;
background: inherit;
}
Your menus are stacked because you did not handle the closing of the other submenus that may be open (you merely toggled the one that is clicked, but you didn't close the ones that may be open that are not clicked). A simple addition to your JS code fixes this:
$('.sidebar-nav-expand-toggle').on('click', function() {
let self = $(this);
let toggled = self.parent('.sidebar-nav-expand').hasClass('toggle')
hideAllSubmenu()
if (toggled)
self.parent('.sidebar-nav-expand').removeClass('toggle')
else
self.parent('.sidebar-nav-expand').addClass('toggle')
$('.main').toggleClass('toggle');
});
function hideAllSubmenu() {
let submenus = $('.sidebar-nav-expand-toggle')
submenus.parent('.sidebar-nav-expand').removeClass('toggle')
}
There is too much space between menu items. My suggestion would be to make a flexbox that has only the three menu items with padding. And then, for each of those menus (can be a or div), create a div inside it that has position: absolute based on those menus. You can then slide it out when clicked by using transform: translate. That way, the height is not dependent on a wrapping container's height.
Also, I see that you are using SCSS. I really suggest reading about BEM selectors here to better utilize SCSS to create a more easily readable code.
EDIT:
I've added a little working example of what I meant by using position: absolute and still being able to push the main content to the right when the submenu expands. Take a look below (please adjust this minimal working example to what you need):
function resetSubmenuStyles() {
let submenus = document.querySelectorAll('.submenu div')
for (let submenu of submenus) {
submenu.style.width = ''
submenu.style.visibility = ''
}
}
document.querySelector('#menuOne').addEventListener('click', e => {
let submenu = document.querySelector('.submenu')
let submenuOne = document.querySelector('#submenuOne')
let submenuStyle = window.getComputedStyle(submenuOne)
let submenuWidth = parseInt(submenuStyle.getPropertyValue('width')) - parseInt(submenuStyle.getPropertyValue('padding-left')) - parseInt(submenuStyle.getPropertyValue('padding-right'))
resetSubmenuStyles()
if (submenuWidth == 0) {
submenu.style.width = '20%'
submenuOne.style.width = '100%'
submenuOne.style.visibility = 'visible'
}
else {
submenu.style.width = ''
submenuOne.style.width = ''
submenuOne.style.visibility = ''
}
})
document.querySelector('#menuTwo').addEventListener('click', e => {
let submenu = document.querySelector('.submenu')
let submenuTwo = document.querySelector('#submenuTwo')
let submenuStyle = window.getComputedStyle(submenuTwo)
let submenuWidth = parseInt(submenuStyle.getPropertyValue('width')) - parseInt(submenuStyle.getPropertyValue('padding-left')) - parseInt(submenuStyle.getPropertyValue('padding-right'))
resetSubmenuStyles()
if (submenuWidth == 0) {
submenu.style.width = '20%'
submenuTwo.style.width = '100%'
submenuTwo.style.visibility = 'visible'
}
else {
submenu.style.width = ''
submenuTwo.style.width = ''
submenuTwo.style.visibility = ''
}
})
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Helvetica, sans-serif;
}
html, body {
width: 100vw;
height: 100%;
}
body {
display: flex;
}
.menu {
width: 20%;
height: 100%;
background: #000;
color: #FFF;
}
.menu h1 {
padding: 20px;
cursor: pointer;
}
.submenu {
position: relative;
width: 0%;
height: 100%;
background: #333;
color: #FFF;
}
.submenu div {
visibility: hidden;
position: absolute;
width: 0;
top: 0;
left: 0;
padding: 20px;
}
<div class = "menu">
<h1 id = "menuOne">Test</h1>
<h1 id = "menuTwo">Test</h1>
</div>
<div class = "submenu">
<div id = "submenuOne">
Submenu Test One
</div>
<div id = "submenuTwo">
Submenu Test Two
</div>
</div>
<div id = "main">Some Content</div>

How to close hamburger nav on click of the <a> tags?

As the title states, I am wanting my hamburger navbar to close when I click on the tags I have tried many ways for the last couple hours but am unable to solve my problem?
I Have tried setting the hide() property with jquery but no luck think it may be because i am pretty new to JS and am just wanting to get my website finished.
const menuBtn = document.querySelector(".menu-btn");
const mobileContent = document.querySelector(".mobile-content");
const mobileItem = document.querySelector(".mobile-item");
const mobileItems = document.querySelectorAll(".mobile-items");
// Set Initial State Of Menu
let showMenu = false;
menuBtn.addEventListener("click", toggleMenu);
function toggleMenu() {
if (!showMenu) {
menuBtn.classList.add("close");
mobileContent.classList.add("show");
mobileItem.classList.add("show");
mobileItems.forEach(item => item.classList.add("show"));
// Set Menu State
showMenu = true;
} else {
menuBtn.classList.remove("close");
mobileContent.classList.remove("show");
mobileItem.classList.remove("show");
mobileItems.forEach(item => item.classList.remove("show"));
// Set Menu State
showMenu = false;
}
}
.mobile-nav {
display: block;
position: fixed;
width: 100%;
top: 0;
z-index: 3;
}
.mobile-nav .menu-btn {
position: absolute;
z-index: 3;
right: 20px;
top: 20px;
cursor: pointer;
}
.mobile-nav .menu-btn .btn-line {
width: 28px;
height: 3px;
margin: 0 0 5px 0;
background: #333;
}
.mobile-content {
position: fixed;
top: 0;
width: 100%;
opacity: 0.9;
visibility: hidden;
}
.mobile-content.show {
visibility: visible;
}
.mobile-content .mobile-item {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
float: right;
width: 100%;
height: 100vh;
overflow: hidden;
margin: 0;
padding: 0;
background: blue;
list-style: none;
transform: translate3d(0, -100%, 0);
}
.mobile-content .mobile-link {
display: inline-block;
position: relative;
font-size: 2rem;
padding: 1rem 0;
font-weight: bold;
color: #333;
text-decoration: none;
}
<!-- Mobile Nav -->
<div class="mobile-nav">
<div class="menu-btn">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
<h2>MATTY</h2>
<nav class="mobile-content">
<ul class="mobile-item">
<li class="mobile-items">
<a href="#about-me" class="mobile-link">
ABOUT
</a>
</li>
<li class="mobile-items">
<a href="#the-portfolio" class="mobile-link">
PORTFOLIO
</a>
</li>
<li class="mobile-items">
<a href="#" class="mobile-link">
BLOG
</a>
</li>
<li class="mobile-items">
<a href="#contact-me" class="mobile-link">
CONTACT
</a>
</li>
</ul>
</nav>
</div>

I had to remove some of your CSS as it was not working in the snippet.
Recommend you use element.classList.toggle() as below.
Note how much simpler the code becomes.
EDIT: Clicking any a tag will now close menu
document.addEventListener("click", (e) => {
if(e.target.matches('.menu-btn')
|| e.target.matches('.btn-line')
|| e.target.matches('a')) {
toggleMenu();
}
});
function toggleMenu() {
document.querySelector('.mobile-content').classList.toggle('hide');
}
.btn-line {
display: block;
width: 50px;
margin: 5px;
border: 2px solid black;
}
.mobile-nav {
display: block;
width: 100%;
z-index: 3;
}
.mobile-content {
position: fixed;
width: 100%;
opacity: 0.9;
}
.hide {
display: none;
}
<!-- Mobile Nav -->
<div class="mobile-nav">
<div class="menu-btn">
<span class="btn-line"></span>
<span class="btn-line"></span>
<span class="btn-line"></span>
</div>
<a href="#home">
<h2>MATTY</h2>
</a>
<nav class="mobile-content hide">
<ul class="mobile-item">
<li class="mobile-items">
<a href="#about-me" class="mobile-link">
ABOUT
</a>
</li>
<li class="mobile-items">
<a href="#the-portfolio" class="mobile-link">
PORTFOLIO
</a>
</li>
<li class="mobile-items">
<a href="#" class="mobile-link">
BLOG
</a>
</li>
<li class="mobile-items">
<a href="#contact-me" class="mobile-link">
CONTACT
</a>
</li>
</ul>
</nav>
</div>

#MPB A good way to dabble into some simple JQuery language is a way to fix your problem. A quick and easy way to make a good Hamburger Navigation menue is with the toggleClass(); function in JQuery. Just make a #keyframes-animation within an un-set class and toggleClass(); will switch between the two seamlessly. I do this all the time, comment if you'd like me to forward the code to you for you to use.

JS dropdown menu being hidden? or not working?

After thoroughly trying to fix this issue - I need a little help.
I am trying to make a website that has a navbar (made with bootstrap) for websites and I am making a small drop-down menu for smaller screens (I haven't added this functionality yet, I just want it to work first). I haven't styled it much yet either.
The problem is that I know my button and code is working (because I have a codepen showing that it works), but in my website, I cannot see the drop-down menu. Not sure if it is hidden or what but I just can't figure this out.
Here is the HTML (because I have to put something...):
<div class = "dropdown">
<button onclick = "menuBtn ()" class = "dropBtn">Menu</button>
<div id = "dropCollapse" class = "dropdownContent">
<a class = "contentLinks" href = "#about">About</a>
<a class = "contentLinks" href = "#team">Team</a>
<a class = "contentLinks" href = "#photos">Photos</a>
<a class = "contentLinks" href = "#shirts">T-Shirts</a>
<a class = "contentLinks" href = "#contact">Contact</a>
</div>
</div>
I have played around with z-index (in a number of places but if you have a suggestion, feel free to make it and I will try it). I have taken the menu out of the navbar (thinking it had something to do with that). But mostly I am just confused - nothing else really answered my question about this menu issue. I feel like there is something small that I am overlooking and I just can't figure it out.
Here is a fiddle showing the basic outline of my website with the menu not working: https://jsfiddle.net/nekochan/eh69segg/1/

A few things I noticed:
you were using jQuery but did not define jQuery to load. If you do an "inspect element" you'll see that $ is not defined
also you had a few missing divs, and an anchor wasn't closed
I'd recommend just using purely jQuery if you're going to go that approach - it's a very simple example. Here is your updated fiddle - notice the toggle animates nicely :)
https://jsfiddle.net/qdL9mch2/1/
/* global $ */
$(document).ready(function() {
//makes the masethead fit the whole screen
$("#masthead").css("min-height", $(window).height());
//mobile menu button collapse
$(".dropBtn").on("click", function(){
$("#dropCollapse").toggle("show");
});
// Close the dropdown menu if the user clicks outside of it
//update to jquery
window.onclick = function(event) {
if (!event.target.matches('.dropBtn')) {
var dropdowns = document.getElementsByClassName("dropdownContent");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
};
});

there are multiple errors there in your HTML for example <a class="navBrand" href="#masthead"> is not closing and your menuBtn is not being called, I would recommend you to use jquery completely if you have it included inside your project see here your code working
//mobile menu button collapse
function menuBtn() {
document.getElementById("dropCollapse").classList.toggle("show");
}
/* global $ */
$(document).ready(function() {
$("#my-button").click(function() {
document.getElementById("dropCollapse").classList.toggle("show");
})
//makes the masethead fit the whole screen
$("#masthead").css("min-height", $(window).height());
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropBtn')) {
var dropdowns = document.getElementsByClassName("dropdownContent");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
};
});
.main {
font-family: 'Roboto', sans-serif;
width: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
overflow-y: hidden;
}
.body {
position: relative;
}
#navBar {
margin-bottom: 0;
background-color: black;
font-family: 'Permanent Marker', cursive;
}
.brandImage {
height: 60px;
width: auto;
}
#navHeader {}
#navItem {}
#navLink {
text-decoration: none;
}
.dropBtn {
background-color: #4caf50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropBtn:hover,
.dropBtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdownContent {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 9999;
}
.contentLinks {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.contentLinks:hover {
background-color: #f1f1f1;
}
.show {
display: block;
}
#media (max-width: 960px) {
#large-menu {
display: none;
}
.brandImage {
float: left;
}
}
#masthead {
background-color: #65737e;
background-image: url(https://static.pexels.com/photos/285286/pexels-photo-285286.jpeg);
width: 100%;
height: auto;
background-size: cover;
background-position: bottom center;
display: flex;
align-items: center;
min-height: 100%;
min-height: 100vh;
}
.headerText {
font-size: 90px;
font-family: 'Permanent Marker', cursive;
color: #fff;
}
.headerTagline {
font-size: 60px;
font-family: 'Permanent Marker', cursive;
color: #fff;
}
.anchor {
display: block;
height: 50px;
margin-top: -50px;
visibility: hidden;
}
.sectionHeader {
font-family: 'Permanent Marker', cursive;
padding: 20px 20px 20px 20px;
}
.sectionText {
padding: 20px 20px 20px 20px;
}
#aboutBox {
background-color: #c0c5ce;
padding: 20px 0 20px;
}
#teamBox {
background-color: #a7adba;
padding: 20px 0 20px;
}
#workBox {
background-color: #65737e;
padding: 20px 0 20px;
}
#shirtBox {
background-color: #4f5b66;
padding: 20px 0 20px;
}
#socialBox {
background-color: #343d46;
padding: 20px 0 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<nav class="navbar navbar-inverse navbar-fixed-top" id="navBar">
<div class="container-fluid">
<div class="navHeader navbar-left">
<a class="navBrand" href="#masthead"></a>
<ul class="nav navbar-nav navbar-right" id="large-menu">
<li class="navItem">
<a class="navLink" href="#about">About</a>
</li>
<li class="navItem">
<a class="navLink" href="#team">Team</a>
</li>
<li class="navItem">
<a class="navLink" href="#photos">Photos</a>
</li>
<li class="navItem">
<a class="navItem" href="#shirts">T-Shirts</a>
</li>
<li class="navItem">
<a class="navLink" href="#contact">Contact</a>
</li>
</ul>
</div>
<div class="dropdown">
<button class="dropBtn" id="my-button">Menu</button>
<div id="dropCollapse" class="dropdownContent">
<a class="contentLinks" href="#about">About</a>
<a class="contentLinks" href="#team">Team</a>
<a class="contentLinks" href="#photos">Photos</a>
<a class="contentLinks" href="#shirts">T-Shirts</a>
<a class="contentLinks" href="#contact">Contact</a>
</div>
</div>
</nav>
<div class="container text-center" id="masthead">
<div class="col-sm-12">
<h1 class="headerText"></h1>
<p class="headerTagline"></p>
</div>
</div>
<span class="anchor" id="about"></span>
<div class="container-fluid" id="aboutBox">
<div class="row">
<div class="col-sm-12">
<h2 class="sectionHeader">About Us</h2>
<p class="sectionText">We're all about that chedda</p>
</div>
</div>
</div>
<span class="anchor" id="team"></span>
<div class="container-fluid" id="teamBox">
<div class="row">
<div class="col-sm-12">
<h2 class="sectionHeader">Meet the team</h2>
<p class="sectionText">pictures of team go here</p>
</div>
</div>
</div>
<span class="anchor" id="photos"></span>
<div class="container-fluid" id="workBox">
<div class="row">
<div class="col-sm-12">
<h2 class="sectionHeader">Our Work</h2>
<p class="sectionText">pictures go here</p>
</div>
</div>
</div>
<span class="anchor" id="shirts"></span>
<div class="container-fluid" id="shirtBox">
<div class="row">
<div class="col-sm-12">
<h2 class="sectionHeader">T-shirts Preview</h2>
<p class="sectionText">pictures of tshirts go here</p>
</div>
</div>
</div>
<span class="anchor" id="contact"></span>
<div class="container-fluid" id="socialBox">
<div class="row">
<div class="col-sm-12">
<h2 class="sectionHeader">Contact Us</h2>
<p class="sectionText">links to social media and contact us form</p>
</div>
</div>
</div>

JQuery Expand Nested Accordion Menu by URL

i am having the following Problem.
I implemented a nested accordion Menu JQuery script on my Website.
What i need to do now is that the accordion Menu sub categories expand based on an URL.
Here is the fiddle https://jsfiddle.net/w6fa87ov/
You will find that i set the Menu item "Test_2" within "Sub Category 1.2" on active.
When the user enters the corresponding URL i.e. "/myurl/Test_2" then the Accordion Menu should open the item "Sub Category 1.2" by default.
Iam not a JQuery programmer and i dont know how to do this in JQuery.
My noob consideration was something like:
- If i find an active element within the menu i "click" the corresponding element which should expand it
Thanks in advance, best regards Burnie
HTML:
<div id="main">
<div id="nestedAccordion">
<h5 id="id_element_TopKat_Food">First Top Category</h5>
<div id="container2">
<h6 id="id_element_Sub1Kat">Sub Category 1.1</h6>
<div id="container3">
<a class="accordionSubKategorie" href="/myurl/Test_0" style="text-decoration:none;">
<h7 id="id_element_Sub2Kat" class="Sub2Kat"> Test_0</h7>
</a>
</div>
<h6 id="id_element_Sub1Kat">Sub Category 1.2</h6>
<div id="container3">
<a class="accordionSubKategorie" href="/myurl/Test_1" style="text-decoration:none;">
<h7 id="id_element_Sub2Kat" class="Sub2Kat"> Test_1</h7>
</a>
<a class="accordionSubKategorie" href="/myurl/Test_2" style="text-decoration:none;">
<h7 id="id_element_Sub2Kat" class="Sub2Kat active"> Test_2</h7>
</a>
<a class="accordionSubKategorie" href="/myurl/Test_3" style="text-decoration:none;">
<h7 id="id_element_Sub2Kat" class="Sub2Kat"> Test_4</h7>
</a>
</div>
</div>
<h5 id="id_element_TopKat_Non-Food">Second Top Category</h5>
<div id="container2">
<h6 id="id_element_Sub1Kat">Sub Category 2.1</h6>
<div id="container3">
<a class="accordionSubKategorie" href="/myurl/Test_4" style="text-decoration:none;">
<h7 id="id_element_Sub2Kat" class="Sub2Kat"> Test_4</h7>
</a>
</div>
</div>
</div>
JQuery:
var parentDivs = $('#nestedAccordion div');
var childDivs = $('#nestedAccordion h6').siblings('div');
$('#nestedAccordion h5').click(function() {
parentDivs.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
});
childDivs.slideUp();
$('#nestedAccordion h6').click(function() {
childDivs.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
});
CSS:
h5 {
margin-bottom: 8px;
font-weight:bold;
font-size: 20px;
width: 100%;
display: block;
background: #6EB90A;
color: #fefefe;
padding: .75em;
border-radius: 0.15em;
cursor: pointer;
cursor: hand;
}
h5:hover {
background: #5c8a1c;
text-decoration: none;
color: white;
}
h6 {
margin-top:-3px;
font-size: 15px;
width: 100%;
display: block;
background: #FFFFFF;
border-color: #476767;
box-shadow: 0px 0px 0px 2px rgba(71,103,103,1);
color: #476767;
padding: .25em;
border-radius: 0.8em;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
cursor: hand;
}
h6:hover {
background: #476767;
text-decoration: none;
color: white;
}
h7.Sub2Kat {
font-size: 15px;
width: 100%;
display: block;
color: #476767;
padding-top: 2px;
padding-bottom: .1em;
padding-left: 1.8em;
border-radius: 0.2em;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
cursor: hand;
}
h7.Sub2Kat:hover {
background: #6EB90A;
color: white;
}
h7.Sub2Kat.active {
border: 2px solid #ddd;
border-radius: 0.8em;
padding-left: 1.2em;
}
.Sub2Katactive {
font-size:0.9em;
}
h7.Sub2Kat.active {
border: 2px solid #ddd;
border-radius: 0.8em;
padding-left: 1.2em;
}

If this is intended as a menu you could build everything in an unordered list with list elements inside. Any nested menus can be done as such:
<ul class="menu">
<li class="menuItem">
Page 1
<ul class="subMenu">
<li class="menuItem2">Sub Page 1</li>
<li class="menuItem2">Sub Page 2</li>
<li class="menuItem2">Sub Page 3</li>
</ul>
</li>
<li class="menuItem">Page 2</li>
<li class="menuItem">Page 3</li>
</ul>
DOing it this way will allow you to target the :active list item that is built in with browsers. Then you could use css and jquery to make the dropdown magic. In jquery you can target the :active anchor as such:
$('menu > li a:active').doSomething();
If this doesn't interest you, check out this other stack overflow answer that may be of help as well.
Jquery - determining which link was clicked
Cheers

Ok i solved my Prolbem.
Within my Django code which i use to construct the Template i give a specific Class to hasActive or hasPassive which refers to the menu items which has the active or only passive elements inside (elemnts that are not clicked based on the url).
In case someone has the same Problem ill provide more informationen on this.

Categories