We Keep Coding

jQuery $(this) selector accidentally selects more than 1 element

I'm using the .each() jQuery function together with the $(this) selector to effect a hovered div, but because the given divs are close to one another, the $(this) selector selects more than one element if I move the mouse too fast.
Is there any way to make sure to force $(this) not to select more than one element?
Here is my HTML:
<div class="row">
<div class="col-md-4 donation 180">
<div class="box">
<div class="cover">
<h2>Freedom<br>Package</h2>
</div>
<form class="form"></form>
</div>
</div>
<div class="col-md-4 donation 200">
<div class="box">
<div class="cover">
<h2>Sovereignty<br>Package</h2>
</div>
<form class="form"></form>
</div>
</div>
<div class="col-md-4 donation 400">
<div class="box">
<div class="cover">
<h2>Royalty<br>Package</h2>
</div>
<form class="form"></form>
</div>
</div>
</div>
And here is my jQuery:
if($(window).width() < 800 ) {
$(".form").show();
$(".cover").hide();
} else {
$(".donation").each(function() {
$(this).hover(function() {
$(this).children($(".box")).addClass("animated flipInY");
$(this).children($(".box")).children($(".cover")).fadeOut("", function() {
$(this).siblings($(".form")).show();
});
}, function() {
$(this).children($(".box")).removeClass("animated flipInY");
$(this).children($(".box")).children($(".form")).fadeOut("", function() {
$(this).siblings($(".cover")).show();
});
});
});
}
I would appreciate your help, Thank You!

You don't need to use $(this). You can use the value from each.
$(".donation").each(function(i, val) {
alert($(val).attr('class'));
});

How to open div before the class close the div after another class

I want to append div with class before the .left. Its must be close after the .right. I have tried like below but its automatically close in same line.
I also tried wrap() but no luck.
HTML
<!-- <div class="group"> -->
<div class="tp left arrow">Left</div>
<div class="tp bullets">
<div class="round">1</div>
<div class="round">2</div>
<div class="round">3</div>
<div class="round">4</div>
<div class="round">5</div>
</div>
<div class="tp right arrow">right</div>
<!-- </div> -->
JS
$( ".left" ).before( "<div class='group'>" );
$( ".right" ).after( "</div'>" );

You can use wrapAll() method for that
$(".left,.bullets,.right").wrapAll("<div class='group'></div>")
Fiddle

$('.tp').wrapAll('<div class="group" />')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tp left arrow">Left</div>
<div class="tp bullets"><div class="round">1</div><div class="round">2</div><div class="round">3</div><div class="round">4</div><div class="round">5</div></div>
<div class="tp right arrow">right</div>

switch/hide div JQuery

When I expand a division it can't be collapse again. All I need is when the division is shown I want to hide it again when clicking on it.
Here's my HTML:
<div class="login_area" id="clickHere2">
Signup
<div class="drop-down" id="signup_area_hover">
Signup
</div>
</div>
<div class="login_area" id="clickHere">
Login
<div class="drop-down" id="login_area_hover">
Login
</div>
</div>
<div class="drop-down" id="dropdown_login">
<div class="dropdown_login_header">
<div class="beeper_value"></div>
<div class="beeper_login"></div>
</div>Hello World 111
</div>
<div class="drop-down" id="dropdown_signup">
<div class="dropdown_signup_header">
<div class="beeper_signup"></div>
</div>Hello World 2222
</div>
and here's the JS :
<script type="text/javascript">
$( '#clickHere' ).click(function() {
$( '#dropdown_login' ).slideToggle(500);
});
$( '#clickHere2' ).click(function() {
$( '#dropdown_signup' ).slideToggle(500);
});
</script>
I want to add an if condition if the clickHere is shown, ClickHere2 hides and vice versa.

Take a look at the toggle / slideToggle functions in jquery.
http://api.jquery.com/toggle/ and https://api.jquery.com/slideToggle/
There are examples on the bottom of the page.

DEMO
jQuery:
$( "#myBtn" ).click(function() {
$( "#myDiv" ).toggle();
});
HTML:
<div id="myDiv"></div>
<button type="button" id="myBtn">Toggle</button>
CSS:
#myDiv {
background-color:red;
height:75px;
width:75px;
}
Resources:
http://api.jquery.com/toggle/

Show specific content for each div using Fancybox,

I am trying to load a specific sibling for each div using fancybox.
E.g:
<div id ="content">
<div class="item1">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 1</span></div>
</div>
<div class="item2">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 2</span></div>
</div>
<div class="item3">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 3</span></div>
</div>
<div class="item4">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 4</span></div>
</div>
</div>
I tried to do the config using the property Content, but not got it, is it possible to get each hidden for each specific item ?

You can use below code:
$(function(){
$("div.pop-ups span").click(function(){
$.fancybox({ content: $(this).parent().next().html() });
});
});
This will show the content of relevant div in fancybox.

You can call this function to open some specific div content in a fancybox.
function OpenDiv(divIDtoopen) //eg. divIDtoopen= #divID //# is must to be prepended to divID for selection
{
$(document).ready(function ()
{
$.fancybox.open(
{
href: divtoopen
}
);
}
);
}

Javascript - jquery,accordion

<div id="wrapper">
<div class="accordionButton">Personal Information</div>
<div class="accordionContent">
Personal text
</div>
<div class="accordionButton">Experience</div>
<div class="accordionContent">
Experience information
</div>
<div class="accordionButton">Training</div>
<div class="accordionContent">
No skills
<div class="accordionButton">Career</div>
<div class="accordionContent">
Never had a job
</div>
<div class="accordionButton">Referers</div>
<div class="accordionContent">
None.
</div>
</div>
This code works how i want it to. It is a horizontal accordion. However, when it is loaded on my webpage, they content divs have to be hidden for my jquery to work.
Jquery:
$(document).ready(function() {
// When div is clicked, hidden content divs will slide out
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
// Close all divs on load page
$("div.accordionContent").hide();
});
If i don't hide the divs, all the divs display. Is there any way to display the 1st page without changing too much of my jquery or would i have to set different class names for the button and the content so that when a specified button is clicked, the affiliated content will slide out for that button div?

You can use jquery selector for first div and set it as show(). Something like :
$('div.accordionContent:first').show();

I think you have to try this:-
<script type="text/javascript">
$.fn.accordion = function(settings) {
accordion = $(this);
}
$(document).ready(function($) {
$('div.accordionContent').click(function() {
if($(this).next().is(":visible")) {
$(this).next().slideDown();
}
$('div.accordionContent').filter(':visible').slideUp();
$(this).next().slideDown();
return false;
});
});
</script>

Why not use slideToggle() instead of IF statements....

Try this very simple solution
HTML
<div class="accordion-container">
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
</div>
jQuery
$('.accordion-content .accordion-title').on('click', function(){
$(this).toggleClass('active');
$('.accordion-title').not($(this)).removeClass('active');
$(this).next().slideToggle();
$(".accordion-toggle").not($(this).next()).slideUp();
});