We Keep Coding

How do I detect hover to elements inside of each() in jQuery?

Thanks for taking a look at my question.
I'm trying to be able to hover over portfolio items but I need to loop through them using each() because I need some way of identifying each item.
I'm trying to hover over .recent-work-item to show .recent-work-item__overlay the .show-none class does display:none;
Neither the hover nor the on.("mouseenter", function(){}) is working.
Here is the HMTL:
<section class="recent-work-item" data-portfolio-id="rwi-<?php echo $i;?>">
<div class="recent-work-item__overlay show-none">
<h3 class="color-white bolder-font"><?php the_title(); ?></h3>
VIEW CASE
</div>
<div class="recent-work-img">
<img src="<?php echo get_template_directory_uri();?>/assets/img/work1.jpg" class="portrait">
</div>
Here is the jQuery:
$.each($('.recent-work-item'), function(){
var thisid = $(this).attr("data-portfolio-id");
console.log(thisid);
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseenter', function(){
$(thisid).find('.recent-work-item__overlay').removeClass('show-none');
});
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseleave',function(){
$(thisid).find('.recent-work-item__overlay').addClass('show-none');
});
});
This is not working, I can't get the hover to work and all I want to do is add or remove a class, can I not do this in each().
I've researched thoroughly in StackOverflow but can't find an answer. I would REALLY appreciate any help I can get on this.

I have test your code in my codepen, and the problem you should use $(this) than use $(thisid)
$.each($('.recent-work-item'), function(){
var thisid = $(this).attr("data-portfolio-id");
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseenter', function(){
$(this).find('.recent-work-item__overlay').removeClass('show-none');
});
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseleave',function(){
$(this).find('.recent-work-item__overlay').addClass('show-none');
});
});
Here look at my codepen

Here I have added an example that shows how you could use CSS to show/hide elements. It might not give you exact answer to your problem, but it will help you change your stylesheets as per your requirement.
Essentially, as per the discussion in comments, I don't think you need javascript to design the page the way you need it.
.container {
padding: 10px;
border: 1px solid gray;
}
.container > .hideOnHover {
display: block;
}
.container > .showOnHover {
display: none;
}
.container:hover > .hideOnHover {
display: none;
}
.container:hover > .showOnHover {
display: block;
}
<div class="container">
<div class="hideOnHover">
This text will be hidden on hover.
</div>
<div class="showOnHover">
This text will be shown on hover.
</div>
</div>

Why is my jQuery toggle not working?

I'm trying to set up a side menu and having some trouble with the jQuery Toggle. Everything else seems to function fine. I did try for a about 2 hours before posting here, so been getting a little frustrated (seeing how this is pretty basic stuff). Any suggestions?
Below is the format and exact order of my page layout, I only added separator text ("The side menu", "Image I click..", etc.) to make reading/understanding easier. Any help would be greatly appreciated.
The side menu:
<div id="SideMenu" class="sidenav">
<img class="CloseBtn" src="./wht_menu.png" />
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
Image I click to open the menu:
<img class="OpenBtn" src="./blk_menu.png" />
The rest of my page:
<div id="main">
My main page content goes here...
</div>
My CSS & jQuery:
<!--Slider Menu-->
<script>
$(".OpenBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
</script>
<style>
#SideMenu{
width: 250px;
display: none;
}
</style>

You need to wrap the jQuery in this block (docs):
$( document ).ready(function() {
$(".OpenBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
});
Working example using your code:
http://codepen.io/anon/pen/xEaqqA

There is a possibility that jQuery not loaded on page at the time.
<script>
(function($){
$(document).ready(function(){
$(".OpenBtn, .CloseBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
});
})(jQuery);
</script>

Thanks for your help everyone! Although pivemi's answer was not the solution, a deeper review of his codepen link got things working, my doc wasn't calling on the jQuery library. Adding this to the top was my solution:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>

Your CSS could look like this:
.menu {
position: fixed;
height: 100%;
width: 272px;
padding-bottom: 50px;
overflow: auto;
box-shadow: 0 0 10px 0 rgba(0,0,0,.75);
background-color: #fff;
z-index: 999;
display: none;}
And your jQuery script:
$(document).ready(function(){
$('.show-menu').click(function(){
fade_menu();
});
$('.menu-item').click(function(){
fade_menu();
});});});
function fade_menu(){
$('.menu').fadeToggle("fast");
}

Hide/show block with CSS

A previous developer built a webpage with a woman and numbers on it to click for to show services related to a bodypart. You can see the current page here...
http://dermanaissance.com/nos-solutions/
My issue here is that he built the solution with CSS VS using JS or Jquery. I'm trying to hide the other blocks when a specific block has been clicked using what he's already done but am afraid isn't possible only using CSS.
I'm not quite sure how to tackle this one without using Jquery as this is usually how I would approach this, any ideas?
This is the code right now...
<div id="anchor-1" class="nos-anchor">1
<span class="nos-block">
<span class="nos-line"> </span>
<ul>
<li>Lift Sans Chirurgie</li>
<li>Atténuation des Rides</li>
<li>Contour des Yeux</li>
<li>Double-menton</li>
<li>Bajoues</li>
<li>Relâchement du Cou</li>
<li>Ouverture du Regard</li>
<li>Augmentation du Volume</li>
<li>Amélioration du Teint de la Peau</li>
<li>Acné Active</li>
<li>Cicatrices d’Acné</li>
<li>Décolleté</li>
<li>Atténuation des Cicatrices</li>
<li>Photorajeunissement</li>
<li><a href="/taches-pigmentaires-et-melasma/">
Taches pigmentaires et Mélasma</a></li>
<li>Couperose et Rosacée</li>
<li>Varicosités</li>
</ul>
</span>
</div>
and the CSS that makes this solution work...
.page-id-9 #main-content .nos-anchor {
position: absolute;
display: block;
z-index: 9;}
.page-id-9 #main-content .nos-anchor .nos-block {
position: absolute;
display: none;}
.page-id-9 #main-content .nos-anchor .nos-block a {
display: block;}
.page-id-9 #main-content .nos-anchor .nos-line {
display: block;
position: absolute;
top: 20px;}

If you want a pure CSS solution I suggest looking into the Target psuedo element, otherwise -
Here is a pure javascript solution. Just give the divs you are hiding and showing an ID, and call them with the clickable object using onclick="hideShow(sectionID);"
<div style="height:40px; width:40px; background:red;" onclick="hideShow('div1')">
<div id="div1" style="display:none; background:orange; width:15px; height:15px;"></div>
</div>
<div style="width:40px; height:40px; background:yellow;" onclick="hideShow('div2')">
<div id="div2" style="display:none; background:green; width:15px; height:15px;"></div>
<div></div>
</div>
<div style="width:40px; height:40px; background:blue;" onclick="hideShow('div3')">
<div id="div3" style="display:none; background:purple; width:15px; height:15px;"></div>
<div></div>
</div>
var currrentElementShowing;
function hideShow(sectionID) {
if (document.getElementById(sectionID) != currrentElementShowing) {
document.getElementById(sectionID).style.display = "block";
if (currrentElementShowing != undefined) {
currrentElementShowing.style.display = "none";
}
currrentElementShowing = document.getElementById(sectionID);
} else {
}
}
https://jsfiddle.net/cxjndqzu/

Wow "page-id-9" is pretty terrible naming convention (I know you didn't do it, but MAN!).
So, what I would do is create two CSS classes:
"ToggleClass"
"Active"
You would assign "ToggleClass" to all of your list items. Using CSS, you make "ToggleClass" items that ALSO have the "Active" class display how you would like. "ToggleClass" items WITHOUT the "Active" class would be hidden as you would like.
Then, using jQuery (sorry, but I think it has to be done), make the following function:
$(document).ready(function(){
$(".ToggleClass").on("click", function(){
$(".ToggleClass").removeClass("Active");
$(this).addClass("Active");
});
});
This event will fire anytime someone clicks a "ToggleClass" element. First, it removes the "Active" class from ALL elements that have "ToggleClass" (this ensures that you won't simultaneously have two elements with the "Active" class). Next, it adds the "Active" class to the element that was clicked.
Leave a comment and let me know how this works for you - Good luck!

Having looked at your page, you could apply something like this. You'll have to use pure Javascript or Jquery. Since you mentioned JQuery as your preference:
html
<div>
<div class="pill">1</div>
</div>
<div>
<div class="pill">2</div>
</div>
js
$('.pill').click(function(){
$(this).toggleClass('active')
if ($(this).hasClass('active')){
$('.pill').not(this).fadeOut(200)
}else{
$('.pill').not(this).fadeIn(200)
}
});
The idea here is to use Jquery's toggleClass method and to check whether the click element has the active class, and if it does hide the other elements. This should steer you in the right direction
Fiddle

Adding an image when clicking on a row (<li> tag)

To solve this problem, i had the idea to create a css class to add the image and when i click on "li", i add the class to it. But for some reason, it just doesnt work. The row appear properly in the ui-grid, but when i click on it, the image doesnt appear. I already tested the onclick() event with an alert() and the function is called.
Since i begin in these languages, i just feel like im assuming things (for exemple, does $(this) really refer to the "li" tag?). If anyone have an idea, it would be appreciated. Here is my code :
CSS
checked
{
background: url('images/checked.png') no-repeat right scroll;
list-style: none;
}
JS
function isChecked()
{
alert("test");
$(this).addClass("checked");
}
HTML
<li class="addedParts" onclick="isChecked()">
<a href="javascript:addParts();">
<div class="ui-grid-solo">
<div class="ui-block-a">test</div>
</div>
</a>
</li>

this will refer to window in your example as context is not passed.
Try this:
function isChecked(elem) {
$(elem).addClass("checked");
}
.checked {
background: url('images/checked.png') no-repeat right scroll;
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="addedParts" onclick="isChecked(this)">
<a>
<div class="ui-grid-solo">
<div class="ui-block-a">test</div>
</div>
</a>
</li>

Show/Hide divs that occupy the same space with separate links

I'm having an issue with trying to get divs to occupy the same space, and to also have a show/hide ability on them when clicking their respective links.
Can anybody please let me know the proper jQuery to put in to make this happen? Below is the code without jQuery.
The idea is that when I click on Print 1, then the piece #1 will show up, and when I click Print 2, #1 will disappear and #2 will take it's place.
Current HTML looks something vaguely like this:
<div id="content">
<div id="SideNav">
<ul>
<li>
<a>Print 1</a>
</li>
<li>
<a>Print 2</a>
</li>
</ul>
</div>
<div id="pieces">
<div id="1">
</div>
<div id="2">
</div>
</div>
</div>
CSS is basically this:
#content {
width:848px;
position:relative;
}
#SideNav {
width:169px;
float:left;
}
#pieces {
width:678px;
top:0px;
float:right;
position:relative;
}
#1 {
position:absolute;
top: 0px;
right: 0px;
z-index:1;
}
#2 {
position:absolute;
top: 0px;
right: 0px;
z-index:2;
}

JSFIDDLE
a Basic example of what you want to achieve :
JS :
$('a').on("click",function(){
alert($(this).text());
if($(this).text() == "Print 1"){
$('#1').show();
$('#2').hide();
}else{
$('#2').show();
$('#1').hide();
}
});
putting an event on click of your anchors and then checking the value of the clicked anchor.

Assuming the first link toggles the visibility of the first div and the second link toggles the second div
$('a').click(function() {
var index = $(this).closest('li').index();
$('#pieces div').eq(index).toggle();
}
And set display:none on the the second div

The trick is to make your markup structure a little more meaningful, and your CSS styling a little more generalized. This allows you to leverage common indexes between the links and the tabs below, as well as to define the style using a single CSS class. Then you can easily scale the solution for any number of links and panels:
jsFiddle
HTML
<div id="content">
<div id="SideNav">
<ul>
<li> Print 1
</li>
<li> Print 2
</li>
</ul>
</div>
<div id="pieces">
<div id="panel1" class="panel">First Div</div>
<div id="panel2" class="panel">Second Div</div>
</div>
</div>
CSS
/*
#content, #SideNav, #pieces
Same As Before
*/
.panel {
display: none;
position:absolute;
top: 0px;
right: 0px;
}
JS
$(function () {
$("a[id^='link']").click(function (e) {
e.preventDefault();
var index = this.id.replace("link", "");
$(".panel").hide();
$("#panel" + index).show();
});
});

You setup the click function for each of the anchors within the #sideNav container, prevent the default anchor tag function(preventDefault(), in case an href attribute is provided) and then execute what you want to do.
$('#sideNav a').click(function(e){
// prevent default link event
e.preventDefault();
// use show()/hide() or toggle()
});