We Keep Coding

jQuery animate prevent all boxes sliding up together

I have 36 boxes where you hover over the title and it slides up to show the hidden text below it, whilst it works as expected the problem is all 36 boxes slide up at the same time instead of just the one you moused over here is the script I am using:
$(document).ready(function() {
$('.caption').mouseenter(function(){
$('.caption').stop().animate({height: "60%"});
});
$('.box').mouseleave(function(){
$('.caption').stop().animate({height: "8%"}, 1000, function() {
});
});
});
Now after much reading I found that I need to use "this" so I tried this:
$(document).ready(function() {
$('.caption').mouseenter(function(){
$('.caption', this).stop().animate({height: "60%"});
});
$('.box').mouseleave(function(){
$('.caption', this).stop().animate({height: "8%"}, 1000, function() {
});
});
});
However that just disables the animation altogether, I tried using ".next" also and many other combinations that just resulted in the animation being disabled also.
In short, I have 36 boxes and I only want the actual one you mouse over to slide up not all of them at the same time.
I am a total jQuery novice and have searched for hours but cannot find a working example of exactly what I wish to achieve. Help is greatly appreciated.

Try taking the .caption out of your animate function and just use the reference to this like this
$(document).ready(function() {
$('.caption').mouseenter(function(){
$(this).stop().animate({height: "60%"});
});
$('.box').mouseleave(function(){
$(this).stop().animate({height: "8%"}, 1000, function() {
});
});
});
The this object when used with a jquery even is a reference to the specific element the event was called on.

Ah I got it !
$(document).ready(function() {
$('.caption').mouseenter(function(){
$(this).stop().animate({height: "60%"});
});
$('.caption').mouseleave(function(){
$(this).stop().animate({height: "8%"}, 1000, function() {
});
});
});
Just changed .box to .caption and its working, Thank you guys for you help !
I am going to mark yours as correct though since your answer did put me in the right direction and I only had to make that small change.

Struggling to add active class/state to faq accordion

I'm quite the amateur when it comes to Javascript, hence why I'm posting this on here. I've spent quite a lot of time searching for the answer but can't seem to find it.
I've created a FAQ Accordion on jsfiddle and can't for the life on me get it to add an active class/state when the tabs are extended so I can apply styling appropriately.
If anyone can be of any assistance it would be greatly appreciated :)
$(function () {
$('.acc_trigger a').click(function () {
$('.acc_trigger').next('.acc_container').slideUp();
$(this).closest('.acc_trigger').next('.acc_container').stop().slideDown();
return false;
})
$('.expand').click(function () {
$('.acc_trigger').closest('.acc_trigger').next('.acc_container').slideDown('slow');
return false;
})
$('.collapse').click(function () {
$('.acc_trigger').next('.acc_container').slideUp('slow');
return false;
})
});
jsfiddle

What yakutsa said, but to answer your question you can continue to use Jquery and use the .addClass('addedClass') to the end of whichever you wish to change.
For example if you want the opened container to have a red background
$('.acc_trigger').next('.acc_container').slideUp().addClass('addedClass');
width css
.addedClass {
background: red;
}
when you close it, use .removeClass('addedClass');
here's a fiddle

Avoid giant cascading in jQuery?

I feel like this is something that is solved by "deferreds" or "promises" that I've heard about in jQuery, but looking searching for related articles on that doesn't exactly show me what I'm looking for.
I want to be able to do a simple jquery function call (like animate() or slideUp()) then call another simple function when it is completed. Of course I know about slideUp(400, function(){ //onComplete... }); but if you have a large cascade of animations, that can get pretty hairy pretty quickly.
Check out the following jsfiddle:
http://jsfiddle.net/ue3daeab/
When you click the first button, you see the visual effect I want to acheive. However, I'm accomplishing it with "cascade hell," and the relevant code being:
$("#clickme").click(function(){
//Cascade hell
$("#my1").slideUp(400, function(){
$("#my2").slideUp(400, function(){
$("#my3").slideUp(400, function(){
$("#my4").slideUp(400, function(){
$("#my5").slideUp(400, function(){
$("#my6").slideUp(400, function(){
$("#my7").slideUp(400, function(){
$("#my8").slideUp(400, function(){
$("#my9").slideUp(400, function(){
$("#my10").slideUp(400);
});
});
});
});
});
});
});
});
});
});
When you click button 2, all the divs collapse at once, which isn't the effect I want. I feel like I should be able to do something like this, but obviously it doesn't work. The relevant code for the 2nd button is:
$.when($("#my1").slideUp())
.done($("#my2").slideUp())
.done($("#my3").slideUp())
.done($("#my4").slideUp())
.done($("#my5").slideUp())
.done($("#my6").slideUp())
.done($("#my7").slideUp())
.done($("#my8").slideUp())
.done($("#my9").slideUp())
.done($("#my10").slideUp());
Any advice? Thanks.

Why not use a simple array of ids to collapse, and then collapse them one item at a time?
$("#clickme").click(function(){
var toCollapse = ["#my1", "#my2", ...];
(function collapse(){
var id = toCollapse.shift();
if (!id) return;
$(id).slideUp(400, collapse);
})();
});
I edited your jsfiddle with this example too: http://jsfiddle.net/ue3daeab/2/

I would do something like this:
UNTESTED
$.each($('.item', '#container'), function(index, value) {
$(this).delay(50*index).slideUp(400);
});
This way everything doesn't try to happen all at once.

Toggle/Show one defined DIV with JS

I have a fiddle for you: http://jsfiddle.net/vSs4f/
I want to show the div.sub-menu with a simple click on a.haschildren. If the body loads the div.sub-menu should be closed. If I click a second time on a.haschildren the div.sub-menu should be close.
I have sampled so many things but I think the problems are the lot of DIV's. One idea is in the fiddle.
$(function() {
$("a.haschildren").click(function(e) {
e.preventDefault();
$('div.sub-menu:visible').hide();
$(this).next('div.sub-menu').show();
});
});
I really hope you can help me, thanks!

Try this:-
Fiddle
$(function () {
$("a.haschildren").click(function (e) {
e.preventDefault();
var subMenu = $(this).closest('div.haschildren').nextUntil('.sub-menu').next().toggle();
$('div.sub-menu:visible').not(subMenu).hide();
});
});
Using .nextUntil to reach a point till the .sub-menu, incase any other siblings come in between this will still work.

Personally there are MANY things I would have changed about the structure of your DOM. I am a strong believer that you should base your javascript structure around a well structured DOM, so the traversal is very easy and intuitive. That being said, I'm going to be slightly daring by submitting my fiddle, in the hope that if nothing else, you can look at it and gain a little insight on how to take advantage of a few DOM quirks to make your javascript a bit more intuitive and elegant.
http://jsfiddle.net/vSs4f/6/
$(function() {
$('#menu > div.item')
.find('a').click(function() {
var submenu_index = $(this).parents('.item:first').find('.sub-menu').toggle().index('.sub-menu');
// This chunk can disappear if you're not interested in hiding all of the other sub-menus
$('.sub-menu').filter(function(index) {
if(index != submenu_index)
return true;
}).hide();
}).end()
.find('div:first').after('<div class="trenner"></div>');
});

Try
$(function() {
$("a.haschildren").click(function(e) {
e.preventDefault();
var item = $(this).closest('div.haschildren').next().next('div.sub-menu').toggle();
$('div.sub-menu:visible').not(item).hide();
});
});
Demo: Fiddle

just use toggle()
$('div.sub-menu').toggle();

Ironically enough, the method you're looking for is .toggle();
http://api.jquery.com/toggle/

try it:
$(function() {
$("div.haschildren").click(function() {
if($(this).next().next('div.sub-menu').is(":hidden")){
$('div.sub-menu:visible').hide();
$(this).next().next('div.sub-menu').show();
}else{
$(this).next().next('div.sub-menu').hide();
}
return false;
});
});

Keep the hover state on the last clicked menu item

I have added a nice (jquery + css) navigation menu to my website, but there's a small problem. When I click on a menu item, the light blue box jumps back to the first item, and I would like the box to stay on the clicked item, but I have no clue how to make it happen.
Here's an example: http://jsfiddle.net/Stylock/ta8g4/
In that example, it actually works how I want, but on my website it doesn't work for some reason. Any help would be much appreciated.

You could add a class to the item like .selected
And in your css you apply the same style to the .selected than the :hover
http://api.jquery.com/addClass/
Or you cloud also modify the css using jQuery. But the first solution is more flexible.
Edit: Use the callback function to add/remove class, after your effect

This might be a solution to the right direction:
Onclick check if the menu already has a classname to get the background changed
remove that class from there
Add the class where you clicked
some minor css changes are needed and u will have solved it
have a great day

you can add a class when other page loads like to add on all pages like
this is bad one
<script type="text/javascript">
$(window).load(function () {
$("#index").toggleClass("highlight");
});
$(window).unload(function () {
$("#index").toggleClass("highlight");
});
</script>
site i used this at http://www.hoteloperaindia.com/
or like this short one to add this to master page
<script>
$(function () {
var loc = window.location.href; // returns the full URL
if (location.pathname == "/") {
$('#home').addClass('active');
}
if (/index/.test(loc)) {
$('#home').addClass('active');
}
if (/about/.test(loc)) {
$('#about').addClass('active');
}
if (/accommodation/.test(loc)) {
$('#accommodation').addClass('active');
}
if (/gallery/.test(loc)) {
$('#gallery').addClass('active');
}
if (/tariff/.test(loc)) {
$('#tariff').addClass('active');
}
if (/facilities/.test(loc)) {
$('#facilities').addClass('active');
}
if (/contact/.test(loc)) {
$('#contact').addClass('active');
}
});
</script>
site where i used this one http://rtshotel.in/
change it with your code