Develop Reference

Zooming class added to all images in slider without checking if the 'li' is active

I have a problem with flexslider 2 and elevate zoom plus.
I would like to zoom active image from the slider. I have to use this option, because I also use ACF in wordpress and only this one works as I want. Unfortunately code which I created doesn't work as it should
$(document).ready(function() {
if ($('.flexslider .slides > li').hasClass('flex-active-slide')) {
$('.flexslider .slides li img').addClass('zooming');
}
else
{
$('.flexslider .slides li img').removeClass('zooming');
}
});
</script>
When the li has class which means that image is active, then I would like to add class to the image which has to be zoomed. Unfortunately it adds zooming class to all images in slider without checking if the li is active. What am I doing wrong?

No need to add different js for this, you can add in initialization only like below:
$(window).load(function () {
$('.flexslider').flexslider({
animation: "slide",
start: function (slider) {
$('body').removeClass('loading');
$(slider).find(".flex-active-slide img").addClass("zooming"); // this will add class on slider start
},
before: function (slider) {
$(slider).find(".zooming").each(function () {
$(this).removeClass("zooming"); // this will remove class from previous tag
});
},
after: function (slider) {
$(slider).find(".flex-active-slide img").addClass("zooming"); // this will add class in next tag
}
});
});

Your logic is close, but you are targeting all images with this line:
$('.flexslider .slides li img').addClass('zooming');
It also has to run every time the classes of the slide > li changes.
Unfortunately jQuery doesn't have something nice like .classChange(), but here is a function - created by kozachenko on github - which does what we want.
So you can add kozachenko's function and then use it to see if the class of the li has changed, then add/remove your zooming class.
To find only the one you're looking for, you can use the active class as a selector, and then use jQuery.find() to look for the image inside of that particular element.
$(document).ready(function(){
//kozachenko's function https://gist.github.com/kozachenko/30e55fb5f9ae170eedfe258430fd09ec
(function(){//adds a trigger step to the addClass/removeClass jQuery functions
var originalAddClassMethod = jQuery.fn.addClass;
var originalRemoveClassMethod = jQuery.fn.removeClass;
jQuery.fn.addClass = function(){
var result = originalAddClassMethod.apply( this, arguments );
jQuery(this).trigger('classChanged');
return result;
}
jQuery.fn.removeClass = function(){
var result = originalRemoveClassMethod.apply( this, arguments );
jQuery(this).trigger('classChanged');
return result;
}
})();
$('.flexslider .slides > li').on('classChanged', function(){//the new event triggered by addClass()/removeClass()
$(this).find('img').removeClass('zooming');//first remove the class from any other image
$('.flex-active-slide').find('img').addClass('zooming'); //add the class to active image
});
});

How to show hide divs INSIDE divs easily?

My website is a blog where I have a page with all the posts on a single HTML page. The "posts" are just images inside divs and I need some information to be able to show and hide in side the parent div of the images. Heres how its set up:
HTML
<div class="posts">
<h3>mm/dd/yy<p class="preview">click to show more</p><p class="expand">click to show less</p></h3>
<h4>Title</h4><br>
<p class="expand">caption caption caption caption caption caption caption caption caption</p>
<div class="centertext">
<img class="post" src="path/to/image">
</div>
<br>
</div>
lil CSS
.expand{display: none;}
JS
$(document).ready(function(){
$(".posts").click(function(){
$('.expand').toggle();
$('.preview').toggle();
});
What ends up happening that I don't want to happen is that all images and their captions are hiding and showing when I just click one. Shown here or fullscreen here Someone please help me! Additional info: I am using JQuery and Bootstrap too

Change your JS to:
$(document).ready(function () {
$(".posts").click(function () {
$(this).find('.expand').toggle();
$(this).find('.preview').toggle();
});
});
Or more simple:
$(document).ready(function () {
$(".posts").click(function () {
$(this).find('.expand, .preview').toggle();
});
});
To toggle means, that you don't know the state. The best way is, to change a css-class or a data-attribute.

You can use event.target/this to refer the current object clicked and find child(expand/preview) of the object you clicked with find()
or
check for the children if it is .expand/.preview with function is() //not a better approach
$(document).ready(function () {
$(".posts").click(function () {
$(this).find('.expand').toggle();
$(this).find('.preview').toggle();
});
});
or
$(document).ready(function () {
$(".posts").click(function (event) {
$(event.target).find('.expand').toggle();
//check if target is .expand or its child then first go to its parent with .parents().eq() then apply find()
$(event.target).find('.preview').toggle();
//check if target is .preview or its child then first go to its parent with .parents().eq() then apply find()
});
});

How do I apply jQuery's slideToggle() to $(this) and do the opposite to all other elements?

What I'd like to do is have all elements of class collapsible_list not displayed by default (with one exception... see below*), and then toggle their display when their parent <div class="tab_box"> is clicked. During the same click, I'd also like for every other element of class collapsible_list to be hidden so that only one of them is expanded at any given time.
*Furthermore, when the page initially loads I'd also like to check to see if an element of collapsible_list has a child a element whose class is activelink, and if there is one then I'd like that link's parent collapsible_list element to be the one that's expanded by default.
Here's some sample html code:
<style>
.collapsible_list {
display: none;
}
.collapsible_list.active {
display: block;
}
</style>
<div id="sidebar">
<div class="tab_box">
<div class="collapsible_tab">2014</div>
<div class="collapsible_list panel-2014">
1
2
3
</div>
</div>
<div class="tab_box">
<div class="collapsible_tab">2013</div>
<div class="collapsible_list panel-2013">
<a class="activelink" href="/2013/1">1</a>
2
3
</div>
</div>
</div>
And here's where I'm currently at with the javascript (although I've tried a bunch of different ways and none have worked like I'd like them to):
$(document).ready(function() {
// This looks redundant to me but I'm not sure how else to go about it.
$(".collapsible_list").children("a.activelink").parent(".collapsible_list:not(.active)").addClass("active");
$(".tab_box").click(function() {
$(this).children(".collapsible_list").toggleClass("active").slideToggle("slow", function() {
$(".collapsible_list.active:not(this)").each(function() {
$(this).slideToggle("slow");
});
});
});
});
I hope that's not too confusing, but if it is then feel free to let me know. Any help is much appreciated.

Since you have a dom element reference that needs to be excluded use .not() instead of the :not() selector
jQuery(function ($) {
// This looks redundant to me but I'm not sure how else to go about it.
$(".collapsible_list").children("a.activelink").parent(".collapsible_list:not(.active)").addClass("active").show();
$(".tab_box").click(function () {
var $target = $(this).children(".collapsible_list").toggleClass("active").stop(true).slideToggle("slow");
//slidup others
$(".collapsible_list.active").not($target).stop(true).slideUp("slow").removeClass('active');
});
});
Also, instead of using the slide callback do it directly in the callback so that both the animations can run simultaniously
Also remove the css rule .collapsible_list.active as the display is controlled by animations(slide)

Try This.
$('.collapsible_tab a').on('click', function(e){
e.preventDefault();
$('.collapsible_list').removeClass('active')
$(this).parent().next('.collapsible_list').toggleClass('active');
});
Fiddle Demo

I think your code would be less complicated if you simply remembered the previously opened list:
jQuery(function($) {
// remember current list and make it visible
var $current = $('.collapsible_list:has(.activelink)').show();
$(".tab_box").on('click', function() {
var $previous = $current;
// open new list
$current = $('.collapsible_list', this)
.slideToggle("slow", function() {
// and slide out the previous
$previous.slideToggle('slow');
});
});
});
Demo

show hidden div on list items

html:
I have a ul list with each li counstructed like this:
<li class="A">list-item
<div>1</div>
<div class="B">2
<div class="C">3</div>
</div>
</li>
where div C has css property display:none;
I wrote this js:
$(".A").hover(function () {
$(".C").toggle();
});
that shows hidden divs on li hover, but I would like js working only on active li item.
So when i hover li item it shows only that list item hidden div.
any suggestions? I am new with js, so any help would be appreciated, thnx!

Try something like this, it will find class C within this (which will be the element being hovered)
$(".A").hover(function() {
$(this).find(".C").toggle();
});

Use context to narrow the lookup to the desired element's children.
$(".A").hover(function () {
$(".C", this).toggle();
});

Using the hover(), the correct format of hover function is:
$(".A").hover(
function () {
// A function to execute when the mouse pointer enters the element.
$(this).find(".C").show();
},
function () {
// A function to execute when the mouse pointer leaves the element.
$(this).find(".C").hide();
}
);

hide one div when another is showing in jQuery?

I am trying to hide a div when another one is visible.
I have div 1 and div 2.
If div 2 is showing then div 1 should hide and if div 2 is not showing then div 1 should be visible/unhide.
The function would need to be function/document ready upon page load.
I've tried this but I'm not having any luck, can someone please show me how I can do this.
<script>
window.onLoad(function () {
if ($('.div2').is(":visible")) {
$(".div1").fadeOut(fast);
} else if ($('.div2').is(":hidden")) {
$('.div1').fadeIn(fast);
}
});
</script>

Add a class of hidden to each div, then toggle between that class using jQuery. By the way, window.onload is not a function, it expects a string like window.onload = function() {}. Also, put fast in quotations. I don't know if that's required, but that's how jQuery says to do it.
<div class="div1"></div>
<div class="div2 hidden"></div>
.hidden { display: none }
$(document).ready(function() {
if($(".div1").hasClass("hidden")) {
$(".div2").fadeIn("fast");
}
else if($(".div2").hasClass("hidden")) {
$(".div1").fadeIn("fast");
}
});

You should pass a string to the .fadeIn() and .fadeOut() methods.
Instead of .fadeIn(fast) it'll be .fadeIn("fast"). Same for .fadeOut().
And in general since you're already using jQuery it's better to wrap your code like this:
$(function () {
// Code goes here
});

It looks like you're using jquery selectors (a javascript library). If you're going to use jquery make sure the library is loaded properly by including it in the document header (google makes this easy by hosting it for you <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>)
With jQuery loaded you can do it like this
$(document).ready(function(){
if ($('.div1').is(":visible")) {
$('div2').hide();
}
else if ($('.div2').is(":visible")) {
$('div1').hide();
}
});
WORKING EXAMPLE: http://jsfiddle.net/HVDHC/ - just change display:none from div 2 to div 1 and click 'run' to see it alternate.

You can use setTimeout or setInterval to track if these divs exists
$(function() {
var interval = window.setInterval(function() {
if($('#div2').hasClass('showing')) {
$('#div1').fadeOut('fast');
}
if($('#div2').hasClass('hidden')) {
$('#div1').fadeIn('fast');
}
}, 100);
// when some time u don't want to track it
// window.clearInterval(interval)
})
for better performance
var div1 = $('#div1')
, div2 = $('#div2')
var interval ....
// same as pre code