Develop Reference

On click except one child with class + use of this

I was wondering how I could define a click event in jQuery / JavaScript which excludes children with a specific class. In the same time I need to use "this" to access the clicked element.
$(".slidebox-header *:not(.stop)").click(function(event) {
alert("woohoo!");
$(this).siblings(".slidebox-content").slideToggle();
});
.slidebox-header {
background-color: yellow;
}
.stop {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidebox">
<div class="slidebox-header">
<div class="stop">BLOCKED AREA</div>
<span>Header - Click allowed</span>
</div>
<div class="slidebox-content">
<p>Content</p>
</div>
</div>
But because "this" refers to the children of ".slidebox-header", it is not working.
My question: Is there an elegant way to solve this issue?
Thanks a lot!

slidebox-content is a sibling of slidebox-header, so use .closest() to traverse to to header then use .sibling()
$(".slidebox-header *:not(.stop)").click(function(event) {
$(this).closest('.slidebox-header').siblings(".slidebox-content").slideToggle();
});
Also you can use descendant selector to target the specific child.
$(".slidebox-header > span").click(function(event) {
$(this).closest('.slidebox-header').siblings(".slidebox-content").slideToggle();
});
$(".slidebox-header *:not(.stop)").click(function(event) {
//alert("woohoo!");
$(this).closest('.slidebox-header').siblings(".slidebox-content").slideToggle();
});
.slidebox-header {
background-color: yellow;
}
.stop {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidebox">
<div class="slidebox-header">
<div class="stop">BLOCKED AREA</div>
<span>Header - Click allowed</span>
</div>
<div class="slidebox-content">
<p>Content</p>
</div>
</div>
Or you could bind event with header and use event.stopPropagation() with block element to stop event bubbling.
$(".slidebox-header").click(function(event) {
$(this).siblings(".slidebox-content").slideToggle();
});
$(".slidebox-header .stop").click(function(event) {
event.stopPropagation();
});
$(".slidebox-header").click(function(event) {
$(this).siblings(".slidebox-content").slideToggle();
});
$(".slidebox-header .stop").click(function(event) {
event.stopPropagation();
});
.slidebox-header {
background-color: yellow;
}
.stop {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidebox">
<div class="slidebox-header">
<div class="stop">BLOCKED AREA</div>
<span>Header - Click allowed</span>
</div>
<div class="slidebox-content">
<p>Content</p>
</div>
</div>

You can use parents() or closest() to achieve this. Below is the usage of parents():
$(".slidebox-header *:not(.stop)").click(function(event) {
alert("woohoo!");
$(this).parents(".slidebox:first").find(".slidebox-content").slideToggle();
});
.slidebox-header {
background-color: yellow;
}
.stop {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidebox">
<div class="slidebox-header">
<div class="stop">BLOCKED AREA</div>
<span>Header - Click allowed</span>
</div>
<div class="slidebox-content">
<p>Content</p>
</div>
</div>

Hover on a link and change the background-image of a div - JQuery

I'm having trouble making a div's background-image change when hovering over a link the code looks fine to me so I'm at a loss here is the code:
Javascript:
$('#hover-01').on('mouseover', function(){
$('#hover-change').css('background-image', 'url("images/1.jpg")');
});
$('#hover-01').on('mouseout', function(){, function(){
$('#hover-change').css('background-image', 'url("images/5.jpg")');
});
HTML:
<div class="open-project-link">
<a id="hover-01" class="open-project"
href="project3.html">Bowman Clay</a>
</div>
<div class="responsive-section-image" id="hover-change"
style="background-image: url(images/5.jpg);">
<div class="overlay"></div>
</div>
jQuery version: v2.1.1
Any idea's or advice?
Edit: the code does work however it was a problem with a 3rd party plugin (I assume) so I fixed it with normal javascript and not jQuery

'mousein' isn't an event handler that you can use. You should use mouseover and mouseout, or mouseenter and mouseleave. See jQuery mouse events here.
You also need to give a width/height to your container that will hold the image, since it has no contents. Also, you have two function() declarations in your mouseout function, I fixed it in the following code sample:
$('#hover-01').on('mouseenter', function(){
$('#hover-change').css('background-image', 'url(http://www.w3schools.com/css/trolltunga.jpg)');
});
$('#hover-01').on('mouseleave', function(){
$('#hover-change').css('background-image', 'url(https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4)');
});
#hover-change {
width:1000px;
height:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open-project-link">
<a id="hover-01" class="open-project"
href="project3.html">Bowman Clay</a>
</div>
<div class="responsive-section-image" id="hover-change">
<div class="overlay"></div>
</div>

Use this fiddle:
JS:
$('#hover-01').on('mouseenter', function(){
$('#hover-change').css('background-image', 'url("images/1.jpg")');
});
$('#hover-01').on('mouseout', function(){
$('#hover-change').css('background-image', 'url("images/5.jpg")');
});

You can use jQuery's toggleClass() method to solve your problem like this:
$(document).on('ready', function() {
$('#link').on('mouseover', function() {
//alert('sadasd');
$('body').toggleClass('colored');
});
$('#link').on('mouseleave', function() {
//alert('sadasd');
$('body').toggleClass('colored');
});
});
body.colored {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a id="link" href="#">This is a Link</a>
</div>
Hope this helps!

You can use the CSS :hover ~ to change the hover-change div when hover-01 is hovered over as follows:
#divToHover:hover ~ #divToChange {
/*your code here*/
}
#change {
height: 300px;
width: 300px;
background-image: url("//www.google.com/favicon.ico");
}
#hover {
height: 40px;
width: 40px;
background-color: green;
}
#hover:hover ~ #change {
background-image: url(/favicon.ico);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="hover">hover</div>
<div id="change"></div>

Try the following code. Make sure to set height and width for the div for which you want the background change.
Issue was with your event name used. Refer here for list of mouse events
$('#hover-01').on('mouseover', function() {
$('#hover-change').css('background-image', 'url("https://placehold.it/350x150/ffff00")');
}).on('mouseout', function() {
$('#hover-change').css('background-image', 'url("https://placehold.it/350x150/ff0000")');
});
.responsive-section-image {
height: 150px;
width: 350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="open-project-link">
<a id="hover-01" class="open-project" href="project3.html">Bowman Clay</a>
</div>
<div class="responsive-section-image" id="hover-change" style="background-image: url('https://placehold.it/350x150/ff0000')">
<div class="overlay"></div>
</div>

How to get the child of a parent div element

If I have a DOM structure like the following:
$(function() {
$(".child-a").click(function() {
// change `.child-b` to green
// I can go higher into the chain
$(this).parents(".parent").css({
"background-color": "black"
});
// I can use css to get `.child-b` to blue
$(".parent .sub-parent-b .child-b").css({
"background-color": "blue"
});
});
});
div div div {
width: 100px;
height:100px;
background-color: red;
border:1px black dashed;
}
.child-a {
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="sub-parent-a">
<div class="child-a"></div>
</div>
<div class="sub-parent-b">
<div class="child-b"></div>
</div>
</div>
I could technically use normal css, but it is not flexible enough.
$(function() {
$(".child-a").click(function() {
// change `.child-b` to green
// I can go higher into the chain
$(this).parents(".parent").css({
"background-color": "black"
});
// I can use css to get `.child-b` to blue
$(".parent .sub-parent-b .child-b").css({
"background-color": "blue"
});
/*
In this case, my first aproach of using `parent` made sure that the change only apeared on that specific css, or in #a, but not on #b
While the use of css could only get me to change things in both #a and #b
So how could I manage to do something like:
#a .sub-parent-a .child-a is clicked, so only #a .sub-parent-b .child-b changes, and not #b .sub-parent-b .child-b.
*/
});
});
div div div {
width: 100px;
height:100px;
background-color: red;
border:1px black dashed;
}
.child-a {
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" id="a">
<div class="sub-parent-a">
<div class="child-a"></div>
</div>
<div class="sub-parent-b">
<div class="child-b"></div>
</div>
</div>
<div class="parent" id="b">
<div class="sub-parent-a">
<div class="child-a"></div>
</div>
<div class="sub-parent-b">
<div class="child-b"></div>
</div>
</div>
In this case, my first aproach of using parent made sure that the change only apeared on that specific css, or in #a, but not on #b
While the use of css could only get me to change things in both #a and #b
So how could I manage to do something like:
#a .sub-parent-a .child-a is clicked, so only #a .sub-parent-b .child-b changes, and not #b .sub-parent-b .child-b.

You can go up the chain, and you can also go back down the chain. This way the selectors stay within the "this" element.
$(function() {
$(".child-a").click(function() {
// change `.child-b` to green
// I can go higher into the chain
$(this).parents(".parent").css({
"background-color": "black"
});
// I can use css to get `.child-b` to blue
$(this).parents(".parent").find('.child-b').css({
"background-color": "blue"
});
/*
In this case, my first aproach of using `parent` made sure that the change only apeared on that specific css, or in #a, but not on #b
While the use of css could only get me to change things in both #a and #b
So how could I manage to do something like:
#a .sub-parent-a .child-a is clicked, so only #a .sub-parent-b .child-b changes, and not #b .sub-parent-b .child-b.
*/
});
});
div div div {
width: 100px;
height:100px;
background-color: red;
border:1px black dashed;
}
.child-a {
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" id="a">
<div class="sub-parent-a">
<div class="child-a"></div>
</div>
<div class="sub-parent-b">
<div class="child-b"></div>
</div>
</div>
<div class="parent" id="b">
<div class="sub-parent-a">
<div class="child-a"></div>
</div>
<div class="sub-parent-b">
<div class="child-b"></div>
</div>
</div>

IMO you have way to much jQuery and aren't using any of the power of css.
$(function() {
$(".child").click(function() {
// reset
$('.parents .selected').removeClass('selected');
var $child = $(this);
var $subParent = $(this).closest('.sub-parent');
$child.addClass('selected');
$subParent.addClass('selected');
});
});
div{
padding: 5px;
}
.sub-parent.selected {
background-color: red;
}
.child{
cursor: pointer;
}
.child.selected {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parents">Parents
<div class="parent">- Parent
<div class="sub-parent">- - Sub Parent
<div class="child">- - - Child</div>
</div>
<div class="sub-parent">- - Sub Parent
<div class="child">- - - Child</div>
</div>
</div>
<div class="parent">- Sub Parent
<div class="sub-parent">- - Sub Parent
<div class="child">- - - Child</div>
</div>
<div class="sub-parent">- - Sub Parent
<div class="child">- - - Child</div>
</div>
</div>
</div>

jQuery action on each single element with multiple instances

Say I have 5 divs, all having the same styling:
Fiddle
HTML
<div id="box"> </div>
<div id="box"> </div>
<div id="box"> </div>
<div id="box"> </div>
<div id="box"> </div>
CSS
#box {
background-color:blue;
width:200px;
height:50px;
display:block;
margin-top:10px;
}
I want to execute some jQuery in order to change the colour of every specific div on .mouseover(), and change it back to the original on .mouseout():
jQuery
$(document).ready(function() {
$('#box').mouseover(function() {
$('#box').css('background-color', 'red');
});
$('#box').mouseout(function() {
$('#box').css('background-color', 'blue');
});
});
This only works for the first instance of the div, how would I go about making this work for every individual one? I want each div to work as it's own but I have no idea how to do that.
I researched and found out about .each() but I'm clueless as to how to incorporate that into my function. Can someone please help me out? Thank you in advance.

ID must be Unique.
You can use the same class to all the elements. There is no need of using Javascript when you can use :hover in CSS to change the style of element on hover.
Updated Fiddle
.box {
background-color: blue;
width: 200px;
height: 50px;
display: block;
margin-top: 10px;
}
.box:hover {
background: red;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

As people said ID must be always unique and along with that if you want to achieve it jquery way, then you can do it as below:
$(document).ready(function() {
//bind class element with '.' prefixed
$('.box').mouseover(function() {
$(this).css('background-color', 'red');
//$(this) refers to current element here
});
$('.box').mouseout(function() {
$(this).css('background-color', 'blue');
});
});
.box {
background-color: blue;
width: 200px;
height: 50px;
display: block;
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
UPDATE
Using hover and with some performance improving aspect you can try to achieve it as below:
$(document).ready(function() {
$('.box').hover(function() {
$(this).css('background-color', 'red');
},function(){
$(this).css('background-color', 'blue');
});
});

You can't look for objects with same id, instead, you can use .each jquery function to look out for each div with id #box.
It looks like in this fiddle.
Fiddle
$(document).ready(function() {
$( "div#box" ).each(function() {
$( this ).mouseover(function(index) {
console.log( index + ": " + $( this ).text() );
$(this).css('background-color', 'red');
});
$( this ).mouseout(function(index) {
console.log( index + ": " + $( this ).text() );
$(this).css('background-color', 'blue');
});
});
});

I have 5 div's and I want them to fill the parent div on mouse hover

I have these 5 div's and I want them to fill the parent div on mouse hover I have these codes but they do not push the previous div (the div above) anywhere.
this is the HTML code:
<div id="photo">
<div id="no1">
</div>
<div id="no2">
</div>
<div id="no3">
</div>
<div id="no4">
</div>
<div id="no5">
</div>
and this is the CSS:
div#photo{
margin:10px 0;
padding:5px;
width:980px;
height:300px;
background-color:rgba(100,100,100,0.5);
border-radius:20px;
overflow:hidden;}
div#no1{
background-color:#FF00FF;}
div#no2{
background-color:#FF0;}
div#no3{
background-color:#00F;}
div#no4{
background-color:#0F0;}
div#no5{
background-color:#F00;}
div#no1, div#no2, div#no3, div#no4, div#no5{
width:970px;
height:61px;
transition:all 2s;}
div#no1:hover, div#no2:hover, div#no3:hover, div#no4:hover, div#no5:hover{
height:305px;}

Try this
I have used simple logic, Just applied height:0 to other div except the hovered div.

This is how to implement Eugen's solution.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
div#photo {
margin:10px 0;
padding:5px;
width:980px;
height:300px;
background-color:rgba(100, 100, 100, 0.5);
border-radius:20px;
overflow:hidden;
}
div#no1 {background-color:#FF00FF;}
div#no2 {background-color:#FF0;}
div#no3 {background-color:#00F;}
div#no4 {background-color:#0F0;}
div#no5 {background-color:#F00;}
div#no1, div#no2, div#no3, div#no4, div#no5 {
width:970px;
height:61px;
transition:all 2s;
}
.exp {height:305px;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".exp").mouseenter(function () {
$(".exp").not(this).stop();
$(this).prevAll().animate({
height: "0px"
}, 2000, function () {
// Animation complete.
});
$(this).animate({
height: "305px"
}, 2000, function () {
// Animation complete.
});
});
$(".exp").mouseleave(function () {
$(".exp").not(this).stop();
$(".exp").animate({
height: "61px"
}, 200, function () {
// Animation complete.
});
});
}); //END $(document).ready()
</script>
</head>
<body>
<div id="photo">
<div id="no1" class="exp"> </div>
<div id="no2" class="exp"> </div>
<div id="no3" class="exp"> </div>
<div id="no4" class="exp"> </div>
<div id="no5" class="exp"> </div>
</div>
</body>
</html>

you can use jquery .mouseenter & .mouseleave events to do your job.
here i made an example

Give every #noX id the same class, doesn't matter which name. For instance: .hoverPic.
$( document ).ready(function() {
$('.hoverPic').each(function(){ /*pick each element */
$(this).hover(function(){ /* do something on hover */
$(this).css({ /*set css value */
'width': '100%',
'height': '100%'
});
});
});
});

you need to move the :hover selector to the parent and apply the styles to that states children. I'm not completely clear on your goal but this is how you would style it. Good luck and let me know if you need further help :)
div#photo:hover > div{
height:305px;
}
DEMO
http://jsfiddle.net/59Uph/
EDIT
Try something along the lines of this
http://jsfiddle.net/59Uph/2/