We Keep Coding

Cycle through spans inside div

I'd like to be able to click on a div and have it cycle through spans inside the div. I can get it to work with the code below, but I'd like to have several of these on a page together that work independently (so they only cycle through their own children). The click should advance both text slideshows, but with independent contents.
$(document).ready(function() {
var divs = $('.timezones span').hide(),
i = 0;
function cycle() {
divs.fadeOut(0).eq(i).fadeIn(0);
i = ++i % divs.length;
};
cycle()
$('.timezones').click(function() {
cycle()
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timezones">
<span>9am PDT</span>
<span>10am MDT</span>
<span>11am CDT</span>
<span>12pm EST</span>
</div>
<div class="timezones">
<span>5pm PDT</span>
<span>6pm MDT</span>
<span>7pm CDT</span>
<span>8pm EST</span>
</div>

Rather than having to store index variables I typically look for the active one within the current parent container and use next(). When the active next doesn't exist you revert to the first()
Something like:
$(document).ready(function() {
function cycle() {
// `this` is the .timezone element event occurred on
var $spans = $(this).children(),
$active = $spans.filter(':visible'),
$next = $active.next().length ? $active.next() : $spans.first();
$active.fadeOut(function() {
$next.fadeIn()
});
}
$('.timezones').click(cycle).find('span:eq(0)').show();
});
.timezones span {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timezones">
<span>9am PDT</span>
<span>10am MDT</span>
<span>11am CDT</span>
<span>12pm EST</span>
</div>
<div class="timezones">
<span>5pm PDT</span>
<span>6pm MDT</span>
<span>7pm CDT</span>
<span>8pm EST</span>
</div>

Try something like below:
$(document).ready(function() {
var divs = $('.timezones span');
i = 0;
function cycle(selectedDiv) {
selectedDiv.fadeOut(0).eq(i).fadeIn(0);
i = ++i % selectedDiv.length;
};
$('.timezones').click(function() {
cycle( $(this).children('span'));
})
});
The below line of code will able to help you find out the span of clicked div
$(this).children('span');

Try this
$(document).ready(function() {
var divs = $('.timezones span').hide(), i = 0;
function cycle(elm){
let spans= elm.find('span');
spans.fadeOut(0).eq(i).fadeIn(0);
i = ++i % spans.length;
};
cycle()
$('.timezones').each(
function() {
cycle($(this))
})
});
Good luck!

I got it working with this code:
$(document).ready(function() {
$( ".timezones" ).click(function() {
$( ".timezones " ).each(function( i ) {
var $spans = $(this).children(),
$active = $spans.filter(':visible'),
$next = $active.next().length ? $active.next() : $spans.first();
$active.fadeOut(0, function() {
$next.fadeIn(0)
});
});
});
$('.timezones').find('span:eq(0)').show();
});

Set Element active and the other inactive (dynamic)

I have a listbox
<div id="listboxid1" class="listboxFilters">
<div class="listboxFilterItem"> <div style="padding-top:2px; float: left;">test2</div> <div class="listboxChosenFilter">3</div> </div>
<div class="listboxFilterItem"> <div style="padding-top:2px; float: left;">test</div> <div class="listboxChosenFilter">*</div> </div>
<div class="listboxFilterItem"> <div style="padding-top:2px; float: left;">gro</div> <div class="listboxChosenFilter">2</div> </div>
</div>
its a normal listbox, the question is now , how can I only set one element to active , and the others then to inactive
my first guess was an onlick on an item, I add a classname named active and before I would do a foreach for the listboxid1 element and set all to inactive, but is this really the common and best way?? :
<script>
function clearAll(element) {
element.each(function () {
var checkboxes = $(this).children("div");
checkboxes.each(function () {
var checkbox = $(this);
checkbox.removeClass("active");
});
});
}
jQuery.fn.multiselecter = function () {
$(this).each(function () {
var checkboxes = $(this).children("div");
checkboxes.each(function () {
var checkbox = $(this);
checkbox.click(function () {
clearAll(checkbox.parent());
checkbox.addClass("active");
});
});
});
};
$("#listbox1").multiselecter();
</script>

I guess you are using jQuery, so try this functions:
On click on anyitem with class .listboxFilterItem call setActive function
$('.listboxFilterItem').click(setActive($(this)));
function setActive(var elem){
$('.listboxFilterItem').each(function(){
$(this).removeClass('active');
});
elem.addClass('active');
}

Try this:
$(".listboxFilterItem").click(function (e) {
$(".listboxFilterItem").removeClass("active");
// or $(".active").removeClass("active");
$(this).addClass("active");
});
Check this on jsfiddle

$(this) - element, which was clicked
$(this).siblings() - all his neighbours, except himself.
$(".listboxFilterItem").click(function () {
$(this).addClass("active").siblings().removeClass("active");
});

Slidetoggle 2 adjacent divs

<div class="unique1">Blabla1</div>
<div class="amministrazione">Amministrazione</div>
some link
some link
<div class="didattica">Didattica</div>
some link
<div class="unique2">Blabla2</div>
<div class="amministrazione">Amministrazione</div>
some link
<div class="didattica">Didattica</div>
some link
some link
<div class="unique3">Blabla3</div>
<div class="amministrazione">Amministrazione</div>
<div class="didattica">Didattica</div>
<div class="unique4">Blabla4</div>
<div class="amministrazione">Amministrazione</div>
<div class="didattica">Didattica</div>
some link
I'd like to have .amministrazione, .didattica and all the links on display:none by default. When user clicks on .unique1 or .unique2 or .unique3 or .unique4 (only) the next .amministrazione AND .didattica slidetoggle down.
Here's what I have so far.. but it's not toggling the correct elements:
jQuery(function () {
jQuery('.unique1, .unique2, .unique3, .unique4').click(function () {
var index = $(this).index(),
newTarget = jQuery('.amministrazione, .didattica').eq(index).slideDown();
jQuery('.amministrazione, .didattica').not(newTarget).slideUp();
});
});
http://jsfiddle.net/2rgqpzpt/

Use nextAll with the :first selector to target the appropriate divs:
jQuery(function () {
jQuery('.unique1, .unique2, .unique3, .unique4').click(function () {
jQuery('.amministrazione, .didattica').slideUp();
jQuery(this).nextAll('.amministrazione:first, .didattica:first').stop().slideDown();
});
});
Fiddle 1
You could accomplish the same thing using nextUntil:
jQuery(function () {
var un= jQuery('.unique1, .unique2, .unique3, .unique4');
un.click(function () {
jQuery('.amministrazione, .didattica, a').slideUp();
jQuery(this).nextUntil(un).stop().slideDown();
});
});
Fiddle 2

You can change your code with
jQuery(function () {
jQuery('.unique1, .unique2, .unique3, .unique4').click(function () {
var index = $(this).index(),
newTarget = $(this).next('.amministrazione');
newTarget= newTarget.add(newTarget.next());
newTarget.slideDown()
jQuery('.amministrazione, .didattica').not(newTarget).slideUp();
});
});

How can I create a dynamic navigation system by loading a page into a div?

I am trying to create a navigation system where there is a set of links, that when clicked, will load an external page into a div. This is what I have so far, but it doesn't work:
<div class="row">
<div class="col-md-4"><div class="navActive">Link1</div></div>
<div class="col-md-4"><div class="">Link2</div></div>
<div class="col-md-4"><div class="">Link3</div></div>
</div>
$(document).ready(function() {
$('.loadPage').click(function(e){
e.preventDefault();
var curActive = document.querySelectorAll(".navActive");
for (i=0;i<curActive.length;i++)
curActive[i] = curActive[i].className.replace( /(?:^|\s)navActive(?!\S)/g , '' );
e.preventDefault();
$('.targetLoad')
.hide()
.load(this.href), function() {
$(this).fadeIn(500);
});
$(this + ' div div').addClass('navActive');
});
});

You have a couple of errors in your code:
.load(this.href*)*, function() {...); should be .load(this.href, function() {. You want to specify a complete callback. Not just declare a function expression, right?
this div div what's that? You need $(this).find('div > div').
Summarizing it up.
$(function() {
$('.loadPage').click(function(e){
var activeCls = 'navActive';
e.preventDefault();
$('.' + activeCls).removeClass(activeCls);
$('.targetLoad')
.hide()
.load(this.href, function() {//there is no ')' after href
$(this).fadeIn(500);
});
$(this).find('div > div').addClass(activeCls);
});
});
Working demo http://jsfiddle.net/tarabyte/F4EL9/. Ignore additional code to emulate server response.

Consider doing something like this:
<a onclick="load_url('/my-page.html');">My page</a>
And then the jquery:
function load_url(url)
{
$("#target_div").load(url);
}

JQuery toggle between different divs

I need a some sort of a practical solution for toggle between different divs, when i click on a anchor tag.
I have done a JSfiddle that is kind of the solution i want.
the problem there is when i first click on "show 1" and then "show 2" the two first placeholders content disappear, but nothing new shows up.
I want it this way:
When i click "show 1", Two Placeholders appear(PlaceHolder 1 and 2).
When clicking "show 2" WITHOUT closing Placeholder 1 and 2. The PlaceHolder 1 and 2 should close AND PlaceHolder 3 should appear.
Jsfiddle: http://jsfiddle.net/CY3tj/2/
HTML:
<a id="1" class="show">show 1</a>
<br/ ><br/ >
<a id="2" class="show">show 2</a>
<div class="content-wrapper">
<div id="item-1">
<div>
<h2>Placeholder1</h2>
<p>Placeholder1</p>
</div>
<div>
<h2>PLaceHolder2</h2>
<p>Placeholder2</p>
</div>
</div>
<div id="item-2">
<div>
<h2>Placeholder3</h2>
<p>Placeholder3</p>
</div>
</div>
</div>
JQuery:
$(document).ready(function () {
$(".content-wrapper").hide();
});
$(document.body).on("click", "a.show", function () {
var id = $(this).attr("id");
$(".content-wrapper > div").each(function () {
if ($(this).attr("id") == "item-" + id) {
$(this).show();
} else {
$(this).hide();
}
});
$(".content-wrapper").toggle();
});

You can simplify this to:
$(function(){
var $allItems = $(".content-wrapper > div"); //Cache the collection here.
$(document).on("click", "a.show", function () {
var id = this.id, itemId = "#item-" + id; //get the id and itemId
$allItems.not($(itemId).toggle()).hide(); //Hide all items but not the one which is the target for which you will do a toggle
});
});
Demo
Instead of hiding the wrapper via JS, you can just add a rule to hide its contents.
.content-wrapper >div{
display:none;
}

Your main problem is your using $(.content-wrapper).toggle() You only want to hide the content wrapper initially and then after one click you want it to show up. By toggling your content wrapper you were making it dissapear every other click which was why you had to click twice to see it.
$(document.body).on("click", "a.show", function () {
var id = $(this).attr("id");
$(".content-wrapper > div").each(function () {
if ($(this).attr("id") == "item-" + id) {
$(this).show();
} else {
$(this).hide();
}
});
$(".content-wrapper").show();
});
If you are looking to keep the toggle functionality (to hide a div that is already showing) here is a solution for that.
$(document.body).on("click", "a.show", function () {
var id = $(this).attr("id");
if($(".content-wrapper #item-"+id).is(':visible'))
$(".content-wrapper").hide();
else{
$(".content-wrapper").children("div").hide();
$(".content-wrapper #item-"+id).show();
$(".content-wrapper").show();
}
});

You would gain more flexibility and performance by selecting the ids of the anchor tags. You should also hide the specific divs that you want to be hidden rather than hiding the overall container. That way, you can easily target which div you want to show and which one to hide.
$(document).ready(function () {
$(".content-wrapper > div").hide();
});
$("#1").click(function(){
$("#item-2").hide();
$("#item-1").show();
});
$("#2").click(function(){
$("#item-1").hide();
$("#item-2").show();
});
However, if you're looking to add an unknown number of these items, then you will want to select (for readability) just the element and class, rather than having to go through the document, which is just redundant.
$(document).ready(function () {
$(".content-wrapper > div").hide();
});
$("a.show").click(function(){
$(".content-wrapper > div").hide();
$("#item-" + $(this).attr("id").show();
});