Develop Reference

Hide and show an item based on a toggled is-active class

I used the following code to toggle a button class in order to make a full-screen mobile menu.
HTML
button class="hamburger hamburger--slider" type="button">
<a href='#'><div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</a>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.hamburger').click(function(){
$('.hamburger--slider').toggleClass('is-active');
});
});
});
Now I would like to hide another item in my header when the toggled class .is-active is present.
The following code works to hide the item, but once the toggled class is gone, the item does not reappear but stays hidden until the page is reloaded.
jQuery(function($) {
if ($('.hamburger--slider.is-active').length) {
$('.rey-headerCart-wrapper').hide();
}
});
Appreciate any help :) !

you have to show the element again after the burger menu closes:
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.hamburger').click(function(){
$('.hamburger--slider').toggleClass('is-active');
// hide / show other element
if ($('.hamburger--slider.is-active').length) {
$('.rey-headerCart-wrapper').hide();
} else {
$('.rey-headerCart-wrapper').show();
}
});
});
});
Or in vanilla javascript:
window.addEventListener("load", () => {
document.querySelector(".hamburger").addEventListener("click", () => {
document.querySelector(".hamburger--slider").classList.toggle("is-active");
// hide / show other element
const cart = document.querySelector(".rey-headerCart-wrapper");
if (document.querySelector(".hamburger--slider.is-active")) {
cart.style.display = "none";
} else {
cart.style.display = "block";
// apply original display style
// cart.style.display = "inline-block";
// cart.style.display = "flex";
};
});
})

In order to make toggle functions like this more understandable, maintainable and extendable you need to think about your HTML structure.
In your current structure, you have a button that toggles a class on itself. Therefore any element beyond that button that has to change appearance or beaviour has to check which class that button has, or you have to extend the click-event handler in order to add these elements (that's what you did here).
This can get quite messy really fast.
A better approach could be to not toggle a class on the button but on an element that is a common parent to all elements that you want to change the behavior of.
That way anything you ever add to that wrapper already can be manipulated via CSS, without the need of changing your JS.
$('.nav-toggler').on('click', function() {
$('#nav-wrapper').toggleClass('active');
});
.menu, .cart {
padding: 1em;
margin: 2px;
}
.cart {
background: #FFF000;
}
.menu{
background: #F1F1F1;
display: none;
}
#nav-wrapper.active > .menu {
display: block;
}
#nav-wrapper.active > .cart {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav-wrapper">
<button class="nav-toggler">Toggle</button>
<div class="menu">My Menu</div>
<div class="cart">My Cart</div>
</div>

check if element is display: block, not working

I have a subscription form that drops down on top of the navigation when the user clicks a button (#sub-header). this button is below the navigation. my navigation is fixed, so this button has a top of 60px, to keep it below the nav. however when the button is clicked and the subscription form drops down, then there is a space of 60px between the button and the navigation. i need to change the top of the button from 60px to 0px only when the subscription form is open. This is my code:
if ($('.subscription-signup').css('display') == 'none') {
$('#sub-header').css("top", "60px");
} else if ($('.subscription-signup').css('display') == 'block') {
$('#sub-header').css("top", "0px");
};
Here is my html code:
<div class="subscription-signup">
<div class="subscription-close" id="subscription-close"> </div>
<div class="email-signup">
<form></form>
</div>
</div>
And here is the code to open the form (which works):
var $subscribeContent = $('.subscription-signup');
var $subscribeClose = $('#subscription-close');
$subscribeContent.hide();
$subscribe.on('click', function(e) {
e.preventDefault();
$subscribeContent.slideToggle();
});
$subscribeClose.on('click', function(e) {
e.preventDefault();
$subscribeContent.slideToggle();
});
For some reason, when the subscription form is open and is set to display: block, the top does not change to 0px. Is there something wrong with my code? Can anyone figure out how to do this?

use
$('.subscription-signup').is(':hidden')
instead

Why not just add a class to the element?
$subscribe.on('click', function(e) {
e.preventDefault();
$('.subscription-signup').addClass('subOpen');
$subscribeContent.slideToggle();
});
$subscribeClose.on('click', function(e) {
e.preventDefault();
$('.subscription-signup').removeClass('subOpen');
$subscribeContent.slideToggle();
});
.subscription-signup {
top: 0px;
}
.subOpen {
top: 60px;
}

Making a div to display as none

I have this code which makes a div to display as none when anywhere outside the div is clicked. But my problem is I also want the link which makes the div to display block to also close the div if the div is displayed as block so I ran this code:
function show_div(x){
var box = document.getElementById(x);
if(box.style.display=='block'){
box.style.display='none';
} else {
box.style.display='block';
window.addEventListener('mouseup', function(event){
if(event.target != box && event.target.parentNode != box){
box.style.display='none';
}
});
}
}
But the link does not close the div. if I run it like this:
function show_div(x){
var box = document.getElementById(x);
if(box.style.display=='block'){
box.style.display='none';
} else {
box.style.display='block';
}
}
The link opens and closes the div, But I also want a click anywhere outside the div to close the div also. Please do anyone have a better Idea on how I can achieve this? Here is my HTML:
<a onclick="show_div('divd')" href="javascript:;">click</a>
<div id="divd">this is the div</div>

As Portal_Zii said, you'll probably need a wrapper/container for your div to hide it, but this example should give you a basic idea.
$(document).ready(function() {
var $div = $("#divd");
$("a").on("click", function() {
$div.toggle(); // this is to toggle div visibilty
});
$div.on("click", function(e) {
// prevent div from closing when clicking inside
e.preventDefault();
return false;
});
$div.parent().on("click", function() {
// hide div when user clicks inside div's parent element
$div.hide();
});
});
.container {
background: red;
height: 100px;
padding: 20px;
}
#divd {
background: blue;
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
click
<div class="container">
<div id="divd">this is the div</div>
</div>

How change selector for spoiler?

I'm trying to change a spoiler but i have problem with javascript code
This is the spoiler:
http://nathan3000.altervista.org/Jdownloader%20Spoiler/zzzz.html
When i click the image "MAC" the spoiler opens. When i click again MAC the spoiler closes. But when i click between the text the spoiler closes again. I do not want the spoiler closes when I click in the middle of the text but only when i click image "MAC". How can i do change selector so it only show/hides when i click the image?I'm still clicking inside the .OS container
I don't understand why the table border doesn't appear on online version while on local version I can see the borders of tables.
The javascript code for spoiler is this:
<script type="text/javascript">
$(document).ready(function(){
$(".nonjs").removeAttr( "href"); //href is needed for users without JS
$('.OS').click(function(){
if($(this).find(".details").is(":visible"))
{
$(this).find(".details").not(":hidden").hide("slow");
return true;
}
else
{
$(this).find(".details").show("slow");
return false;
}
});
});
</script>
<style type="text/css">
<!--
.details {
display: none;
clear: both;
padding: 2px;
}
.nonjs{
cursor:pointer;
}
img {
border: 0px;
}
-->
</style>
Thanks in advance

This is working:
$(document).ready(function(){
$(".nonjs").removeAttr( "href");
//href is needed for users without JS
$('.OS').click(function(e){
if(!$(e.target).parents('.details').length){
if($(this).find('.details').is(":visible"))
{
$(this).find('.details').not(":hidden").hide("slow");
return true;
}
else
{
$(this).find('.details').show("slow");
return false;
}
}
});
});

put your spoiler/ popdown menu directly after your .OS image. right now your popdown is a child of the .OS container, so clicks on it are passed to the .OS click handler.
here is something like you want:
http://tempesthostingservices.com/t/zzzz.html

jQuery Drop Down Hover Menu

I'm new to jQuery, I was hoping you guys could help me. I'm trying to make a hover dropdown menu, but it's extremely buggy. Can you help me clean up my Javascript? Look at my code please.
http://jsdo.it/mretchin/4Ewk
It doesn't work on jsdo.it for whatever reason, but it works in Komodo Edit.
Try out the code yourself if you really want to, the problem is mainly the Javascript. Can you help me make it so that when the user hovers over img.menu_class, ul.file_menu drops down, and then, if I wanted, I could hover over #something in ul and it would drop out horizantally, not vertically.
Thanks for helping! I appreciate it!
Should I just give up and make it work in CSS?

You can do something like this:
$(document).ready(function() {
$(".hoverli").hover(
function() {
$('ul.file_menu').stop(true, true).slideDown('medium');
},
function() {
$('ul.file_menu').stop(true, true).slideUp('medium');
}
});
});
And here an example with sub-menus:
$(document).ready(function() {
$(".hoverli").hover(
function() {
$('ul.file_menu').slideDown('medium');
},
function() {
$('ul.file_menu').slideUp('medium');
}
);
$(".file_menu li").hover(
function() {
$(this).children("ul").slideDown('medium');
},
function() {
$(this).children("ul").slideUp('medium');
}
);
});

For anyone who finds this in the future Aram's answer can be shortened with .slideToggle() to handle both up and down.
Here's the modified fiddle
http://jsfiddle.net/4jxph/2009/
If you have a sub-menu set to display: none; it will trigger it also, so what you'll want to do is set it to block, then add something like this
var subMenu = $('li.hoverli > ul > li');
subMenu.hover(function () {
$(this).find("ul").slideToggle(200);
});
And place it right below your first slideToggle. Why don't I just show you?
$(document).ready(function () {
$(".hoverli").hover(function () {
$(this).find('ul').slideToggle('medium');
});
var subMenu = $('li.hoverli > ul > li');
subMenu.hover(function () {
$(this).find("ul").slideToggle(200);
});
});

Not sure if you care but you want to make sure that you run the .stop() method that way the animations dont build themselves up and run over and over. Here's an example
http://jsfiddle.net/4jxph/1335/
$(document).ready(function () {
$(".hoverli").hover(
function () {
$('ul.file_menu').stop(true, true).slideDown('medium');
},
function () {
$('ul.file_menu').stop(true,true).slideUp('medium');
}
);
});

Use the finish function in jQuery to prevent the bug where you rapidly hover your mouse over the menu and out of the menu. Finish is better than the stop function previously suggested.
$(document).ready(
function () {
$(".hoverli").hover(
function () {
$('ul.file_menu').finish().slideDown('medium');
},
function () {
$('ul.file_menu').finish().slideUp('medium');
}
);
});

Aram Mkrtchyan's answer was almost there for me. Problem with his was if you add anything below the menu then it gets all screwy. Here is an example of what I mean, I added a div below his menu:
http://jsfiddle.net/4jxph/3418/
I am submitting this updated answer using div instead of lists and list items (which I find much easier to work with, and way more flexible) and jQuery version 1.9.1
here is link to jFiddle:
http://jsfiddle.net/4jxph/3423/
Here is the code:
--------------- HTML:
<div id="divMenuWrapper1" class="divMenuWrapper1">
<div id="hoverli">
<div class="lbtn">
Actions
</div>
<div id="actions_menu" class="file_menu">
<div>File</div>
<div>Edit</div>
<div>View</div>
<hr />
<div>Insert</div>
<div>Modify</div>
<div>Control</div>
<div>Debug</div>
<div>Window</div>
<div>Help</div>
</div>
</div>
</div>
<div>
testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu
</div>
--------------- Css:
.lbtn
{
display:inline-block;
cursor:pointer;
height:20px;
background-color:silver;
background-repeat:repeat-x;
border:1px solid black; /* dark navy blue */
text-decoration:none;
font-size:11pt;
text-align:center;
line-height:20px;
padding:0px 10px 0px 10px;
}
.divMenuWrapper1
{
height: 25px;
width: 75px;
}
.file_menu
{
display:none;
width:250px;
border: 1px solid #1c1c1c;
background-color: white;
position:relative;
z-index:100000;
}
.file_menu div
{
background-color: white;
font-size:10pt;
}
.file_menu div a
{
color:gray;
text-decoration:none;
padding:3px;
padding-left:15px;
display:block;
}
.file_menu div a:hover
{
padding:3px;
padding-left:15px;
text-decoration:underline;
color: black;
}
--------------- jQuery (to be placed in document.ready or pageLoad()):
$("#hoverli").hover(
function () {
$('#actions_menu').finish().slideDown('fast');
},
function () {
$('#actions_menu').finish().slideUp('fast');
}
);

I know this is probably a bit late but just found this thread saw that your question above about things below the menu 'getting a bit screwy' was unanswered.
If you give your div with the class 'file menu' a position of absolute then it should cease to affect any elements ahead of it as you will have taken it out of the normal flow.

To get a select box to open on hover to the exact height required by its contents, figure out how many elements there are:
JavaScript
function DropList(idval) {
//
// fully opens a dropdown window for a select box on hover
//
var numOptgroups = document.getElementById(idval).getElementsByTagName('optgroup').length;
var numOptions = document.getElementById(idval).getElementsByTagName('option').length;
document.getElementById(idval).size = numOptgroups + numOptions;
}
HTML
<select class="selectpicker" id="heightMenu" onmouseover="DropList('heightMenu')" onmouseout="this.size=1;" size="1">
<option value="0">Any height</option>
etc.
</select>