We Keep Coding

Closing nested accordion closes everything

I have a problem with my nested accordions.
I have been trying to figure out how to nest my accordions but in a sense that I dont need to write any extra jquery codes for each specific one I add.
I made a jsfiddle as an example... https://jsfiddle.net/L2bwmgL8/
and the code for the accordion looks like this:
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(1000).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).closest('.accordion-section-title');
//console.log(currentAttrValue);
if (currentAttrValue.hasClass('active')) {
close_accordion_section();
} else {
close_accordion_section();
// Add active class to section title
currentAttrValue.addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue.attr('href')).slideDown(1000).addClass('open');
setTimeout(function() {
$('html, body').animate({
scrollTop: $(currentAttrValue.attr('href')).offset().top
}, 1000);
}, 1001);
//console.log((currentAttrValue.attr('href')));
}
e.preventDefault();
});
});
This way it works fine when I dont have them nested. However, when they are nested as in the example, under the first accordion (ignore the broken images).
Then when I click on the specific accordion to close, everything inside that accordion closes, including the parent one. Or, maybe I think just the parent closes.
Now, I tried, maybe passing the currentAttrValue inside the close_accordion_section() function like close_accordion_section(currentAttrValue) and changing the close_acordion_section to:
function close_accordion_section() {
$(this).closest('.accordion .accordion-section-title').removeClass('active');
$(this).closest('.accordion .accordion-section-content').slideUp(1000).removeClass('open');
}
But then everything opens up nicely, but I cant close any of the accordions anymore.
Any help and explanation would be appriciated, I am still learning the ropes so to speak.

I would simplify it, and then just target the siblings of the current accordion so as to not affect the parent accordion of nested accordions etc.
$(document).ready(function() {
$('.accordion-section-title').on('click', function(e) {
e.preventDefault();
var self = $(this).toggleClass('active');
var section = self.closest('.accordion-section');
var siblings = section.siblings('.accordion-section');
siblings.find('.accordion-section-content').slideUp(1000).removeClass('open').end()
.find('.accordion-section-title').removeClass('active');
$('.accordion ' + self.attr('href')).slideToggle(1000).toggleClass('open')
.find('.accordion-section-title.active')
.trigger('click');
if (self.hasClass('active')) {
setTimeout(function() {
$('html, body').animate({
scrollTop: $(self.attr('href')).offset().top
}, 1000);
}, 1001);
}
});
});
FIDDLE

The issue is in your if else statement:
you need to cut one of the calls to close_accordion_section():
I have a problem with my nested accordions. I have been trying to figure out how to nest my accordions but in a sense that I dont need to write any extra jquery codes for each specific one I add.
I made a jsfiddle as an example... https://jsfiddle.net/L2bwmgL8/
and the code for the accordion looks like this:
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(1000).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).closest('.accordion-section-title');
//console.log(currentAttrValue);
if (currentAttrValue.hasClass('active')) {
close_accordion_section();
} else {
//CUT THIS
// Add active class to section title
currentAttrValue.addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue.attr('href')).slideDown(1000).addClass('open');
setTimeout(function() {
$('html, body').animate({
scrollTop: $(currentAttrValue.attr('href')).offset().top
}, 1000);
}, 1001);
//console.log((currentAttrValue.attr('href')));
}
e.preventDefault();
});
});
fiddle: https://jsfiddle.net/kjyqmzuh/

How to hide an element when it has reached another element on scroll down?

I have a fixed button on bottom: 0 that performs a scroll to another element, when clicked, but I need to hide it, when it reaches that element and make it appear again, when it scrolls over that element.
How could I do this with jQuery?
I've done this so far, but it isn't enough.
function hideScroller () {
div1 = $('#form');
div2 = $('#slide-to-contacts');
div1FromTop = div1.offset().top;
div2FromTop = $('body').scrollTop();
if (div1FromTop <= div2FromTop) div2.hide();
else div2.show();
}
A rough estimate http://jsfiddle.net/ydbev5rq/5/

Works mostly as expected I think, just an incorrect selector for div2. Best to use $(window).scrollTop() or if you must $('html, body').scrollTop() by the way.
Update - adjustment for when toggling triggers :
http://jsfiddle.net/ydbev5rq/7/
div2FromTop = $(window).scrollTop()+$(window).height();
Of course, using a $(this) when you can never hurts...
div2FromTop = $(this).scrollTop()+$(this).height();

With your code it's solved.just changed div2 id and made >= to < and div1.scrollTop() to offset().top.
Here is the js code
function hideScroller() {
div1 = $('#form');
div2 = $('#scroll-to-contacts');
div1FromTop = div1.offset().top;
div2FromTop = $('#scroll-to-contacts').offset().top;
if (div1FromTop < div2FromTop) div2.hide();
else div2.show();
}
$(document).ready(function () {
//hideScroller();
form = $('#form');
$('#scroll-to-contacts').click(function () {
$('html, body').animate({
scrollTop: form.offset().top
}, 1000);
});
});
$(window).scroll(function () {
hideScroller();
});

fadeOut on scroll at pixel height

i'm trying to achieve a Scroll to Top button that fades in at a certain point on the page and fades out at a certain point...I have the fadeIn function working properly but can't seem to get the proper syntax for the click event fadeOut; it just disappears once you get to the top, instead of fading out if you're <= 675px. Any help is greatly appreciated!
HTML:
</div>
BACK TO LOGIN
</div>
jQuery:
$(document).ready(function() {
//Check to see if the window is top if not then display button
$(window).scroll(function() {
if ($(this).scrollTop() > 675) {
$('.scrollToTop').fadeIn(500);
} else {
$('.scrollToTop').fadeOut(500);
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('html, body').animate({
scrollTop : 0
}, 800);
return false;
});
});

I think your question isn't so clear but maybe you mean that when click on the scrollToTop button it doesn't disappear until the scroll reach to top of page, it's because when your animation function is running the .scroll can't runs so fast that disappear button when reach to 675px but you can fadeout button as soon as click on it using this code:
jQuery: $(document).ready(function() {
var isClicked = false;
$('.scrollToTop').css("display","none");
$(window).scroll(function() {
if (isClicked == false){
if ($(this).scrollTop() > 675) {
$('.scrollToTop').fadeIn(500);
} else {
$('.scrollToTop').fadeOut(500);
}
}
});
$('.scrollToTop').click(function() {
isClicked = true;
$('.scrollToTop').fadeOut(500);
$('html, body').animate({
scrollTop : 0
}, 800, function(){
isClicked = false;
});
});
});
The isClicked variable is added to prevent blinking button (you can remove it to figure out what i'm saying).
Also i add this line:
$('.scrollToTop').css("display","none");
because it seems that you don't need a "Scroll To Top" button when page load for first time and you are on the top of page.
Check JSFiddle Demo

Activating two jQuery functions with one link

I'm trying to do the following:
Open a div with slideToggle
Move the users window to the top of the div with scrollTop
Then basically reverse the process when the user closes the div.
I have the whole process almost finished, but I am having one problem. When I open the div my window doesn't move to the top of the div. But when I close the div my window does move to where I want it.
Here is my jQuery code:
// Find the location of a div (x, y)
function divLoc(object) {
var topCord = 0;
// If browser supports offsetParent
if(object.offsetParent) {
do {
topCord += object.offsetHeight;
}
while (object === object.offsetParent);
return topCord;
}
}
$("#open").click(function () {
var newInfo = document.getElementById("newInfo");
var location = divLoc(newInfo);
$("#newInfo").slideToggle('slow', function() {
$('html,body').animate({ scrollTop: location }, 2000);
});
});
And I uploaded an example of the problem on jsFiddle: Here

You need change slide function:
$("#newInfo").slideToggle('slow', function() {
var self = $(this)
$('html,body').animate({ scrollTop: self.offset().top }, 2000);
});
http://jsfiddle.net/hSHz5/

Jquery show and hide elements according to position

I am trying to make a carousel of sorts. I am kind of stuck with hiding and displaying the next and precious buttons once a div moves to the far left and right of its container.
I think i have everything correct regarding calculating the widths but for some reason when you click the buttons, elements stay hidden irrespective of the conditional comments which should dictate when they should be hidden or shown.
Here is a link to what i have thus far. Click the MoveLeft and MoveRight buttons. http://www.ehbeat.com/test/
<script type="text/javascript">
$(document).ready(function () {
//Check width of Gallery div
var galleryWidth = $("#Gallery").innerWidth();
//Check width of GalleryItem
var galleryItemWidth = $(".GalleryItem").innerWidth();
//Check distance from left
var position = $('.GalleryItem').position();
var galleryItemLeft = position.left;
$(".MoveRight").click(function () {
$(".GalleryItem").animate({
"left": "+=50px"
}, "slow");
$(".GalleryItem2").animate({
"left": "+=100px"
}, "slow");
});
$(".MoveLeft").click(function () {
$(".GalleryItem").animate({
"left": "-=50px"
}, "slow");
$(".GalleryItem2").animate({
"left": "-=100px"
}, "slow");
});
$(".Controls").live('click', function () {
if (galleryItemLeft >= "0") {
$('.MoveRight').hide();
}
else {
$('.MoveRight').show();
}
});
if (galleryItemWidth == galleryWidth - galleryItemWidth) {
$('.MoveLeft').hide();
}
});
</script>

It looks like you setup all of your variables inside the $(document).ready() call.
This means that while they're being set on load, they're not getting updated with each click.
Your galleryItemLeft, galleryItemWidth and galleryItemWidth variables need to be updated on each click, so I'd recommend re-assigning the values in each click (by moving the assignment into the live functions)
Edit Also, as your last if statement is excluded from any click function, it'll need to be relocated to inside the live click events as well.
-Chris

Chris is right, code should look like this:
$(".Controls").live('click', function() {
position = $('.GalleryItem').position();
galleryItemLeft = position.left;
if(galleryItemLeft > "0") {
$('.MoveRight').hide();}
else{
$('.MoveRight').show();
}
if(galleryItemWidth == galleryWidth - galleryItemWidth) {
$('.MoveLeft').hide();
}
});