Develop Reference

menu doesn't hide on second click

I'm facing a problem with a hamburger menu...
When I click on the hamburger icon there is no problem, it opens and closes without any problem, also when I click on a link I am well redirected to the sections and the menu closes, no problem so far.
But when i re open the menu and click a second time on a link section, my menu no longer wants to close and I can't figure it out why because i've put a condition, it must have a problem somewhere.. So please if you could help me to understand. Thank you very much. Here is my code :
html :
<header id="home" class="background-color">
<div id="logo">
<img src="./img/logo.svg" alt="logo">
</div>
<nav id="menu-dekstop">
Accueil
Projets
Contact
</nav>
<div class="show-menu">
<div id="logo">
<img src="./img/logo.svg" alt="logo">
</div>
</div>
<div id="menu-wrap">
<nav class="menu">
Accueil
Projets
Contact
</nav>
</div>
<div id ="menu-holder" class="menu-holder">
<button id="open-menu" class="white">
<div class="burger">
<span></span>
</div>
</button>
</div>
</header>
JavaScript
burger.addEventListener('click', menuOpen)
function menuOpen()
{
if (showMenu.style.display == 'block')
{
burger.classList.toggle('active');
menuWrap.style.display = 'none';
showMenu.style.display = 'none';
}
else
{
burger.classList.toggle('active');
menuWrap.style.display = 'block';
showMenu.style.display = 'block';
}
}

There appears to be no listener that closes the menu upon a link click.
This code will accomplish a menu hide upon link click in the header:
const header = document.getElementById('home');
header.addEventListener('click', function (evt) {
const clickTarget = evt.target;
if (clickTarget.tagName !== 'A") { return; }
burger.classList.remove('active);
menuWrap.style.display = 'none';
showMenu.style.display = 'none';
});
Why did the menu get hidden the first time a link was clicked? Not sure, but I suspect it's because the first link click caused a page reload.

Expanding an accordion and scrolling to a section after expansion

I have a comments section and a review form at the bottom of the comments section. I have the entire comments section wrapped in a Bootstrap Accordion with the class of Collapse:
CODEPEN:
Check out the demo. Note clicking the "leave a review" link expands the review_form, but does not scroll to.
Working codepen
I've tried onClick="window.scrollTo(#review_form)", but that does not work.
Basic HTML:
<div class="review-collapse">
<button class="woocommerce button review-button" data-toggle="collapse" data-target="#commentList" aria-expanded="false" aria-controls="commentList">SHOW ALL REVIEWS'</button>
</div>
<div class="collapse" id="commentList">
<div class="leave-review">
<a data-toggle="collapse" data-target="#review_form_wrapper" aria-expanded="false" aria-controls="review_form_wrapper" onClick="window.scrollTo(#review_form)">Leave a review?></a>
</div>
<ol class="commentList">
//Comments here
</ol>
<div id="review_form_wrapper" class="collapse">
<div id="review_form">
//review form to be expanded
</div>
</div
I want to focus on the a in .leave-review: I would like to expand the #review_form_wrapper on click, and then scroll to the section immediately after. I can get the form to expand, but I cannot get the form to scroll into view.
Any suggestions? I would like to use Vanilla JS if possible, but jQuery is fine as well.

I was able to fix this by not using window.scrollTo(#reviewForm) but the scrollIntoView() method. I had to check if the #review_form_wrapper had the class of show before scrolling, which I used a setTimeout() for:
function productReviewJS() {
const link = document.querySelector("#scrollToReview");
link.addEventListener("click", function () {
window.setTimeout(function () {
if (reviewForm.classList.contains("show")) {
form.scrollIntoView({ behavior: "smooth" });
}
}, 400);
});
}
productReviewJS();

Dropdown menu opened on pageload ONLY on homepage

I created simple CSS menu with only one dropdown submenu, which has to be opened on pageload ONLY on homepage, and keep it closed by default on rest of site pages.
I managed to set dropdown menu to be opened by default on pageload with Javascript (and closed onclick), and this works perfectly.
<!-- MENU -->
<div class="divBg">
<!-- BUTTON 1 -->
<div class="dropdown">
<button class="dropbtnMain" onclick="document.getElementById('dropdown').style.display=='none' ? document.getElementById('dropdown').style.display='' : document.getElementById('dropdown').style.display ='none';">Dropdown categories</button>
<!-- BUTTON 1 DROPDOWN CONTENT -->
<div class="dropdown-content" id="dropdown">
<a href=#>Dropdown link 1</a>
<a href=#>Dropdown link 2</a>
<a href=#>Dropdown link 3</a>
</div>
</div>
<!-- BUTTON 2 -->
<div class="dropdown">
<button class="dropbtn">Category 2</button>
</div>
<!-- BUTTON 3 -->
<div class="dropdown">
<button class="dropbtn">Category 3</button>
</div>
</div>
But is there solution to have dropdown opened ONLY on homepage, and closed by default on all other pages?

So you can do it by add css class:
.is-hidden {
display: none;
}
and then in JavaScript you can base on page that is loaded:
if (window.location.pathname !== '/') {
document.querySelector('.dropdown').classList.add('is-hidden');
}

If you're using seperate html files you could just remove the javascript?
But I'm guessing, although not specified you're including the dropdown file in your other pages you can use a javascript function with location.pathname, to check what the filename is and only run it then
This as your onclick.
onclick="foo()"
This is the function to go at the top in a script area or script file.
function foo(){
if(location == "http://foobar.com"){
//Code to open your drop down
}
}
something like this.

You can give your body tag a class of 'home' and then add the following CSS.
body.home .dropdown{display:block;}
This should do the trick.

Try this CSS code.
#dropdown
{
display: none;
}
body.home #dropdown
{
display:block;
}

I would add an id and a class to the body like this:
<body id="home" class="home">
...
</body>
And then I would check if body has this selector:
function hasClass(ele, cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
if(hasClass(document.getElementById("home"), "test")){
//do something
}

Sliding navigational menu (sliiide.js) works partially

I am trying to slide a navigational menu. I am using sliiide.min.js. The following settings work when I stay at the top of the page, but as I scrolls down and click to slide the menu it gives a blank white portion in the place of the actual menu, which I can't figure out how to sort out. If any of you experienced similar problems before, please kindly share. I am giving full code.
THE HTML MENU
<div id="tablet-mobile-menu" class="sidr left" style="visibility: hidden; display: block; left: 0px;">
<div class="utility-nav">
<div class="main-menu">
<ul id="burger-menu" class="links clearfix">
<li class="menu-15461 first">
Follow Us On
</li>
<div class="utility-menu">
<ul id="hamburger-utility-menu" class="links clearfix">
<li class="menu-7731 first">
Facebook
</li>
Pinterest
</li>
</ul>
</div>
<li class="menu-15461 first" style="">
Sections
</li>
</ul>
</div>
<p>Men's Health, The Brand Men Live By</p>
<p>Copyright © 2016 Rodale Inc. No reproduction, transmission or display is permitted without the written permissions of Rodale Inc.</p>
<p>
Privacy Policy.
About Us.
</p>
</div>
</div>
HERE IS THE JS CONFIGURATION:
<?php $this->script()->captureStart(); ?>
var settings = {
toggle: "#menu-btn-toggle", // the selector for the menu toggle, whatever clickable element you want to activate or deactivate the menu. A click listener will be added to this element.
exit_selector: ".is-active", // the selector for an exit button in the div if needed, when the exit element is clicked the menu will deactivate, suitable for an exit element inside the nav menu or the side bar
animation_duration: "0.1s", //how long it takes to slide the menu
place: "left", //where is the menu sliding from, possible options are (left | right | top | bottom)
animation_curve: "cubic-bezier(0.54, 0.01, 0.57, 1.03)", //animation curve for the sliding animation
body_slide: true, //set it to true if you want to use the effect where the entire page slides and not just the div
no_scroll: true, //set to true if you want the scrolling disabled while the menu is active
};
$('#tablet-mobile-menu').sliiide(settings); //initialize sliiide
<?php $this->script()->captureEnd(); ?>
HERE IS THE HTML WHERE THE CLICK OR TOGGLE BUTTON RESIDES:
<div id="menu-btn">
<a href="/" title="Menu" id="menu-btn-toggle" class="clickable">
<!--<i class="fa fa-bars fa-2x" aria-hidden="true"></i>-->
<!--<i class="fa fa-times fa-2x" aria-hidden="true"></i>-->
<span></span>
</a>
</div>

Perhaps the slider is there its just that its sitting at the top of the page so what your seeing is the bottom of the menu.
have you tried to add a CSS style to the top of the navigation so its sticks to the top of page even when scrolling.
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}

Click not working in any condition

I have just a simple hyperlink on which when I am trying to add an click() event handler it is not working. I tried, .on(), .live(), .delegate() none of them worked. How can I do it?
I cannot make a fiddle becuase I don't know why my bootstrap.min.css is not getting included in the external resources section.
Please tell me any other way of doing it.
My Code:
HTML:
<div class="navbar nav-fixed-top navbar-inverse" style="min-height: 50px; margin-bottom: 0; box-shadow: 0px 2px 5px #222;">
<!-- Creating a fixed to the top navbar with no bottom margin and a nice little shadow and increasing the height -->
<div class="navbar-inner" style="border-radius: 0;min-height: 50px; ">
<!-- Creating the inner content of navbar and increasng it's height aswell to match the parent's height aswell -->
<div class="container-fluid">
<!-- Main header starts -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<!-- Small screen collapseable menu starts --> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
<!-- The collapseable menu icon(becuase the three `icon-bar` make an icon :P) -->
</button> <a class="brand" href="#"><img src="img/logo.png"
style="height: 25px;" /> </a>
<!-- adding the logo to the header -->
<div class="nav-collapse collapse pull-right">
<!-- div holding collapseable menu's data -->
<ul class="nav">
<!-- creating a list to be created in the collapseable menu -->
<li>Register
</li>
<!-- adding an hyper link to the collapseable menu -->
</ul>
<!-- closing the list -->
</div>
<!-- closing the div holding collapseable menu's data -->
</div>
<!-- closing the main header -->
</div>
<!-- closing inner content holder of navbar div -->
</div>
<!-- closing the fixed to top navbar holder -->
CSS: Using bootstrap.min.css
JS:
var registerBtn = $("#register_button"); //storing the hyperlink of register in a variable
var i = 0; //click count
$(registerBtn).on('click', function (e) {
i++;
if (i % 2 === 0) {
$("#register_frm").fadeToggle('fast', function () {
$("#login_frm").fadeToggle('fast');
});
$("#register").text('Register');
} else {
$("#login_frm").fadeToggle('fast', function () {
$("#register_frm").fadeToggle('fast');
});
$("#register").text('Login');
}
});
Any suggesstions?

Change your code :
$(function() {
var registerBtn = $("#register_button"); //storing the hyperlink of reg....
var i = 0; //click count
registerBtn.on('click', function (e) { // since registerBtn is a reference to anchor tag
e.prevenDefault(); // prevent default behaviour of anchor tag
.........
});
});

It's probably executing the handler binding before the element is created in the DOM. Either move the code to the end of the document (after the element has been created), or wrap it inside a ready event:
$(function() {
var registerBtn = $("#register_button"); //storing the hyperlink of register in a variable
var i = 0; //click count
$(registerBtn).on('click', function (e) {
i++;
if (i % 2 === 0) {
$("#register_frm").fadeToggle('fast', function () {
$("#login_frm").fadeToggle('fast');
});
$("#register").text('Register');
} else {
$("#login_frm").fadeToggle('fast', function () {
$("#register_frm").fadeToggle('fast');
});
$("#register").text('Login');
}
});
});