Develop Reference

How to remove a class when its element is not in view?

In plain js I want to remove a class when the user scroll down from it. (basically toggle when in view it appear when it is not in view it disappear)
I have to code to add the class when scrolled in view:
const appearOnScroll = new IntersectionObserver(function(entries, appearOnScroll){
entries.forEach(entry =>{
if(!entry.isIntersecting){
return;
}else{
entry.target.classList.add("appear");
appearOnScroll.unobserve(entry.target);
}
})
}, appearOptions);
faders.forEach(fader =>{
appearOnScroll.observe(fader)
})
How can I remove the class when you scroll out?

Toggle Switch correctly removes css class on false but doesn't put the class back on when true

Using a Bootstrap5 toggle switch (which is basically just a checkbox) to toggle on and off lines in a grid. I have it set up so if the toggle is true then add the class which adds lines for the grid and if it's false then remove class and the lines. When I toggle off the class that holds the style for the line gets removed correctly but when I toggle on then the class doesn't come back and toggle the lines on. I am also using a forEach() to loop through all the divs.
I have console.log within and they fire for each toggle so I am not sure what I am missing. Here is the code
JS
let gridToggleSwitch = document.querySelector("#gridToggle")
gridToggleSwitch.addEventListener('change', () => {
let boxList = document.querySelectorAll('.box')
let toggleChoice = gridToggleSwitch.checked
if(toggleChoice == true) {
console.log("LINES")
boxList.forEach((e) => {
console.log(e)
e.classList.add('box')
})
} else if (toggleChoice == false) {
console.log('NO LINES')
boxList.forEach((e) => {
console.log(e)
e.classList.remove('box')
})
} else {
console.log('woops')
}
})
CSS:
.box {
border: 1px solid black;
}

SOLVED:
since the grid can change dynamically I needed to also dynamically add an ID to the divs for the grid and instead of using the forEach() for the classes I looped through the ID and added/removed the border style

Reusable javascript component issue

I have a woking accessible responsive navigation which for DEMO perpuses I have to make it reusable so I can show different sort of senarios. However tho, the click burger menu is not working.
This header with responsive navigation should work indipenently multiple times.
On click and matchMedia
typial responsive nav behavious with an extra touch of matchMedia in case user moves the window.
open navigation on click and remove navigation if > 900
navigation remove Attribute hidden on desktop and on click.
All of this should work multiple times.
if (navBlocks.length > 0){
Array.prototype.forEach.call(navBlocks, function(el) {
the forEach function shoud do the work right? how come is not really working?
DEMO HERE
const navBlocks = document.querySelectorAll('.nav-container');
const nav = document.querySelector('.sliding-nav');
const menu = document.querySelector(".sliding-nav ul");
const toggleMenu = document.querySelector(".nav-container .nav-cta");
const mediaQuery = window.matchMedia('(min-width: 900px)');
let isMenuOpen = false;
if (navBlocks.length > 0) {
Array.prototype.forEach.call(navBlocks, function(el) {
el.addEventListener('click', e => {
e.preventDefault();
isMenuOpen = !isMenuOpen;
toggleMenu.setAttribute('aria-expanded', String(isMenuOpen));
menu.hidden = !isMenuOpen;
if (isMenuOpen) {
nav.classList.add('is-open');
document.body.classList.add("is-no-scroll", "is-fixed");
//console.log(isMenuOpen);
} else {
nav.classList.remove('is-open');
document.body.classList.remove("is-no-scroll", "is-fixed");
//console.log(!isMenuOpen);
}
});
function handleTabletChange(e) {
// Check if the media query is true
if (e.matches) {
toggleMenu.setAttribute("aria-expanded", false);
menu.removeAttribute("hidden");
nav.classList.remove('is-open');
document.body.classList.remove("is-no-scroll", "is-fixed");
} else {
toggleMenu.setAttribute("aria-expanded", false);
//nav.removeAttribute("aria-expanded");
}
}
// Register event listener
mediaQuery.addListener(handleTabletChange);
// Initial check
handleTabletChange(mediaQuery);
});
}

I think you should do something like this,
add event listener on burger menu icon to toggle an active class in nav bar and you should write css for that active class that if nav contains "active" class it should be set to display or else it should display none!

JavaScript active class on menu items

I have the following html and JavaScript to add an active class called is-active to a menu item onClick. When you click on another item it gets removed from the previous one and gets added to the current one. My code is as follows which I got from W3Schools. I wanted to know if there is a better and more modern way of writing the JavaScript. (NO jQuery) only plain vanilla JavaScript
HTML:
<div class="our-clients__categories">
<h4>Technology</h4>
<h4>Retail</h4>
<h4>Finance</h4>
<h4>Consumer</h4>
<h4>Hospitality</h4>
</div>
JavaScript:
export default function () {
const clientCategoryButtons = document.querySelectorAll('.our-clients__categories--category')
clientCategoryButtons.forEach((categorybtn) => {
categorybtn.addEventListener('click', function (e) {
e.preventDefault()
const current = document.getElementsByClassName('is-active')
current[0].className = current[0].className.replace('is-active', '')
this.className += ' is-active'
})
})
}
Any and all help is appreciated! :)

Getting HTML element by Id and switch its CSS through React

I have some files that load into my react components, which have HTML code.
As it is now, the pure HTML code renders just fine, however there is some 'hidden' code that appears whenever you click certain buttons in other parts of the application or on the text above (think of it like panels that expand when you click on it).
The HTML is hidden just using the good old <div id="someId" style="display:none">.
Anyway I am trying to get the correct panel to expand upon clicking their respective buttons.
So in theory, what I need to do is find the element by id, and switch it's display to block whenever needed, and then switch it back when the parent is clicked again.
Unfortunately I have no idea how to do this and so far have gotten nowhere. As it is now, I have access to the component's ids. What I want to know is how in the world can I access that and get to change whatever is rendering?

Create your function:
function element_do(my_element, what_to_do) {
document.getElementById(my_element).style.display = what_to_do;
}
and latter in code you can append wherever you want through javascript onclick or not depends what do you need:
element_do("someId", "none"); // to hide
element_do("someId", "block"); // to show
or create yourself toggle:
function toggle_element(element_id) {
var element = document.getElementById(element_id);
element.style.display = (element.style.display != 'none' ? 'none' : 'block' );
}
// and you can just call it
<button onClick="toggle_element('some_id')">toggle some element</button>

The react way to do it would be with states. Assuming that you know how to use states I'd do something like this:
class ShowHide extends React.Component {
constructor() {
super();
this.state = {myState: true};
this.onClick = this.onClick.bind(this)
}
onClick() {
this.setState({myState: !this.state.myState}) //set the opposite of true/false
}
render() {
const style = {myState ? "display: none" : "display:block"} //if myState is true/false it will set the style
return (<div>
<button onClick={this.onClick}>Click me to hide/show me </button>
<div id="myDiv" style={style}> Here you will hide/show div on click </div>
</div>)
}
}