Develop Reference

Simple Next and Previous Show and Hide with jQuery

I'm trying to figure out the simplest way to show and hide a series of divs with Previous and Next buttons by adding and removing some classes.
So far, I can get the Next button to trigger, but it's adding the active class to all of the divs and not just the next one in line.
I've been reading through other examples and so far they seem really bloated or not what I am looking for specifically.
Here's what I have so far:
Codepen Link: https://codepen.io/ultraloveninja/pen/pxrrmy/
HTML:
<div class="group">
<div class="item active">
<h2>Thing One</h2>
</div>
<div class="item">
<h2>Thing Two</h2>
</div>
<div class="item">
<h2>Thing Three</h2>
</div>
</div>
<div class="btns">
Previous
<a class="btn next" href="#">Next</a>
</div>
JS:
$('.next').on("click", function(){
if($('.item').hasClass('active')) {
$('.item').next().addClass('active');
}
})
CSS:
body {
padding: 10px;
}
.active {
display:block !important;
}
.item {
display:none;
}
It seems like this should be fairly simple, but I can't seem to think of how to target the next div by itself without it showing all of the other ones.

Basically you should get your last active element and activate next after it:
$('.next').on("click", function(){
const $active = $('.item.active');
const $next = $active.next();
if ($next.length) {
$active.removeClass('active');
$next.addClass('active');
}
})
The problem in your current code is that you are getting all items and performing hasClass on all of them so it returns true all the time because there is at least one element with this class and then you are getting next element after each item element and add active class to them so all of your elements are activated in result.

I think you want something like this
$('a.next').on("click", function(){
var a = $('.item.active').last();
a.next().addClass('active');
a.removeClass('active')
});

Jquery Hover - allow hover on another DIV the appears on hover of a button

I have a homepage with 4 buttons. When hovered over a button, a menu appears behind the buttons. When you hover over another button, a different colored menu appears in it's place.
Currently, I can get the buttons to show the menus, but when I hover onto the menus (and hover off the button) I lose the menu.
Here's my simple code:
Jquery at top:
$(".mybutton").hover(
function () {
$(".mybox").fadeIn();
},
function () {
$(".mybox").fadeOut();
}
);
$(".mybutton2").hover(
function () {
$(".mybox2").fadeIn();
},
function () {
$(".mybox2").fadeOut();
}
);
And my HTML:
<div class="mybox">
<div style="position: absolute;">
Item 1
Item 2
</div>
</div>
<div class="buttons">
<div class="mybutton">
/* Button image here */
</div>
<div class="mybutton2">
/* Button 2 image here */
</div>
</div>
So I need some way to keep the box that fades in active when it is hovered over. I was thinking of not doing the callback for the fadeout, and somehow only doing the fadeout if they fade off the .mybox DIV or if they hover over another button. But it's a little unclear to me how to accomplish that.
Thanks in advance.

you need to include your menu and the button inside a container and have a hover event on the container. this way your menu will be visible as long as you're hovering over the container.
here's what you need to do.
declare the container like this with your menu and button both inside it.
<div id='container'>
<div class="mybox box">
<div style="position: absolute;">
Item 1
Item 2
</div>
</div>
<div class="buttons">
<div class="mybutton">
/* Button image here */
</div>
</div>
</div>
here's what you need to do in jquery.
$(document).ready(function() {
$("#container").hover(
function() {
console.log($(".mybox").fadeIn());
$(".mybox").fadeIn();
},
function() {
$(".mybox").fadeOut();
}
);
});
here's a working JSFIDDLE with 2 buttons

It's because you're no longer hovering over the button and instead going to a different element "mybox" so you could rearrange the html structure for it to work by keeping the menu in the button class like so:
<div class="buttons">
<div class="mybutton">
/* Button image here */
<div class="mybox">
<div style="position: absolute;">
Item 1
Item 2
</div>
</div>
</div>
</div>
this should keep the menu active as long as the curser is in there.

I don't recommend this as a UI design pattern for various reasons (one of them being the complexity of implementing it); you could instead consider changing it so that the menu appears when the user clicks.
Having said that, here's a way to do it. Get rid of your existing fadeOut() calls and add this:
$("body").on("mousemove", function(e) {
var $hovered = $(e.target);
var $myButton = $(".myButton");
var $box = $(".myBox");
if ( $hovered.is( $myButton ) ) return;
if ( $hovered.is( $box ) ) return;
if ( $.contains( $box.get(0), $hovered ) ) return;
$box.fadeOut();
});
...and similar for button2. The basic principle is this - whenever the mouse moves, we check whether the mouse is hovering over the button, or the box, or over an element contained in the box (using $.contains()). If not, we hide the box.

Hide existing <div> and show previous <div> in multi-branch form

I will start by telling you that this is my very first Javascript program from scratch. I am trying to make a back button that will go to the previously chosen div in a form (hide the current div and show the previous one the user chose).
The form has multiple paths to follow, paths within paths and not all selectors are buttons. There might be an onchange event or a radio button or even text input (text inputs have a next button to click).
I have had it working where it will hide the current div but show all previous chosen divs. It's now working where it hides the current div but shows nothing.
I have read a bunch of postings here and in other forums but have not found what I need yet. Any help would be greatly appreciated.
You can see the actual site here and I have put up a JSfiddle but for some reason I can't get it working there.
Here is the code from the fiddle:
<div>
<form>
<div id="uno" class="showFirst">
<button onclick="hideUno()">First Button</button>
</div>
<div id="dos" class="hideFirst">
<button onclick="hideDos()">Second Button</button>
</div>
<div id="tres" class="hideFirst">
<button onclick="hidetres()">Third Button</button>
</div>
<div id="quattro" class="hideFirst">
<button onclick="hideQuattroUno()">Fourth Button</button>
<button onclick="hideQuattroDos()">Fifth Button</button>
</div>
<div id="branchUno" class="hideFirst">
<p>First Branch</p>
</div>
<div id="branchDos" class="hideFirst">
<p>Second Branch</p>
</div>
</form>
<button id="backButton" onclick="goToPrevious" class="hideFirst">Back</button>
</div>
.hideFirst {
display: none;
}
function goToPrevious() {
var current = $(".chosen").find(":visible");
$(current).hide();
$(current).prev(".chosen").show();
}
function hideUno() {
$("#backButton").toggle();
$("#uno").toggle();
$("#uno").addClass("chosen");
$("#dos").toggle();
}
function hideDos() {
$("#dos").toggle();
$("#dos").addClass("chosen");
$("#tres").toggle();
}
function hideTres() {
$("#tres").toggle();
$("#tres").addClass("chosen");
$("#quattro").toggle();
}
function hideQuattroUno() {
$("#quattro").toggle();
$("#quattro").addClass("chosen");
$("#branchUno").toggle();
}
function hideQuattroDos() {
$("#quattro").toggle();
$("#quattro").addClass("chosen");
$("#branchDos").toggle();
}
Here are a few of the questions I've reviewed here:
retain show / hide div on multistep form
Hide and Show div in same level
how to show previous div of clicked div in angular.js
show div and hide existing div if open with jQuery?
Show one div and hide the previous showing div
I realize it's not the cleanest code, but as I said this is my first and I am trying to cleanup as I go along and learn new things.

You could make a bit of automatization instead of creating onclick events for each button/select separately.
For "Back" functionality, I'd use an array to store elements "on the fly" at each step, instead of checking visibility later on.
I'll make it this way:
Remove CSS rule display:none for hideFirst class (elements will be hidden using jQuery).
Add an class to the buttons/selects/check-boxes/etc... as event inndicator.
Add data-next attribute (to store id of the element which should be shown on click/change)
HTML:
<div id="firstDiv" class="hideFirst">
<button class="my-btn" data-next="#secondDiv" type="button">Show next<button>
</div>
<div id="secondDiv" class="hideFirst">
<select class="my-select" data-next="#thirdDiv">
<option>Helo World</option>
...
</select>
</div>
...
Script:
$(document).ready(function(){
// hide all 'hideFirst' elements, except the first one:
$('.hideFirst:not(:first)').hide();
// declare 'history' variable as an empty array (it will be used to store 'hideFirst' elements for 'Back' functionality):
var history = [];
// click event for the buttons :
$('.my-btn').click(function(e){
// as the button will submit the form if you're not using type="button" attribute, use this:
e.preventDefault();
showNext($(this));
});
// change event for selects :
$('.my-select').change(function(){
showNext($(this));
});
// Method used to show/hide elements :
function showNext(el){
// check if element has a 'data-next' attribute:
if(el.data('next')){
// hide all elements with 'hideFirst' class:
$('.hideFirst').hide();
// show 'Back' button:
$('#backButton').show();
// show the element which id has been stored in 'data-next' attribute:
$(el.data('next')).show();
// Push the parent element ('.hideFirst') into history array:
history.push(el.closest('.hideFirst'));
}
}
// click event for 'back' button:
$('#backButton').click(function(){
// hide all elements with 'hideFirst' class:
$('.hideFirst').hide();
// remove the last '.hideFirst' element from 'history' array and show() it:
history.pop().show();
// hide 'back' button if history array is empty:
history.length || $(this).hide();
}).hide(); // hide 'back' button on init
});
DEMO

hide all but one element of certain class in Jquery

I am trying to create an effect whereby clicking on a title toggles the corresponding content div. Clicking on another title while some content is showing should hide that content div and show the content div corresponding to the title just clicked.
However the code is not doing anything, as you can see on the following jquery: http://jsfiddle.net/dPsrL/
Any ideas?
HTML:
<div class="row title">
<div class="title" industry_id="education">Ed</div>
<div class="title" industry_id="tech">Tech</div>
<div class="title" industry_id="finance">Fin</div>
</div>
<br>
<br>
<div class="row content">
<div class="content" id="education">Education is great</div>
<div class="content" id="tech">Technology is awesome</div>
<div class="content" id="finance">Finance is super</div>
</div>
JAVASCRIPT:
$(document).ready(function () {
$('.content').hide();
});
('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$("#"+clicked).toggle(400);
$("#"+clicked).siblings().hide();
});

Instead of toggling the clicked element first and then hiding the others, why don't you just hide everything first and then show the clicked one? Saves you a check, and all you have to do is switch the order
$('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$('.content').hide();
$('#' + clicked).show(400);
});

Your attribute doesn't have the id selector in it. You need to do a string concatenation :
$('.title').on('click', function () {
var clicked = $(this).attr('industry_id');
alert(clicked);
$('#' + clicked).toggle(400);
$('#' + clicked).siblings().hide();
//The two last lines could be :
//$('#' + clicked).toggle(400).siblings().hide();
});
Also you have to remove the class content and title on the row since it trigger the click event and the hide part.
Here's a working fiddle : http://jsfiddle.net/dPsrL/3/

Typo on ('.title'). Should be $('.title'). Also, you should probably not give the container divs the same class as the child divs and then use that same class in your CSS and jQuery. It just makes selection more difficult.
jsFiddle example

Replace the same class div and has no ID

I have four DIVS, one is ready and the other three are still hidden. When the link to the second div is pressed, I want the second div to show up, and so for the next link.
The problem is, all the four DIV doesn't have ID and has the same class.
I just want it to automatically run without knowing what is the ID and the class of the div, or anything inside the div. It may look like a slideshow but on click function.
<p> link to the ready div </P>
<p> link to the second div </P>
<p> link to the third div </P>
<p> link to the last div </P>
<div id="wrapper">
<div> this is the div that is ready. This div has no ID and has the same class with others <div>
<div> this is the second div that is hidden. This div has no ID and has the same class with others <div>
<div> this is the third div that is hidden. This div has no ID and has the same class with others <div>
<div> this is the last div that is hidden. This div has no ID and has the same class with others <div>
</div>
FIDDLE

i have made a fiddle that might suite your case please have a look. You can make some modifications according to your needs.
var currentDiv = 0;
$(document).ready(function(){
$(".container div").click(function(){
$(".container div").eq(currentDiv+1).css( "display", "block" );
currentDiv++;
})
});
JSFIddle Link

Im pretty sure this is what you are looking for.
jQuery
$(".options p").click(function () {
var ourPick = $("p").index(this) + 1;
$(".container div:nth-child(" + ourPick + ")").show();
});
Demo Here
So what we are doing is getting the index for the link pressed and then using that to select the div we want to show (this is using :nth-child()).
Note: I have put a container around the links so you it doesn't pick up every p on the page.
If you want only one at a time you can just set them all to hide before showing one.
jQuery:
$(".options p").click(function () {
var ourPick = $("p").index(this) + 1;
$(".container div").hide();
$(".container div:nth-child(" + ourPick + ")").show();
});
Demo Here

JS FIDDLE DEMO
Explanation
<div class="parentDiv">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
</div>
<div class="buttons">
<a idx="1">1</a>
<a idx="2">2</a>
<a idx="3">3</a>
<a idx="4">4</a>
</div>
$('.buttons a').click(
function(event)
{
var idx = $(event.target).attr('idx');
$('.div').hide(); //Hides all the divs
$('.parentDiv div:nth-child('+idx+')').show(); // Shows required div
}
);
DISADVANTAGE
If you will insert more contents, there is more work. Else no problem..
If you insert a div , you have to change all the links.
<div class="parentDiv">
<div class="div">1</div>
<div class="div">2.0 Inserted Div</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
</div>
<div class="buttons">
<a idx="1">1</a>
<a idx="2">2.0</a>
<a idx="3">2</a>
<a idx="4">3</a>
<a idx="5">4</a>
</div>
Not here , All the idx has to be changed. Since my code uses nth-child property
Edited
Updated Fiddle
Another Update