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 selecting next div after $(this)

I am working on a drop down menu button that when clicked displays the previously hidden div under it.
This code works without $(this).next but it will display all div's with class .menudrop because there are multiple buttons and drop downs on the page; I am trying to only change the display on the next .menudrop after the .dropclick that was pressed.
JsFiddle: https://jsfiddle.net/jeffd/nuen3735/1/
<div class='playbox'>
<div class='playbox2 playboxplayer player'>
<div class='play' key='respect.mp3' name='Respect' tag='tagtest'></div>
</div>
<div class='playbox2 playboxbpm bpm'>85 BPM</div>
<div class="playbox2 playboxname name">Respect</div>
<div class='playbox2 playboxkeywords keywords'>Slow, Smooth, RnB</div>
<div class='playbox2 playboxlength length'>02:12</div>
<div class='playbox2 playboxbuy buy'>
<div class='mp3buy droptrack' data-product-id='Respect' data-product-key='3c31060e1038c3fe3e9cb0f069d6f33b'>+</div>
</div>
<div class='menudrop'>(dropdown)</div>
</div>
$(".droptrack").on('click', function() {
$(this).next(".menudrop").slideToggle('display', function(i, v) {
return v == 'none' ? 'inline-block' : 'none'
});
});

$(this).next() moves to the next sibling. In your code, .menudrop is not a sibling of .droptrack, but of its father. What you should do is:
$(this).parent().next('.menudrop')
(Tip: proper HTML formatting would help you next time)

$(this).parent().next('.menudrop')

jQuery show one next sibling at a time on click

I'm trying to show hidden rows one at a time on button click, but they all show at once since they have class "row" - the 1st row is shown by default and the rest are hidden
I can't use Id selectors since it's server side and dynamic, so how can I only show the immediate next row/sibling on each click until there are none left? I could append a counter to each row class but that wouldn't help when trying to select the next row in jQuery with that counter
This is what I have which shows all rows on one click
<script>
$(".myButton").click(function() {
$('.container .row').next('.row:hidden').slideDown();
});
</script>
<div class="container">
<!-- 1st row not hidden by default -->
<div class="row">
<div class="row">
<div class="row">
</div>
Thanks for help in advance!

$('.container .row:visible').last().next('.row:hidden').slideDown();
If all you're doing is showing them in a sequential order, then you don't need to track which are active. You can simply use the visibility to always choose the last.
All you do is add the :visible to the row selection, to find all visible rows; then use the last() method to only reference the last of that stack. This allows next() to be called for only one element (the last one), and not all the rows in the container.
To simplify this even more (and call fewer methods), you could choose to only select the first hidden row: $('.container .row:hidden:first').slideDown(); or $('.container .row:hidden').first().slideDown();
Fiddle

If you add the class "selected" to the first row than you could do this:
<script>
$(".myButton").click(function() {
$('.container .row.selected')
.removeClass('selected')
.hide()
.next()
.addClass('selected')
.slideDown();
);
</script>
<div class="container">
<div class="row selected">
<div class="row">
<div class="row">
</div>

You could try iterating through the collection to display the correct one. See this JSFiddle: http://jsfiddle.net/gjqb6m83/
var i = 0;
var collection = $(".row");
$(".myButton").click(function() {
$(collection).css('display', 'none');
$(collection[i]).slideDown();
i++
i = i % collection.length;
});

you can use :nth-child()
$(document).ready(function() {
var counter = 1;
$(".myButton").click(function() {
counter++;
$('.container .row').hide();
$('.container .row:nth-child(' + counter + ')').slideDown();
});
});
.row {
display:none;
}
.row:nth-child(1) {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="myButton">My Button</button>
<div class="container">
<div class="row">row 1</div>
<div class="row">row 2</div>
<div class="row">row 3</div>
<div class="row">row 4</div>
<div class="row">row 5</div>
</div>

Make use of another jQuery-pseudo-selector :first
$(".myButton").click(function() {
$('.container .row:hidden:first').slideDown()
});
and dont forget to close your divs! Look at https://jsfiddle.net/kswmktce/1/

Yet another solution. This one shows just one at a time, and starts over when finished.
$(".myButton").click(function() {
$(".row:visible").next().slideDown();
$(".row:visible").first().hide();
if (!$(".row:visible").length)
$(".row").first().slideDown();
});
.row {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button class="myButton">Click ME</button>
<div class="container">
<div class="row">a</div>
<div class="row">b</div>
<div class="row">c</div>
<div class="row">d</div>
<div class="row">e</div>
</div>

Execute function if the element was not selected before

When the the div with .redactor class is clicked, check if it is already as the selected element.
If it is already selected then do nothing.
If it is newly selected then
Execute the initialize_redactor() for that current selected div,
And execute the destroy_redactor() if there was any div which was previously selected.
And while any of the .redactor div is selected, if clicked other than the .redactor div, then execute destroy_redactor() for the currently selected .redactor div.
Sample in codepen.io
html:
<div id="toolbar_wrapper">
<div id="toolbar">
</div>
</div>
<div id="content">
<div class="redactor">
<h1>Header</h1>
<p>Paragraph</p>
</div>
<div class="redactor">
<h1>Another Header</h1>
<p>Another Paragraph</p>
</div>
</div>

You should loop through every ".redactor" element and run destroy_redactor on the selected element:
$('.redactor').on("click", function() {
$(".redactor").each(function () {
if($(this).hasClass("selected"))
{
destroy_redactor(current_edit);
$(this).removeClass("selected");
}
});
$(this).addClass("selected");
current_edit = $(this);
initialize_redactor(current_edit);
});

I think you just need to add two more lines to your js
You will destroy ALL .selected AFTER you check if the redactor has a class of selected:
if (!$(this).hasClass("selected")) {
destroy_redactor($('.selected'));
Then, if it already has the class selected, remove that class
} else {
$('.selected').removeClass('selected');
Here's the codepen to try it out:
http://codepen.io/anon/pen/vNEBNv

Traversing DOM from span in / out of divs

I'm adding a click event to a span that is within a div. The target of this event, which will become visible, is a first div that is within a div, two divs down. How can I traverse the DOM to find it?
Perhaps it'll be clearer with the code:
<div a>
<h2>
<span id="here">Click</span>
</h2>
</div>
<div></div>
<div>
<div class="targetDiv">This is the div we need to find</div>
<div class="targetDiv">There are other divs with the same id, but we don't need to find those</div>
<div class="targetDiv">Not looking for this one </div>
<div class="targetDiv">Or this one either</div>
</div>
I've searched left and right and cannot find an answer. It's important to restrict the event ONLY to the first div immediately after the span.
Any help would be much appreciated.

As shown, the code would look like this:
$('span#here').on('click', function() {
$(this).closest('div').siblings(':contains(.targetDiv)').children().eq(0).show();
}

Here's a sample of the fish we caught
$(function() {
$('#here').on('click', function() {
var div = $(this) //the element clicked
.closest('div') //find nearest parent div
.nextAll(':eq(1)') //find the second next div
.children(':eq(0)') //find the first child of it
.show(); //remove invisible cloak
});
});​

This works. I provided an example you can just save to a html file and test it yourself
<style>
.targetDiv{display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#here').click(function(){
$('.targetDiv').first().show(); // or whatever you want
});
});
</script>
<div a>
<h2>
<span id="here">Click</span>
</h2>
</div>
<div></div>
<div>
<div class="targetDiv">This is the div we need to find</div>
<div class="targetDiv">There are other divs with the same id, but we don't need to find those</div>
<div class="targetDiv">Not looking for this one </div>
<div class="targetDiv">Or this one either</div>
</div>