Develop Reference

Multiple Accordion Nesting Using Vanilla JavaScript

I am trying to achieve multiple accordion lists with dynamic height concepts, I am debugging for hours and not able to understand where I went wrong. The code I have tried so far.
The scenario I was trying on is when the main categories are clicked with the dynamic height it will show off and that same scenario will happen for its sub-categories also. I am stuck on how to take the inner sibling method.
Note: I am trying to achieve this in vanilla javascript.
Any help will be appreciated !!
var headers = document.querySelectorAll('.first-ul-1 .ul, .sub-ul-1-a ul');
window.addEventListener("DOMContentLoaded", () => {
for (var i = 0; i < headers.length; i++) {
headers[i].addEventListener('click', openAccordion);
}
function openAccordion(e) {
var parent = this.parentElement;
var article = this.nextElementSibling;
if (!parent.classList.contains('open')) {
parent.classList.add('open');
article.style.maxHeight = article.scrollHeight + 'px';
} else {
parent.classList.remove('open');
article.style.maxHeight = '0px';
}
}
.drop-down-menu,
.sub-ul-2-a{
max-height: 0px;
overflow: hidden;
transition: max-height 350ms ease-in-out;
}
<nav id="navigation" class="main-nav">
<ul class="main-nav-list first-ul-1">
<li>
<p href="#">Types</p>
<div class="drop-down-menu">
<div class="menu-container">
<ul class="main-nav-list sub-ul-1-a">
<li>
<a href="#">Type
of season</a>
<ul class="main-nav-list sub-ul-2-a">
<li>
<a href="#">Summer
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>

How to undo javascript function

I have a function like so which toggles my dropdown menu.
<div class="module widget-handle mobile-toggle right visible-sm visible-xs">
<a id="mobile-nav" href="#">
<div class="container1" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>.
</div>
</a>
</div>
<script>
function myFunction(x) {
x.classList.toggle('change');
document.body.style.overflow ='hidden'
}
</script>
The last part of it
document.body.style.overflow = 'hidden'
Keeps the page from overflowing at the top when the dropdown menu is open. The problem is that when I click on my menu bars, whilst the overflow disappears, clicking on the bars again reveals the page but locks it due to the overflow being hidden.
I'd like to undo
document.body.style.overflow = 'hidden'
When the menu is closed and the closest I've got to understanding it is the function doBack. Can I somehow add doBack to my existing function?
Mobile page here
It's a WordPress site and the javascript above toggles the dropdown by pressing on the bars. In order to extend the dropdown, I made the class collapse bigger, like so.
#media (max-width: 768px) {
.collapse {
position: absolute;
height: 775px;
background-color: white;
z-index: 99999 !important;
top: 75px;
left: -50px;
line-height: 10px;
}
}
HTML:
<div class="module-group right">
<div class="module left">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="menu" class="menu">
<li id="menu-item-15050" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-15050 dropdown">
<a title="Contact" href="url">Contact
<ul role="menu" class="dropdow n-menu">
</ul>
</a>
</li>
</ul>
</div>
</div>
</div>

You can eliminate the style attribute by using:
document.body.style.overflow = null

You can simply add a new CSS class:
.body-overflow {
overflow: hidden;
}
and in your javascript function add another .classList.toggle() but this time on the body:
function myFunction(x) {
x.classList.toggle('change');
document.body.classList.toggle('body-overflow');
}

How to use Media Queries in React?

I have this problem: I'm making header with responsive size, so when the width less than 1199px, user can see hamburger menu. To open/close menu, I'm using React Hooks and it changes display: block / none. But it has to work only when the screen is less than 1199px, but in my case it works every time, and obviously my header has display: none and there's nothing on page (there's only my logo)
Component's code:
const Header = () => {
const [navBar, showNavBar] = useState(false)
const useNavBar = () => {
showNavBar(!navBar)
}
return (
<header class="header-area main-header">
<div class="container">
<div class="row">
<div class="col-lg-2">
<div class="logo-area">
<a href='#'><img src={logo} alt="logo"/></a>
</div>
</div>
<div class="col-lg-10">
<div onClick={useNavBar} class="custom-navbar">
<span></span>
<span></span>
<span></span>
</div>
<div class="main-menu">
<ul style={navBar === true ? {display: 'block'} : {display: 'none'}}> // problem is here
<li class="active">home</li>
<li>about us</li>
<li>schedule</li>
<li>trainers</li>
<li>blog
<ul class="sub-menu">
<li>Blog Home</li>
<li>Blog Details</li>
</ul>
</li>
<li>contact</li>
<li>pages
<ul class="sub-menu">
<li>Service</li>
<li>Elements</li>
</ul>
</li>
<li class="menu-btn">
book now
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
);
}
SASS code:
.main-menu
ul
float: right
#include desktop()
display: none
float: left
position: absolute
top: 60px
right: 0
z-index: 4
background: $dark
width: 40%
padding: 20px 20px 30px
PS: I don't want to add all of my CSS code, because it's over 200 strings, just explain me how to change display using media queries in my case

Don't use inline style. Change class names with JavaScript.
Set the display in your stylesheet based on the class name and media queries.
<ul className={navBar === true ? "foo" : "bar"}>

How Would i change the content of a webpage with the Onclick Function using a function

function changecontent(description){
console.log(description);
document.getElementById('content').innerHTML = description;
}
<body>
<div class="editingfunction">
<ul style="list-style-type:none">
<li>Please Mouse Over Subject</li>
<li onClick="changecontent();">Math</li>
<li onClick="changecontent();">Science</li>
<li onClick="changecontent();">Geography</li>
<li onClick="changecontent();">Arts</li>
<li onClick="changecontent();">Buisness</li>
<li onClick="changecontent();">Health</li>
<li onClick="changecontent();">Social Science</li>
</ul>
</div>
<div id="content">
</div>
</body>
I'm planning to make multiple layouts for the page and based on which item is clicked the content should be changed accordingly. The problem is that I don't know how to make the java function change the content differently based on which item is clicked...

can you make something like this:
<li onClick="changecontent('Math');">Math</li>
this should work..

So, if I understand you correctly, you have several descriptive texts for each of your subjects that you want to dynamically insert into #content. You could just store your texts in variables:
var mathDesc = "Math is awesome and <b>not scary at all!</b>";
You could then insert it to #content like this:
<li onClick="changecontent(mathDesc);">Math</li>
Personally I would use a different approach: Having multiple content-divs and hiding all but one at each time.
One way to hide content is to programmatically assign a className, e.g. hidden and to assign display:none as CSS rule to that class.
Below is an example snippet. I identified the content based on the list-item-id, which I think is what you wish to do.
function changeContent(id) {
var content = document.getElementsByClassName("content");
for (var i = 0; i < content.length; i++) {
if (content[i].id === id + "Content") {
content[i].classList.remove("hidden");
} else {
content[i].classList.add("hidden");
}
}
}
document.getElementById("chooseSubject").onclick = function(e) {
changeContent(e.target.id);
}
#chooseSubject {
list-style-type: none;
}
#chooseSubject li {
cursor: pointer;
}
#chooseSubject li:hover {
background-color: rgb(267, 214, 269);
}
#chooseSubject li:active {
background-color: rgb(167, 114, 169);
}
.hidden {
display: none;
}
<ul id="chooseSubject">
<li id="Math">Math</li>
<li id="Science">Science</li>
<li id="Geography">Geography</li>
<li id="Arts">Arts</li>
</ul>
<div id="MathContent" class="content hidden">
Math is awesome and <b>not scary at all!</b>
</div>
<div id="ScienceContent" class="content hidden">
Science is like math but less exact and more hands-on.
</div>
<div id="GeographyContent" class="content hidden">
You know.. Countries, cities, rivers and stuff.
</div>
<div id="ArtsContent" class="content hidden">
You learn about things that have no function in Arts.
</div>

you have to pass description param to the method like this way
<li onClick="changecontent("Math");">Math</li>

Here is how I did it, sorry my question was vague im quite new at this kind of thing....
<script>
function changecontent(clicked_id){
alert(clicked_id);
}
</script>
<!doctype html>
<html>
<head>
<style>
}
.editingfunction{
background-color: ;
text-decoration-color: white;
border :none;
opacity: 0.4;
width: 100px;
}
.col:active {
background-color: rgb(167,114,169);
cursor:pointer;
text-decoration-color:red;
}
.col:visited
{
text-decoration-color:red;
}
body {
background: ;
font-family: ;
text-decoration-color: white;
}
</style>
</head>
<body>
<div class="editingfunction">
<ul style="list-style-type:none">
<li>Please Click Subject</li>
<li class="col" id="Math" onClick="changecontent(this.id);">Math</li>
<li class="col" id="Science" onClick="changecontent(this.id);">Science</li>
<li class="col" id="Geography" onClick="changecontent(this.id);">Geography</li>
<li class="col" id="Arts" onClick="changecontent(this.id);">Arts</li>
<li class="col" id="Buisness" onClick="changecontent(this.id);">Buisness</li>
<li class="col" id="Health" onClick="changecontent(this.id);">Health</li>
<li class="col" id="Social_Science" onClick="changecontent(this.id);">Social Science</li>
</ul>
</div>
<div id="content">
</div>
</body>
</html>
<!-- begin snippet: js hide:false -->

Can't get sticky navbar to work

First, why isn't http://jsfiddle.net/s4eMT/ working?
Second, the js-code that I put in jsfiddle is working in my project but I have a some kind of browser-support issue.
When I run the website in Chrome it works as expected, it gets fixed when you scroll down to the navbar, when I run it in Safari and Firefox it sets the navbar fixed but also shrinks the navbar way smaller and floating left. I can't figure out what it is that's not supported by the last mentioned browsers.
Here's my code:
HTML
<div id="navbar-wrapper">
<div class="navbar">
<div class="navbar-inner hidden-phone">
<ul class="nav">
<li #if(page=="services"){class="active"}>#Messages("NavServices")</li>
<li #if(page=="work"){class="active"}>#Messages("NavWork")</li>
<li class="logo hidden-phone"><img src="#routes.Assets.at("images/HF_logo_inverted.png")" class="img-circle" alt="Home" /></li>
<li #if(page=="wall"){class="active"}>#Messages("NavWall")</li>
<li #if(page=="contact"){class="active"}>#Messages("NavContact")</li>
</ul>
</div>
<div class="navbar-inner visible-phone">
<ul class="nav phone-only">
<li #if(page=="services"){class="active"}>#Messages("NavServices")</li>
<li #if(page=="work"){class="active"}>#Messages("NavWork")</li>
</ul>
<ul class="nav phone-only">
<li #if(page=="wall"){class="active"}>#Messages("NavWall")</li>
<li #if(page=="contact"){class="active"}>#Messages("NavContact")</li>
</ul>
</div>
<div id="language" class="hidden-phone">
<img src="#routes.Assets.at("images/gb.png")" />
<img src="#routes.Assets.at("images/se.png")" />
</div>
</div>
</div>
CSS
#navbar-wrapper {
position: relative;
min-width: 100%;
border:1px solid red;
}
JAVASCRIPT
$(document).ready(function () {
var stickyNavTop = $('#navbar-wrapper').offset().top;
var stickyNav = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#navbar-wrapper').css({
'position': 'fixed',
'top': '0'
});
alert('afa');
} else {
$('#navbar-wrapper').css({
'position': 'relative'
});
}
};
stickyNav();
$(window).scroll(function () {
stickyNav();
});
});
What am I missing?
regards,