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 to show div when hovering dynamically a link?

I have different a-tags which gets generated dynamically. Each link will generate an own div with different contents so each div has an individual content as well as an individual height.
Now I would like to achieve that when hovering an a the matching div will be shown. The div then should be shown at the mouse position and should be position from bottom to top direction so that the div is "growing in upward direction" because the links are on the bottomside of the page.
Here is what the code is look like ($z is a counter):
<a href="<?php echo $link_djv;?>" class="rsshover" id="djvl_<?php echo $z;?>" target="_blank">
<li>
<p class="headline"><?php echo $title_djv;?></p>
</li>
</a>
<div class="preview" id="djvd_<?php echo $z;?>">
<?php echo $description_djv;?>
</div>
I read already through different threads but wasn't able to find a proper way on how to solve this issue. Thanks in advance.

Run Snippet
This is a basic version of what you need. obviously the animation needs work but should give you a good starting point.
class ToolTipControl {
constructor () {
this.xCoordinate;
this.yCoordinate;
this.links = document.querySelectorAll('a');
this.addEventListeners();
this.activeLink = false;
}
addEventListeners () {
for (let link of this.links) {
link.addEventListener('mouseenter', (e) => this.handleMouseEnter(e));
link.addEventListener('mouseleave', (e) => this.handleMouseLeave(e));
}
document.addEventListener('mousemove', (e) => this.handleMouseMove(e));
}
handleMouseMove (event) {
this.xCoordinate = event.pageX;
this.yCoordinate = event.pageY;
if (this.activeLink) {
this.activeLink.style.top = `${this.yCoordinate}px`;
this.activeLink.style.left = `${this.xCoordinate}px`;
}
}
handleMouseEnter (event) {
this.activeLink = event.target.nextElementSibling;
this.activeLink.style.maxHeight = '50px';
}
handleMouseLeave (event) {
let targetsContent = event.target.nextElementSibling;
targetsContent.style.maxHeight = 0;
this.activeLink = false;
}
}
new ToolTipControl();
.preview {
position: absolute;
max-height: 0;
overflow: hidden;
transition: max-height 0.6s ease;
}
li {
list-style: none;
}
a {
padding: 20px;
margin: 20px;
color: white;
display: block;
background-color: grey;
width: 100px;
}
<a href="/" class="rsshover" id="djvl_123" target="_blank">
<li>
<p class="headline">some title</p>
</li>
</a>
<div class="preview" id="djvd_098">
content 1
</div>
<a href="/" class="rsshover" id="djvl_123" target="_blank">
<li>
<p class="headline">some title</p>
</li>
</a>
<div class="preview" id="djvd_098">
content 2
</div>
<a href="/" class="rsshover" id="djvl_123" target="_blank">
<li>
<p class="headline">some title</p>
</li>
</a>
<div class="preview" id="djvd_098">
content 3
</div>

You're going to need to add a mouse over event of your link and then a javascript function to show your div in the right location. Then you'll need a mouseout even to hide the div again.
what I would start with is change your php code to be:
<a href="<?php echo $link_djv;?>" class="rsshover" onmouseover="showDiv('<?php echo $z;?>');" onmouseout="hideDiv('<?php echo $z;?>');" id="djvl_<?php echo $z;?>" target="_blank">
<li>
<p class="headline"><?php echo $title_djv;?></p>
</li>
</a>
<div class="preview" id="djvd_<?php echo $z;?>" style="display:none;">
<?php echo $description_djv;?>
</div>
Then add a javascript function:
<script>
function showDiv(counter) {
document.getElementById('djvd_' + counter).style.display = 'block';
// this is where you'd position your div location
}
function hideDiv(counter) {
document.getElementById('djvd_' + counter).style.display = 'none';
}
</script>

You can use CSS by putting the div.preview inside the a.rsshover
.rsshover .preview {
display: none;
}
.rsshover:hover .preview {
display: block;
}
<a href="#" class="rsshover" target="_blank">
<li>
<p class="headline">1</p>
</li>
<div class="preview">
ONE
</div>
</a>
<a href="#" class="rsshover" target="_blank">
<li>
<p class="headline">2</p>
</li>
<div class="preview">
TWO
</div>
</a>
<a href="#" class="rsshover" target="_blank">
<li>
<p class="headline">3</p>
</li>
<div class="preview">
THREE
</div>
</a>

I don't understand how exactly do you want your preview to be displayed, but this should help you.
(function($) {
var $currentElement;
$('.rsshover').on('mouseenter', function(e) {
$currentElement = $('#djvd_' + $(this).attr('id').substr(5));
$currentElement.css({
position: 'absolute',
display: 'block',
top: e.clientY + 'px',
left: e.clientX + 'px'
});
}).on('mouseleave', function() {
$currentElement.hide()
})
})(jQuery)
.preview {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="rsshover" id="djvl_1" target="_blank">
<li>
<p class="headline">Headline</p>
</li>
</a>
<div class="preview" id="djvd_1">
Description 1
</div>
Also, please don't put <li> tags inside anchor <a>.

Portfolio Filter on a Horizontal Scroll Website not working

I'm just a graphic design student and I barely know about coding or javascript.
In my website, I have horizontal scroll with a left navigation bar with a fixed position. I want to filter all of my projects in different categories. For example, when I click on "Branding" all the branding projects show up and all the other projects disappear.
I've tried different options and none of them work. When I click on the filter it doesn't do anything.
I don't know if there is a problem with my html or the script. Please help me.
I used and kind of changed the jQuery from this website:
queness.com Below is all of my html and everything.
https://jsfiddle.net/PaulinaPaulino/hbk8z161/
<body>
<nav class="fixed-nav-bar">
<li>
<div id="home">
Paulina Paulino
</div>
</li>
<li>All</li>
<li>Branding</li>
<li>Editorial</li>
<li>Infographics</li>
<li>Photography</li>
<li>Poster</li>
<li>Typography</li>
<li>
<div id="about">
About
</div>
</li>
<li>
<div id="contact">
—paulinapaulino9#gmail.com
<div class="icons">
<a target="_blank" href="https://twitter.com/PaulinaPaulino9"><img src="icons/twitter.png" alt="twitter" style="height:40px;"></a>
<a target="_blank" href="https://www.instagram.com/paulinapaulino/"> <img src="icons/instagram.png" alt="instagram" style="height:40px;"></a>
<a target="_blank" href="https://www.linkedin.com/in/paulina-paulino-94b29490"><img src="icons/linkedIn.png" alt="linkedinprofile" style="height:40px;"></a>
<a target="_blank" href="Resume.pdf"><img src="icons/resume.png" alt="resume" style="height:35px;"></a>
</div>
</div>
</li>
</nav>
<div id="portfoliolist">
<div class="panel" data-cat="photography">
<div class="project1">
<a href="####"><img src="pages/projects/p1-Paint/_MG_8797.jpg" alt="couple-covered-in-paint" style="height:590px;">
<p>Paint</p>
</a>
</div>
</div>
<div class="panel" data-cat="infographics">
<div class="project2">
<a href="###"><img src="pages/projects/p2-Online-Affairs-Infographic/01-front-top.png" alt="infographic" style="height:590px;">
<p>Online Affairs Infographic</p>
</a>
</div>
</div>
<div id="project3" class="panel">
</div>
<div id="project4" class="panel">
</div>
</div>
<script>
$(function() {
var filterList = {
init: function() {
// MixItUp plugin
// http://mixitup.io
$('#portfoliolist').mixitup({
targetSelector: '.panel',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap',
// call the hover effect
onMixEnd: filterList.hoverEffect()
});
},
hoverEffect: function() {
// Simple parallax effect
$('#portfoliolist .portfolio').hover(
function() {
$(this).find('.label').stop().animate({
bottom: 0
}, 200, 'easeOutQuad');
$(this).find('img').stop().animate({
top: -30
}, 500, 'easeOutQuad');
},
function() {
$(this).find('.label').stop().animate({
bottom: -40
}, 200, 'easeInQuad');
$(this).find('img').stop().animate({
top: 0
}, 300, 'easeOutQuad');
}
);
}
};
// Run the show!
filterList.init();
});
</script>
</body>

I just had to apply everything that this filter jQuery did from the link below.
http://www.newmediacampaigns.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours

How to Slide Element Right to Left by jquery

Trying to Slide p Right to Left direction by jquery to this slider. This slider has fade effect by default, I'm trying give slideLeft effect to p description of slider, not to whole slider elements.
HTML:
<div id="headslide">
<ul>
<li class="post-content">
<div class="slidshow-thumbnail">
<a href="#">
<img src="http://3.bp.blogspot.com/-h4-nQvZ5-VE/VQ3HLtSS3ZI/AAAAAAAABIc/iaOda5zoUMw/s350-h260-c/girl_with_winter_hat-wallpaper-1024x768.jpg" height="260" width="350"/>
</a>
</div>
<span class="content-margin">
/* Description */
<p>Cicero famously orated against his p...</p>
/* Title */
<h3>Download Premium Blogger Templates</h3>
<span class="info">Info</span>
</span>
</li>
<li class="post-content">
<div class="slidshow-thumbnail">
<a href="#">
<img src="http://3.bp.blogspot.com/-YfkF1u_VB40/VWr5dYf00gI/AAAAAAAABW8/wv2e-Lu4etw/s390-h340-c-h340-c/11071467_807062866056131_872486685669967339_n.jpg" height="260" width="350"/>
</a>
</div>
<span class="content-margin">
/* Description */
<p>SEO friendly Flat style Custom Fonts.</p>
/* Title */
<h3>Modern with a pixel-perfect eye</h3>
<span class="info">Info</span>
</span>
</li>
</ul>
</div>
Please see this Fiddle >>. I'm trying to do this by jquery.
I have tried this $(".content-margin").delay(400).show("p", { direction: "left" }, 1200);
Not working, How to give slideLeft effect to only p element, any suggestion?

the headslide slider supports callbacks that you can use to hide/slide the "p" elements.
$('#headslide ul').cycle({
timeout: 4000,
pager: '#headslide .pager',
after: function(currSlideElement, nextSlideElement, options, forwardFlag){
$(nextSlideElement).find("p" ).hide();
$(nextSlideElement).find("p" ).toggle("slide");
return false;
}
jfiddle:http://jsfiddle.net/bacec898/7/
reference: http://jquery.malsup.com/cycle/options.html

Implementing New Image Overlay on Existing code (HTML5 and CSS 3)

How can I get an Image overlay to work with this code?
What I want is a set of icons to overlay, ontop of a image when the cursor moves over it.
http://socialartist.co/index.html
The code in question is HTML 5 and CSS 3, and has quite a lot of mark-up:
<ul class="items x_columns">
<li data-id="id-1" data-cat="#luxury">
<div class="preview"><a href="#" class="frame">
<img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" id="imgSmile" alt=""/></a>
</div>
<a class="title" href="#">Kirkbridge DNB</a>
<p>UK | Drum and Bass</p>
</li>
When I try to add a new div it just breaks the design (eg messes up the preview class border)
Is there 'an easy way' to just overlay onto an existing image, as above.
I don't really know how to set this up on Fiddle; I am hoping that ppl could just use developer tools (inspect element) on the page URL above?

If I got it right:
Add the icon you want to dispay inside the anchor tag:
Quick and dirty example: http://jsfiddle.net/ZVSVw/
<a href="#" class="frame">
<img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" id="imgSmile" alt=""/>
<div class=overlay>ICON</div>
</a>
Set it to display: none by default and style it with the selector .frame:hover > .overlay.
To your comment
remove the following line from your style.css:1654:
a > .frame:hover, a.frame:hover{
background: #ffffff;
/* border: 1px solid #24bfb6; remove this line */
}

You could add the other overlay picture with the display: none; property set and then basically toggle between the two pictures fiddle
Javascript:
jQuery('li[data-id="id-3"] > div').on('hover', 'a', function() {
jQuery(this).find('img').toggle();
jQuery(this).find('div.overlayContent').toggle();
});​
Html:
<li data-id="id-3" data-cat="#holiday">
<div class="preview">
<a href="#" class="frame">
<img src="http://..." alt="default picture">
<div class="overlayContent" style="display: none;">...overlay content</div>
<!--img src="http://..." alt="alternate picture" style="display: none;"-->
</a>
</div>
<a class="title" href="#">TEST ME!</a>
<p>Test this one!</p>
</li>