We Keep Coding

Active on next div and on another remove

I have this solution for simple slider, but I need to preserve class .active like as the first class .row
And the buttons will switch .active class like as the first class .row
Currently, it only switches to the .row class but I need to switch to the .first and .second class.
Here is my actual solution:
$(function(){
$("#next").click(function(e) {
var activeelement = $('.active');
if(activeelement.next().length)
activeelement.removeClass('active').next(".row").addClass('active');
else
activeelement.removeClass('active').closest('.main').find('> .row:first').addClass('active');
});
$("#back").click(function(e) {
var activeelement = $('.active');
if(activeelement.prev().length)
activeelement.removeClass('active').prev().addClass('active');
else
activeelement.removeClass('active').closest('.main').find('> .row:last').addClass('active');
});
});
.main .row {
display: none;
}
.main .row .active {
color: blue;
}
.main .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="main">
<div class="row active">
<div class="first active">sss</div>
<div class="second active">ss</div>
</div>
<div class="row">
<div class="first">sss2</div>
<div class="second">ss</div>
</div>
<div class="row">
<div class="first">sss3</div>
<div class="second">ss</div>
</div>
<div class="row">
<div class="first">sss4</div>
<div class="second">ss</div>
</div>
</div>
Back
Next
Thanks.

Use children()
$(function(){
$("#next").click(function(e) {
var activeelement = $('.active');
if(activeelement.next().length-1){
activeelement.removeClass('active').next(".row").addClass('active').children().addClass('active').parent().prev(".row");
activeelement.children().removeClass('active');
}
else{
activeelement.removeClass('active').closest('.main').find('> .row:first').addClass('active').children().addClass('active');
activeelement.children().removeClass('active');
}
});
$("#back").click(function(e) {
var activeelement = $('.active');
if(activeelement.prev().length-1){
activeelement.removeClass('active').prev(".row").addClass('active').children().addClass('active');
activeelement.children().removeClass('active');
}
else{
activeelement.removeClass('active').closest('.main').find('> .row:last').addClass('active').children().addClass('active');
activeelement.children().removeClass('active');
}
});
});
.main .row {
display: none;
}
.main .row .active {
color: blue;
}
.main .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="main">
<div class="row active">
<div class="first active">sss</div>
<div class="second active">ss</div>
</div>
<div class="row">
<div class="first">sss2</div>
<div class="second">ss</div>
</div>
<div class="row">
<div class="first">sss3</div>
<div class="second">ss</div>
</div>
<div class="row">
<div class="first">sss4</div>
<div class="second">ss</div>
</div>
</div>
Back
Next

change nextAll() individually jQuery

function func(x) {
var y = $("#" + (x.id));
//nextAll get the number at the end of their id -=1
//y.nextAll().attr('id', )
//
y.remove()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maindiv">
<div id="div1" onclick="func(this)">Lorem</div>
<div id="div2" onclick="func(this)">Ipsum</div>
<div id="div3" onclick="func(this)">Dolor</div>
<div id="div4" onclick="func(this)">Sit</div>
<div id="div5" onclick="func(this)">Amet</div>
</div>
How would I loop through every div after the selected div?
For example, if the user clicks on div2, div3 will have a function, along with div4 and div5.

You can use each to iterate the elements in the selection
function func(x) {
var y = $(x);
y.nextAll().each(function(index, element){
// do something
})
y.remove()
}

To catch only the divs after the clicked element:
function func(x) {
$(x).nextAll().remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maindiv">
<div id="div1" onclick="func(this)">Lorem</div>
<div id="div2" onclick="func(this)">Ipsum</div>
<div id="div3" onclick="func(this)">Dolor</div>
<div id="div4" onclick="func(this)">Sit</div>
<div id="div5" onclick="func(this)">Amet</div>
</div>

An alternative is using Next Siblings Selector (“target selector ~ next siblings selector”)
$('[id^=div]').on('click', function() {
$(`#${$(this).attr('id')} ~ div`).fadeOut(function() {
$(this).remove()
});
});
[id^=div] {
border: 1px dashed lightgreen;
padding: 5px;
margin: 5px;
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maindiv">
<div id="div1">Lorem</div>
<div id="div2">Ipsum</div>
<div id="div3">Dolor</div>
<div id="div4">Sit</div>
<div id="div5">Amet</div>
</div>

jQuery closest() appears to find parent id when there is none

I have an event listener for when the user clicks in the window. I want to see if the clicked element has any parent element with a certain id. I use the jQuery closest() function for that. But it always returns true.
Here is a fiddle that demonstrates my code.
There must be some major error, because if I change the id from if($(event.target).closest('#activatemenu'))
into any other id
if($(event.target).closest('#rrrrrrr'))
it still returns true.
Code in fiddle:
$(function() {
$(document).click(function(event) {
if($(event.target).closest('#activatemenu')) {
$('.wrap').prepend('<p>the clicked element has a parent with the id of activatemenu</p>');
}else{
$('.wrap p').remove();
}
});
});
.stuff{
width:300px;
height:150px;
border:red 2px solid;
}
.otherstuff{
width:400px;
height:400px;
background:purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div id="activatemenu">
<div>
<div>
<div class="stuff">
<p>Here is some text</p>
</div>
</div>
</div>
</div>
<div class="otherstuff">
<p>Other stuff!</p>
</div>
</div>

Closest always returns a jQuery object which resolves to truthy. You need to check the length of the object.
$(event.target).closest('#rrrrrrr').length
Or, use
$(function() {
$(document).click(function(event) {
if ($(event.target).closest('#activemenu').length) {
$('.wrap').prepend('<p>the clicked element has a parent with the id of activemenu</p>');
} else {
$('.wrap p').remove();
}
});
});
.stuff {
width: 300px;
height: 150px;
border: red 2px solid;
}
.otherstuff {
width: 400px;
height: 400px;
background: purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div id="activemenu">
<div>
<div>
<div class="stuff">
<p>Here is some text</p>
</div>
</div>
</div>
</div>
<div class="otherstuff">
<p>Other stuff!</p>
</div>
</div>

$(event.target).closest('#activatemenu') will always return an object so if condition will always be true, better check for $(event.target).closest('#activatemenu').length
$(function() {
$(document).click(function(event) {
if($(event.target).closest('#activemenu').length) {
$('.wrap').prepend('<p>the clicked element has a parent with the id of activemenu</p>');
}else{
$('.wrap p').remove();
}
});
});
.stuff{
width:300px;
height:150px;
border:red 2px solid;
}
.otherstuff{
width:400px;
height:400px;
background:purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div id="activemenu">
<div>
<div>
<div class="stuff">
<p>Here is some text</p>
</div>
</div>
</div>
</div>
<div class="otherstuff">
<p>Other stuff!</p>
</div>
</div>

You have two problems with your code.
First, you need to search for the closest activemenu not activatemenu. activatemenu does not exist in your code.
Second, jQuery will always return an array so you need to check the length to see whether the element was found as a non-empty array will always return true.
See below for a working example:
$(function() {
$(document).click(function(evt) {
if($(evt.target).closest('#activemenu').length) {
$('.wrap').prepend('<p>the clicked element has a parent with the id of activemenu</p>');
} else {
$('.wrap p').remove();
}
});
});
.stuff {
width: 300px;
height: 150px;
border: red 2px solid;
}
.otherstuff {
width: 400px;
height: 400px;
background: purple;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<div class="wrap">
<div id="activemenu">
<div>
<div>
<div class="stuff">
<p>Here is some text</p>
</div>
</div>
</div>
</div>
<div class="otherstuff">
<p>Other stuff!</p>
</div>
</div>

Background image div clickable

I have a div with a background image. How can i make the div (the background image) clickable? I want to unhide an other div when clicked on the div (image). Onclick code: onclick="javascript:unhide('kazen')"
var clickit = document.getElementsByClassName("fh5co-grid")[0];
var kazen = document.getElementById("kazen");
clickit.addEventListener("click", function(){
if (kazen.style.display === "none") {
kazen.style.display="block";
} else {
kazen.style.display="none";
}
});
kazen.addEventListener("click", function(){
this.style.display="none";
});
#kazen {
background-color: #cc9;
display: none;
width: 100px;
height: 100px;
position: absolute;
top: 15px;
left: 15px;
}
.fh5co-grid {
}
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/PREVIEW_Shop_02-29.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3>Kaas</h3>
<h4>in ons aanbod hebben we verse en harde kazen - binnenkort meer hierover</h4>
</div>
</a>
</div>
</div>
<div id="kazen" >
<div class="col-md-12">
<div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-16-4.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
</div>
</a>
</div>
</div>
</div>

You can have a look at the fiddle I created if this is what you want.
$(document).ready(function() {
$("div.fh5co-grid").click(function() {
$("div.next").css("display", "block");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(http://placehold.it/350x150);">
<a class="image-popup text-center">
<div class="prod-title ">
<h3>cheese</h3>
<h4>tekst</h4>
</div>
</a>
</div>
</div>
<div style="background-color: #000; display:none" class="next">Next div</div>

From what you're describing, this seems pretty close. The background image isn't clickable, it's the div itself. And this could be done with jQuery, yes, but it's trivial enough that pure javascript is pretty easy here. Clicking in the red-boxed area will display the div with the id kazen, and clicking in either kazen or the red-boxed area again will hide it.
Note, there was a weird glitch to my solution. I changed the display if/else to check if it's currently displayed and hide it, rather than if it's currently hidden to display it. That was causing a strange effect of re-hiding the kazan div on the first click.
Within stackoverflow, you'll need an absolute url to display an image. If you aren't seeing your image here, that may be why.
var clickit = document.getElementsByClassName("fh5co-grid")[0];
var kazen = document.getElementById("kazen");
clickit.addEventListener("click", function(){
if (kazen.style.display === "block") {
kazen.style.display="none";
} else {
kazen.style.display="block";
}
});
kazen.addEventListener("click", function(){
this.style.display="none";
});
#kazen {
background: url("https://static.pexels.com/photos/6832/waterfall-beauty-lets-explore-lets-get-lost.jpg");
background-size: 100%;
display: none;
width: 100px;
height: 100px;
position: absolute;
top: 15px;
left: 15px;
color: #fff;
}
.fh5co-grid {
border: 1px dotted red;
}
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/PREVIEW.jpg);">
<a class="image-popup text-center">
<div class="prod-title ">
<h3>cheese</h3>
<h4>tekst</h4>
</div>
</a>
</div>
</div>
<div id="kazen">
Click me to hide!
</div>

How to add states onClick in jQuery?

I have the following code which add and remove a class. But I want to add another class over the image when is active and remove it when is inactive. The problem is that I could added but is going to be active for all elements not only for the one is opened. Does anyone has an idea how to fix this?
https://jsfiddle.net/bmhv3edw/3/
$(document).ready(function() {
function close_answer_section() {
$('.question-text').removeClass('active');
$('.plus').attr("src","http://tdhtestserver.herobo.com/plus-eclipse.png");
$('.answer-section-content').slideUp(300).removeClass('open');
}
$('.question-text').click(function(e) {
var currentAttrValue = $(this).attr('href');
if($(this).is('.active')) {
close_answer_section();
}else {
close_answer_section();
$(".plus").attr("src","http://tdhtestserver.herobo.com/plus-eclipse-active.png");
$(this).addClass('active');
$('.questions ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});

UPDATED:
$(document).ready(function() {
function close_answer_section() {
$('.question-text').removeClass('active');
$('.plus').attr("src","http://tdhtestserver.herobo.com/plus-eclipse.png");
$('.answer-section-content').slideUp(300).removeClass('open');
}
$('.question-text').click(function(e) {
var currentAttrValue = $(this).attr('href');
if($(this).is('.active')) {
close_answer_section();
}else {
close_answer_section();
$(this).find('img').attr("src","http://tdhtestserver.herobo.com/plus-eclipse-active.png");
$(this).addClass("active");
$('.questions ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
/* body{ background: black }; */
.questions{
padding-top: 25px;
padding-left: 170px;
padding-bottom: 25px;
}
.question{
padding: 5px;
font-size: 18px;
font-weight: 100;
}
.answer-section-content {
display:none;
padding: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questions">
<div class="question">
<div class="question-text" href="#answer-52"><img class="plus" src="http://tdhtestserver.herobo.com/plus-eclipse.png"/> Question 1</div>
<div id="answer-52" class="answer-section-content">
<p>Answer 1</p>
</div>
</div>
<div class="question">
<div class="question-text" href="#answer-53"><img class="plus" src="http://tdhtestserver.herobo.com/plus-eclipse.png"/> Question 2</div>
<div id="answer-53" class="answer-section-content">
<p>Answer 1</p>
</div>
</div>
</div>