We Keep Coding

Make content of header disappear when menu opens

I basically want to make that when I press on a button the first time it adds display: none; to an element and when I press it again it makes the element appear again (so add display: none;). How would I do this with jQuery?
This is the jQuery I tried to implement but as I'm new to Javascript I don't know why it isn't working.
$('#menuBtn').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$('.header-text').css({
'display': 'none'
});
} else {
$('.header-text').css({
'display': 'block'
});
}
$(this).data("clicks", !clicks);
});

Use toggle or slideToggle (With animation)
$('#menuBtn').on('click', function() {
$('.header-text').toggle();
});
$('#menuBtnSlide').on('click', function() {
$('.header-text').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menuBtn">Toggle</button>
<button id="menuBtnSlide">SlideToggle</button>
<div class="header-text">
This content must me show and hide
</div>

You could supply a modifier class in some external stylesheet for hiding the text and toggle it via toggleClass.
Word of advice: It's best not to use something like toggle because it will inject inline css into your elements, making it difficult to override in the long-run for something so simplistic.
const $headerText = $('.header-text');
$('#menuBtn').click(function() {
$headerText.toggleClass('header-text--hidden');
});
.header-text--hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menuBtn" type="button">Toggle</button>
<header>
<p class="header-text">Text 1</p>
<p class="header-text">Text 2</p>
<p class="header-text">Text 3</p>
<p class="header-text">Text 4</p>
</header>

You actually don't need jQuery for this.
You can add CSS rule to set .hidden to display: none and then toggle that class when the button is clicked.
To catch the click event on the button, you need a click event listener
const header = document.querySelector('.header');
const toggle = document.querySelector('.menu-toggle');
toggle.addEventListener('click', () => {
header.classList.toggle('hidden')
});
.header {
background: red;
height: 3em;
}
.hidden {
display: none;
}
<header class="header"></header>
<button class="menu-toggle">Click me!</button>

.hidden{display:none !important;}
$('#menuBtn').click(function() {
$('.header-text').toggleClass("hidden");
});

relatedTarget is null in Firefox when onBlur is called

I'm trying to create a help message that will disappear when the user either clicks the toggle button to display the help message or clicks away by clicking elsewhere on the page. The solution appears to be to look at the relatedTarget property of the onblur event and prevent the onblur handler from running when the relatedTarget is the button to toggle the help message. This seems to work in Chrome, but in Firefox and Safari, the relatedTarget property is set to the container div rather than the button, which makes it impossible to distinguish between the toggle button click and a "click away".
I've created a simple demonstrator that illustrates the problem:
let openState = false;
let contentDiv = document.getElementById("show-hide-content");
let accordionDiv = document.getElementById("accordion");
let showHideButton = document.getElementById("show-hide-toggle");
function setOpenState(state) {
openState = state;
if(openState) {
contentDiv.style.visibility = "visible";
contentDiv.focus();
}
else {
contentDiv.style.visibility = "hidden";
}
}
function toggleVisibility(override) {
if (typeof override === "boolean") {
setOpenState(override);
}
else {
setOpenState(!openState);
}
}
function buttonClickHandler(event) {
toggleVisibility();
}
function contentBlurHandler(event) {
if(!accordionDiv.contains(event.relatedTarget)) {
toggleVisibility(false);
}
}
showHideButton.onclick = buttonClickHandler;
contentDiv.onblur = contentBlurHandler;
.parent {
display: flex;
width: 100vw;
height: 100vh;
flex-direction: row;
background-color: #409958;
}
.accordion {
background-color: #28a7c9;
}
.show-hide-content {
visibility: hidden;
background-color: #c91e63;
}
<h1>Show/Hide Test</h1>
<div class="parent">
<div class="drawer">
<div class="accordion" id="accordion">
<button class="show-hide-toggle" id="show-hide-toggle">Show/Hide</button>
<div class="show-hide-content" id="show-hide-content" tabindex="-1">
<p>This is some content that should be shown or hidden depending on the toggle.</p>
</div>
</div>
<div class="spacer">
</div>
</div>
</div>
This code works correctly in Chrome. However, in Firefox, clicking the "Show/Hide" button displays the hidden content, but doesn't hide it when the button is clicked again. As far as I can tell, this is because the onblur handler is hiding the div, and then the onclick handler is toggling it open again, even though I'm checking onblur.relatedTarget to ensure that it's not anywhere inside the drawer.
What is the correct way to detect click-away in Firefox?

The problem is that clicking the <button> doesn't focus it on some browser/OS combinations (notably on macOS except in Chrome), so onblur's event.relatedTarget is null as nothing on the page receives focus. If you SHIFT+TAB from the <div id="show-hide-content">, you'll see that relatedTarget is set as you expect, as the button does receive focus in this scenario.
I would run the code to hide the div off a small timeout, to give the click handler a chance to run first.
In the example below I implemented this suggestion and added some logging to make it easier to see what's going on:
let openState = false;
let contentDiv = document.getElementById("show-hide-content");
let accordionDiv = document.getElementById("accordion");
let showHideButton = document.getElementById("show-hide-toggle");
function setOpenState(state) {
openState = state;
if(openState) {
contentDiv.style.visibility = "visible";
contentDiv.focus();
}
else {
contentDiv.style.visibility = "hidden";
}
}
function buttonClickHandler(event) {
console.log("click, setting openState to", !openState);
setOpenState(!openState);
}
function contentBlurHandler(event) {
console.log("blur, relatedTarget is", event.relatedTarget);
setTimeout(function() {
console.log("blur, after timeout, openState is", openState);
setOpenState(false);
}, 100);
}
showHideButton.onclick = buttonClickHandler;
showHideButton.onmousedown = function() {console.log("button mousedown"); };
contentDiv.onblur = contentBlurHandler;
showHideButton.onfocus = function(ev) { console.log("button onfocus"); }
.parent {
display: flex;
width: 100vw;
height: 100vh;
flex-direction: row;
background-color: #409958;
}
.accordion {
background-color: #28a7c9;
}
.show-hide-content {
visibility: hidden;
background-color: #c91e63;
}
<h1>Show/Hide Test</h1>
<div class="parent">
<div class="drawer">
<div class="accordion" id="accordion">
<button class="show-hide-toggle" id="show-hide-toggle">Show/Hide</button>
<div class="show-hide-content" id="show-hide-content" tabindex="-1">
<p>This is some content that should be shown or hidden depending on the toggle.</p>
</div>
</div>
<div class="spacer">
</div>
</div>
</div>

This happened to me as well on both Safari and Firefox.
I had an use case where I needed to show clear icon/button only when user focused input (with input having value of course). And clicking that icon would make a blur on input and I had check if new focused element is contained within input but since relatedTarget was null I could not check it.
I added dummy span around my clear button and relatedTarget wasnt't null anymore:
<span aria-hidden="true" tabindex="-1" style="outline: none;">
<button>X</button>
</span>

For thoses who just need a specific value from the target, remember, if your application's design and size allows this possibility, that you can just hardcode the value:
onBlur={()=>function(value)}
For a lot of case it could just work, before an automatic, better scaling solution occurs you have this possibility.

Javascript set CSS Class for Multiple Elements (one element set, remaining elements unset)

I am developing a website which has a few filter buttons which are grouped into several groups. I am trying to find a way to set the class of one of these buttons to "filter-set" while all other buttons in the group are set to "not-set".
Each button is a DIV with a unique ID.
i have some bloated code where each button has its own function and sets the associated buttons to "not-set" but this seems inefficient and im sure there's a better way!
Bloated code example:
function setClassR(){
document.getElementById('filter_rare').className= 'filter-set';
document.getElementById('filter_common').className= 'not-set';
document.getElementById("filter_occasional").className = 'not-set';
}
function setClassC(){
document.getElementById('filter_rare').className= 'not-set';
document.getElementById('filter_common').className= 'filter-set';
document.getElementById("filter_occasional").className = 'not-set';
}
function setClassO(){
document.getElementById('filter_rare').className= 'not-set';
document.getElementById('filter_common').className= 'not-set';
document.getElementById("filter_occasional").className = 'filter-set';
}
I would like to be able to have a function for each group of filters which when run using an onClick=function() sets the clicked button to "filter-set" and all others to "not-set"
I have tried the following code but it doesnt appear to run:
function setClassSeas(rareClass, commonClass, occClass) {
setClass("filter_rare", rareClass);
setClass("filter_common", commonClass);
setClass("filter_occ", occClass);
}
function setClass(IDName, displayValue) {
var items = document.getElementById(IDName);
for (var i=0; i < items.length; i++) {
items[i].className = (displayValue? "filter-set" : "not-set");
}
}
UPDATE///
HTML Code for the Divs acting as buttons:
<div id="filter_rare" title="Rare"
class="not-set"
onclick="chosenFrequency('frequency=Rare'); setClassR();"></div>
<div id="filter_common" title="Common"
class="not-set"
onclick="chosenFrequency('frequency=Common'); setClassC();"></div>
<div id="filter_occasional" title="Occasional"
class="not-set"
onclick="chosenFrequency('frequency=Occasional'); setClassO();"></div>

If every button has a class, say filter-button, then you can address all buttons at once.
In modern development you should attach an event handler instead of using inline onclick handlers.
With all buttons having a common class you can find them all at once. I'm changing your buttons to look like this, adding the "filter-button" class and removing the onclick handler:
<div id="filter_rare" title="Rare"
class="filter-button not-set">Rare</div>
(I've put text in the div just to simplify this demonstration)
Now collect all the filter buttons:
let filters = document.querySelectorAll('div.filter-button');
This gets you a NodeList of elements (kind of like an Array but not one) You'll want to attach an onclick event handler to each of the buttons. To do this you can use the NodeList.forEach() call.
filters.forEach(node => node.addEventListener('click', someFunction));
In the function that gets called when you click a button, you want to clear any filter-set class that's currently set, put back the original not-set class, then set the filter-set class only on the button that was clicked. This will look something like this:
function someFunction(event) {
// again, use forEach to do the same thing to each filter button
filters.forEach( function(node) {
node.classList.remove('filter-set');
node.classList.add('not-set');
} );
// now add the 'filter-set' class on the button that was clicked
event.target.classList.add('filter-set');
}
The good thing about using classList instead of just doing className="something" is that classList can add/remove classes while leaving other classes alone; doing className="something" wipes out all the classes that are present and replaces them with "something".
Putting that all together, and using an anonymous function instead of named function gives this snippet:
let filters = document.querySelectorAll('div.filter-button');
filters.forEach(node => node.addEventListener('click',
function(event) {
console.log(event.target);
filters.forEach(function(node) {
node.classList.remove('filter-set');
node.classList.add('not-set');
});
event.target.classList.add('filter-set');
}));
/* Make these look like buttons; put a green border on them */
.filter-button {
min-height: 2ex;
max-width: 12em;
padding: .25em;
margin: .7em .3em;
background-color: lightgreen;
border: 2px solid green;
border-radius: 4px;
}
/* use a Red border on any button that has "filter-set" */
.filter-button.filter-set {
border: 2px solid red;
}
/* limit the height of the stack-snippet console */
div.as-console-wrapper {
max-height: 2.5em;
}
<div id="filter_rare" title="Rare"
class="filter-button not-set">Rare</div>
<div id="filter_common" title="Common"
class="filter-button not-set">Common</div>
<div id="filter_occasional" title="Occasional"
class="filter-button not-set">Occasional</div>
Using the class not-set is really redundant — you could just have no extra class on buttons by default and it would simplify things a little. Buttons would have the class(es) filter-button or filter-button filter-set.

Change your setClass function according to this. Hope it will work. document.getElementById() function will always return a single element (not a list of elements). Even if you have multiple elements having the same ID this function will always return the first element having the given ID. Do not forget to call your setClassSeas() function from html.
function setClassSeas(rareClass, commonClass, occClass) {
setClass("filter_rare", rareClass);
setClass("filter_common", commonClass);
setClass("filter_occ", occClass);
}
function setClass(IDName, displayValue) {
var item = document.getElementById(IDName);
item.className = displayValue ? "filter-set" : "not-set";
}
<div id="filter_rare" title="Rare" class="not-set"
onclick="chosenFrequency('frequency=Rare'); setClassSeas(true, false, false);"></div>
<div id="filter_common" title="Common" class="not-set"
onclick="chosenFrequency('frequency=Common'); setClassSeas(false, true, false);"></div>
<div id="filter_occasional" title="Occasional" class="not-set"
onclick="chosenFrequency('frequency=Occasional'); setClassSeas(false, false, true);"></div>

Here is another (as in "alternative") way to do it (but with jQuery, oh no!)
$('body').click(function(e) {
let $clicked = $(e.target);
console.log("Clicked " + $clicked.attr('id'))
if ($clicked.hasClass('filter')) {
let $filters = $clicked.closest('.filter-group').find('.filter');
let unset = $clicked.hasClass('set');
$filters.toggleClass('not-set', true);
$filters.toggleClass('set', false);
if (!unset) {
$clicked.toggleClass('not-set', false);
$clicked.toggleClass('set', true);
}
}
})
button.filter.not-set {
background: white;
}
button.filter.set {
color: white;
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-group">
<button id="filter_rare" class="filter not-set">
filter_rare
</button>
<button id="filter_common" class="filter not-set">
filter_common
</button>
<button id="filter_occasional" class="filter not-set">
filter_occasional
</button>
</div>
<div class="filter-group">
<button id="filter_one" class="filter not-set">
filter_one
</button>
<button id="filter_two" class="filter not-set">
filter_two
</button>
<button id="filter_three" class="filter not-set">
filter_three
</button>
</div>

Check if a CSS class (added by clicking a button) exist and do something

I want to detect if a class exist and I'm trying to use this simple function to detect if an element has a class but it doesn't work.
var parent = document.querySelector('.menu'),
child = document.querySelector('.liked');
if (parent.contains(child)) {
$('.empty').addClass("none")
}
Any help would be greatly appreciated.
Thanks in advance.
$(document).on("click", ".click", function() {
$(".submenu").addClass("liked")
})
var parent = document.querySelector('.menu'),
child = document.querySelector('.liked');
if (parent.contains(child)) {
$('.empty').addClass("none")
}
body {
font: 10vw/1.2em -apple-system, BlinkMacSystemFont, sans-serif
}
.none {
display: none
}
.liked {
color: red
}
button {
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class=click>
ADD CLASS LIKED
</button>
<div class=menu><br>
<span class=submenu>ONE</span>
<span class=submenu>TWO</span>
<span class=submenu>THREE</span>
</div>
<div class=empty><br>IF CLASS 'VISITED' EXIST, THIS TEXT MUST GO</div>

First, I'm not a fan of mixing jQuery with plain JS. Bouncing back and forth feels slightly sloppy, so as a bit of cleanup, my answer below will be solely jQuery.
Second, if you want to check again on the click of the button, then your code has to be in the click handler. Currently, you're only evaluating on the page load.
$(function() {
checkIfParentContainsChild(); //Run on page load
$(document).on("click", ".click", function() {
$(".submenu").addClass("liked");
checkIfParentContainsChild(); //Run on button click
});
});
function checkIfParentContainsChild() {
var $child = $(".menu .liked"); //Select all .liked with parent .menu
var childExists = ($child.length > 0); //Result will be true or false
//EDITED PER COMMENT
if (childExists) {
$('.empty').addClass("none");
} else {
// ...DOESN'T EXIST
}
}

Your logic is only running once on page load. If you add it into a function like so, you can also run it in the click event.
function childCheck() {
var parent = document.querySelector('.menu'),
child = document.querySelector('.liked');
if (parent.contains(child)) {
$('.empty').addClass("none")
}
}
childCheck(); // run on page load (optional)
$(document).on("click", ".click", function() {
$(".submenu").addClass("liked")
childCheck(); // run here on click event
})
body {
font: 10vw/1.2em -apple-system, BlinkMacSystemFont, sans-serif
}
.none {
display: none
}
.liked {
color: red
}
button {
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class=click>
ADD CLASS LIKED
</button>
<div class=menu><br>
<span class=submenu>ONE</span>
<span class=submenu>TWO</span>
<span class=submenu>THREE</span>
</div>
<div class=empty><br>IF CLASS 'VISITED' EXIST, THIS TEXT MUST GO</div>

javascript/Jquery pop up - only open one pop at a time

I have 3 separate scripts for 3 pop ups, Im sure there is a better way to structure these into one script? I also want to be able to only open one pop up at a time, so if .popup-new is active and i click to open .popup-new-b then .popup-new will automatically close. Any help would be much appreciated.
<script>
$(document).ready(function () {
$(".popup-trigger").click(function () {
$(".popup-new").fadeIn(300);
});
$(".popup-new > span, .popup-new").click(function () {
$(".popup-new").fadeOut(300);
});
});
</script>
<script>
$(document).ready(function () {
$(".popup-trigger-b").click(function () {
$(".popup-new-b").fadeIn(300);
});
$(".popup-new-b > span, .popup-new-b").click(function () {
$(".popup-new-b").fadeOut(300);
});
});
</script>
<script>
$(document).ready(function () {
$(".popup-trigger-c").click(function () {
$(".popup-new-c").fadeIn(300);
});
$(".popup-new-c > span, .popup-new-c").click(function () {
$(".popup-new-c").fadeOut(300);
});
});
</script>

Since I cannot see your HTML. I have added some with CSS. I hope this is what you are looking for. Ofcourse I could've asked clarify but I do not have enough reputation to add comment :(
$('button').click(function(){
$('.popup').removeClass('popped');
$('#popup-new'+$(this).attr('class')).addClass('popped');
});
.popup{
position:fixed;
width:70%;
height:70%;
top:50%;
left:50%;
margin-top:-5%;
margin-left:-35%;
background-color:#ccc;
z-index:100;
display:none;
}
.popped{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup-new" class="popup">HI I am POPUP NEW</div>
<div id="popup-new-b" class="popup">HI I am POPUP-NEW-B</div>
<div id="popup-new-c" class="popup">HI I am POPUP-NEW-C</div>
<button class="">Pop up New</button>
<button class="-b">Pop up New B</button>
<button class="-c">Pop up New C</button>

You could do something like this:
popups = ['.popup-new','.popup-new-b','.popup-new,-c']
// Pass an additional parameter to popup_click, which is the index of the popup in the array
$('.popup-trigger').click({popup: 0}, popup_click);
$('.popup-trigger-b').click({popup: 1}, popup_click);
$('.popup-trigger-c').click({popup: 2}, popup_click);
function popup_click(event) {
// Here write the code to open the popup
// You can access the popup through $(popups[event.data.popup])
for (var i in popups) {
if (i != event.data.popup) { // event.data.popup contains the index that we passed
// Here write the code to close each of the other popups
// Access them through $(popups [i])
}
}
}
$('html').click(function() {
for (var i in popups) {
$(popups[i]).hide();
}
});
$('.popup-btn-close').click(function(e) {
for (var i in popups) {
$(popups[i]).hide();
}
});
$('.popup-new').click(stop_propagation);
$('.popup-new-b').click(stop_propagation);
$('.popup-new-c').click(stop_propagation);
function stop_propagation(e) {
e.stopPropagation();
}
It is generally a good idea to use arrays or objects whenever you have repetitive code you want to factor.
Note that passing parameters to an event handler this way only works with jQuery; in raw JavaScript you will have to use closures.
You can even simplify both blocks of three lines by using another array and loop (see below).
Also note that as #404UserNotFound wrote, if all of your popups share a common class, you can simplify these lines:
for (var i in popups) {
$(popups[i]).hide();
}
And turn them into:
$('.yourClassNameHere').hide(); // Will select all the elements of the right class
Which leaves you with this compact code:
popups = ['.popup-new', '.popup-new-b', '.popup-new,-c']
popup_triggers = ['.popup-trigger', '.popup-trigger-b', '.popup-trigger-c']
// Pass an additional parameter to popup_click, which is the index of the popup in the array
for (i in popup_triggers) {
$(popup_triggers[i]).click({popup: i}, popup_click);
}
function popup_click(event) {
// Here write the code to open the popup
// You can access the popup through $(popups[event.data.popup])
for (var i in suffixes) {
if (i != event.data.popup) { // event.data.popup contains the index that we passed
// Here write the code to close each of the other popups
// Access them through $(popups [i])
}
}
}
$('html').click(function() {
$('.yourClassNameHere').hide();
});
$('.popup-btn-close').click(function(e) {
$('.yourClassNameHere').hide();
});
for (i in popups) {
$(popups[i]).click(stop_propagation);
}
function stop_propagation(e) {
e.stopPropagation();
}
And finally, if all of your popups and triggers are always named the same way, with a suffix, you could condense it even further (with a few more tricks to save some space):
suffixes = ['', '-b', '-c']
for (let i in suffixes) {
$('.popup-trigger' + suffixes[i]).click(function(i) {
return function(e) {
hideAllPopups();
$('.popup-new' + suffixes[i]).toggle();
//e.stopPropagation(); // HERE
}
}(i));
}
$('.popup-btn-close').click(hideAllPopups);
//$('html').click(hideAllPopups); // HERE
function hideAllPopups() {
$('.popup').hide();
}
// Uncomment the two lines marked "HERE" to make the popups disappear whenever you click somewhere in the page (except on the buttons)
.popup {
margin: 20px auto;
padding: 20px;
background: #ccc;
width: 30%;
position: relative;
}
.popup-btn-close {
position: absolute;
top: 20px;
right: 30px;
font-weight: bold;
}
.box {
background: rgba(0,0,0,0.2);
padding: 5px;
background-clip: padding-box;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="box popup-trigger">Trigger popup #1</span>
<span class="box popup-trigger-b">Trigger popup #2</span>
<span class="box popup-trigger-c">Trigger popup #3</span>
<hr/>
<div class="popup-new popup" style="display:none">Popup #1 <span class="popup-btn-close">X</span></div>
<div class="popup-new-b popup" style="display:none">Popup #2 <span class="popup-btn-close">X</span></div>
<div class="popup-new-c popup" style="display:none">Popup #3 <span class="popup-btn-close">X</span></div>