Develop Reference

My js script is to toggle "active" class between selections on a sidebar menu but only allows toggling for the first selection

My issue is I am only able to toggle "active" class on my first "side-menu" div and not the others. Please take a look at my codes and let me know what is wrong.
When active, there will be a span on the left showing that it is the current selection, refer to the attached image.
HTML SCRIPT
<div class="sidebar">
<div class="side-menu">
<a class="side-option" href="#beverages"><img src="images/beverage.png" alt=""></a>
<p>Beverages</p>
</div>
<div class="side-menu">
<a class="side-option" href="#burger"><img src="images/burger2.png" alt=""></a>
<p>Burger</p>
</div>
<div class="side-menu">
<a class="side-option" href="#pizza"><img src="images/pizza1.png" alt=""></a>
<p>Pizza</p>
</div>
<div class="side-menu">
<a class="side-option" href="#pasta"><img src="images/pasta2.png" alt=""></a>
<p>Pasta</p>
</div>
<div class="side-menu">
<a class="side-option" href="#sides"><img src="images/sides1.png" alt=""></a>
<p>Sides</p>
</div>
<div class="side-menu">
<a class="side-option" href="#desserts"><img src="images/desserts1.png" alt=""></a>
<p>Desserts</p>
</div>
</div>
CSS SCRIPT
.side-menu.active p::after{
content: '';
background-color: var(--clr-primary);
width: 10px;
height: 100px;
position: absolute;
left: 0px;
top: 5px;
JS SCRIPT
let sidemenu = document.querySelector('.side-menu')
let fbg = document.querySelector('.food-box-grid')
sidemenu.onclick=function(){
sidemenu.classList.toggle('active')
fbg.classList.toggle('active')
}
I can toggle active class on the "beverages" but not on the other options such as burger, pizza...

According to MDN
querySelector() returns the first Element within the document that matches the specified selector
You want to use querySelectorAll(), then iterate through the output and toggle the class for each element.
Something like this
let sidemenu = document.querySelectorAll('.side-menu')
let fbg = document.querySelectorAll('.food-box-grid')
sidemenu.onclick=function(){
sidemenu.forEach((i) => {
i.classList.toggle("active")
})
fbg.forEach((i) => {
i.classList.toggle("active")
})
}

how do I prevent a popout menu div from displacing other content divs?

I have a hidden popout menu that toggles its visibility on the click of a button. When the popout menu becomes visible it displaces the main content to the bottom of the page. The idea would be to have the popout menu is displayed over the content div.
HTML:
<!------- Pop out menu for Side Navigation Bar ------->
<div class = "popout_navbar_align_center">
<div class = "menu_nav_inner align-center pad-2">
<ul>
<li><button class="static_nav_btn">THE MISSION</button></li>
<li><button class="static_nav_btn">OUR WORK</button></li>
<li><button class="static_nav_btn">WHO WE ARE</button></li>
<li><button class="static_nav_btn">MISS ROSIE</button></li>
<li><button class="static_nav_btn">SCHOLARSHIP</button></li>
<li><button class="static_nav_btn">CONTACT</button></li>
</ul>
<div class="box">
DONATE
</div>
</div>
</div>
<!------- Hamburger Top Navigation Bar for 768px and smaller screens ------->
<div class = "navBar_top">
<div class = "hamburger-bar-center" id ="topNavId" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
<!------- Main body ------->
<main id="content" class="flex-grow">
<div id="homepage-banner">
<div class="page-banner">
<h2 class="small-hidden">
FOUNDATION
</h2>
</div>
</div>
</main>
CSS:
(Popout menu)
.popout_navbar_align_center {
background-image: url("Assets/Textures/sandpaper.png");
background-color:;
width: 240px;
height: 100%;
top: 0;
left: 0;
display: none;
overflow-x: hidden;
}
.popout_navbar_align_center .menu_nav_inner {
padding-top: 60px;
}
**JAVASCRIPT: **
$("#sideNavId").on("click", function() {
if($(".popout_navbar_align_center").is(":visible"))
{
$(".popout_navbar_align_center").hide("slow");
}
else {
$(".popout_navbar_align_center").show("slow");
}
});
I've tried manipulating the css for the main content div but everything I've tried doesn't seem to work in regards to that approach. I'm not sure which divs properties should be manipulated to get the desired effect.

You can try to use the top and left css values along with position: absolute to achieve your popup not moving the rest of the content, but instead floating in front of it

jQuery scroll to specific height then slidedown div

Ok, so I've tried looking at everything on here and many people have suggested adding a width or a height or even using jquery css to hide elements, but nothing is working for me.
I am trying to have 3 elements slideDown when the user scrolls to a specific section of the page. The problem is that the 3 elements flash on the screen for a brief moment then slide down. How do I remove the brief flash?
$('#e1, #e2, #e3').hide();
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 400) {
$('#e1').slideDown(1500);
$('#e2').slideDown(2000);
$('#e3').slideDown(2500);
}
});
DIV#customContent DIV.customObj {
float: left;
width: 406px;
}
DIV#customContent DIV.customObj DIV {
display: none;
margin: 15px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="customContent">
<div class="customObj">
<h3>Service</h3>
<div id="e1">
<ul>
<li>business offices</li>
<li>hotels</li>
<li>multi-family dwellings</li>
<li>higher traffic</li>
<li>passenger and freight</li>
<li>elevators</li>
<li>escalators</li>
<li>wheel chair lifts</li>
<li>dumbwaiters</li>
</ul>
</div>
</div>
<div class="customObj">
<h3>Modernization</h3>
<div id="e2">
<ul>
<li>business offices</li>
<li>hotels</li>
<li>multi-family dwellings</li>
<li>higher traffic</li>
<li>passenger and freight</li>
<li>elevators</li>
<li>escalators</li>
<li>wheel chair lifts</li>
<li>dumbwaiters</li>
</ul>
</div>
</div>
<div class="customObj">
<h3>Lift Solutions</h3>
<div id="e3">
<ul>
<li>business offices</li>
<li>hotels</li>
<li>multi-family dwellings</li>
<li>higher traffic</li>
<li>passenger and freight</li>
<li>elevators</li>
<li>escalators</li>
<li>wheel chair lifts</li>
<li>dumbwaiters</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>

Clearing a div which is used by mixitup filter

I have used mixitup js to filter the plugin type in which each div is wrap in a column.
The main point is I can't use clear: both; CSS property.
I have achieved this issue in other sites by using
.parent-class .column-class:nth-of-type(3n+1){
clear:both;
}
But in mixitup I cannot target the nth item because of the filter, If I click in free tab than the nth item which I was targeting will be replaced by other div.
you can view the issue in this link but make sure your browser width is less than 1100px and more than 992px
Due to the long text of contact form 7 which comes in 2 lines the height of the div is more than others. I want to target 4th element for min-width: 992px; and clear that div.
HTML structure is :
<section class="plugin-listing-page">
<div class="col-sm-12 no-padding">
<div class="wrap">
<div class="plugin-type">
<ul id="filters" class="clearfix post-filter-controls">
<li><span class="filter active-onload theme-demo btn-default" data-filter=".all">All</span></li>
<li><span class="filter theme-demo btn-default" data-filter=".free">Free</span></li>
<li><span class="filter theme-demo btn-default" data-filter=".premium">Premium</span></li>
</ul>
</div>
<div class="filtr-container" id="pluginlist">
<div class="col-md-4 col-sm-6 all listplugin free" data-bound="">
<div class="single-plugin-list">
<div class="single-plugin-list-image">
<a href="">
<img src="https://pippinspluginscom.c.presscdn.com/wp-content/uploads/2011/09/plugin.png" >
</a>
</div>
<div class="single-plugin-list-content">
<h4 class="text-title">Test</h4>
<a class="theme-demo btn-default animate-arrow pull-left" href="#">View Detail<span class="dashicons dashicons-arrow-right-alt"></span></a>
<span class="theme-green pull-right">Free</span>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 all listplugin premium" data-bound="">
<div class="single-plugin-list">
<div class="single-plugin-list-image">
<a href="">
<img src="https://pippinspluginscom.c.presscdn.com/wp-content/uploads/2011/09/plugin.png" >
</a>
</div>
<div class="single-plugin-list-content">
<h4 class="text-title">Test</h4>
<a class="theme-demo btn-default animate-arrow pull-left" href="#">View Detail<span class="dashicons dashicons-arrow-right-alt"></span></a>
<span class="theme-green pull-right">Free</span>
</div>
</div>
</div>
</div>
</div>
</div>
JS for mixitup is:
jQuery(document).ready(function ($) {
jQuery.noConflict();
(function ($) {
$(function () {
var filterList = {
init: function () {
$('#pluginlist').mixItUp({
selectors: {
target: '.listplugin',
filter: '.filter'
},
load: {
filter: '.tables' // show app tab on first load
},callbacks: {
onMixEnd: function(state) {
if(state.activeFilter == '.listplugin')
$('.wil').addClass('active')
}
}
});
}
};
filterList.init();
});
setTimeout(function(){
$('#filters li .active-onload').click();
},100);
})(jQuery);
});
Is there any solution for clearing the height of the div so that it always floats left of the browser ?

There are many ways we can solve this issue. However, I would go for css based approach
#media (min-width: 992px) and (max-width: 1100px){
.single-plugin-list-content h4 a{
font-size: 90%; // or smaller
}
}
UPDATED:
If you can use flex then this will fix the issue. It should work on all screens. However you can add this to min-width: 992px media query. The decision is yours.
#pluginlist{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

Hide a div that is currently opened and show the div thats clicked,and vice versa

I basically want to create a product listing page using jquery, just like this page: https://losangeles.sharegrid.com/browse/
Here is my code:
$(function(){
$('.link').click(function(){
$(this).next('ul').toggle();
var id = $(this).attr("rel");
$('#'+id).show();
});
});
.container {
width: 100%;
height: auto;
}
.eighty-percent {
width: 80%;
margin: 0 auto;
}
.categories {
width: 20%;
float: left;
ul {
li {
ul {
display: none;
}
}
}
}
.products-list {
width: 80%;
float: right;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="eighty-percent">
<div class="categories left">
<ul>
<li>
<a href="#" class="link" id="main-category" rel="main1">
main-category-one
</a>
<ul>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
</ul>
</li>
</ul>
</div>
<div class="products right">
<div class="products-list" id="main1">
<h1>main category one</h1>
</div>
<div class="products-list" id="main-sub1">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub2">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub3">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub4">
<h1>sub category one</h1>
</div>
</div>
</div>
</div>
Now the problem I am having is as you can see, I cannot make the div that is currently opened make hidden when I click on the other sub category links. I hope my snippet will make clear what I am trying to achieve

All changes and details are commented within the source.
FIDDLE
SNIPPET
$(function() {
$('.link').click(function(event) {
/*
Added to prevent <a>nchor links
from jumping. Note the `event`
parameter above as well.
*/
event.preventDefault();
$(this).next('ul').toggle();
var id = $(this).attr("rel");
/*
Added a class (i.e. `sub`), to
each #main-sub* so all of them will
be targeted to hide by the .hide()
method.
*/
$('.sub').hide();
$('#' + id).show();
});
});
.container {
width: 100%;
height: auto;
}
/*
Added to prevent the right
column from wrapping under
the left column.
*/
.subList {
height: 100vw;
display: none;
}
.categories {
width: 50%;
float: left;
}
.products-list {
width: 50%;
float: right;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!--Removed .eighty-percent because it
hindered layout in demo only,
adding it or removing it shouln't
affect functionality in your production version.-->
<div class="categories left">
<ul>
<li>
main-category-one
<!--Added a class (i.e. subList)
in order to style it easier,
see CSS for why styling was needed -->
<ul class="subList">
<!--Changed each <a>nchor id as a
unique one. You should never have more
than one of the same id on a page.-->
<li>sub-cat-one
</li>
<li>sub-cat-two
</li>
<li>sub-cat-three
</li>
<li>sub-cat-four
</li>
</ul>
</li>
</ul>
</div>
<div class="products right">
<div class="products-list" id="main1">
<h1>main category one</h1>
</div>
<div class="products-list sub" id="main-sub1">
<h2>sub category one</h2>
</div>
<div class="products-list sub" id="main-sub2">
<h2>sub category two</h2>
</div>
<div class="products-list sub" id="main-sub3">
<h2>sub category three</h2>
</div>
<div class="products-list sub" id="main-sub4">
<h2>sub category four</h2>
</div>
</div>
</div>

As far as I understood, you want to hide the main div when another was clicked.
This would achieve it:
$(function() {
$('.link').click(function() {
$(this).next('ul').toggle();
var id = $(this).attr("rel");
$('div[id^="main"]').hide(); // added line
$('#' + id).show();
});
});