We Keep Coding

Adding a Scroll to Next Element With the Same Class in jQuery

I am trying to add functionality of an arrow when clicked would scroll the user to the next section with a specified class. Each section would have the same class and an arrow with a class to target in jQuery. So I will have a few sections set up like this:
<section class="homeSection">
<div class="content">
//Content goes here
</div>
<div class="btnContainer">
<button class="arrow">Arrow</button>
</div>
</section>
<section class="homeSection">
<div class="content">
//Content goes here
</div>
<div class="btnContainer">
<button class="arrow">Arrow</button>
</div>
</section>
<section class="homeSection">
<div class="content">
//Content goes here
</div>
<div class="btnContainer">
<button class="arrow">Arrow</button>
</div>
</section>
//And so on...
So there will be around 5 sections set up with this setup with the same classes for the section and the button. What I am trying to do then is when the button of a section is clicked it will then scroll to the very next section below it and that cycle will continue until you reach the last section and the end of the page.
I at first had it set up like so:
$(".downArrow--hero").click(function() {
$('html, body').animate({
scrollTop: $(".cardItems").offset().top
}, 1000);
});
And it would target each section based on a unique class, but I now need to set it up with each section having the same class. What would be my best approach to this?

JQuery hide() not persisting after hide event

I'm trying to hide a visible section then show a hidden section using JQuery .hide() and .show(). When the event fires (on clicking an image) it only hides the visible section momentarily, then becomes visible again with the previously hidden section now visible below the first visible section. Based on the docs I've read and some tutorials I've watched this shouldn't be happening.
HTML:
<div class="transition-div">
<section class="project-section">
<div class="project-wrapper" id="project-one">
<div class="desc-text">
<h2>Header</h2>
</div>
<div class="project-image-wrapper">
<img class="project-image" id="project-img-one" src="images/img1.png">
<button class="project-button">Button
</button>
</div>
</div>
</section>
<section class="project-section hidden">
<div class="project-wrapper">
<div class="desc-text">
<h2>Header</h2>
<p>Some description text</p>
</div>
<div class="project-image-wrapper">
<img class="project-image" src="images/img1.png">
</div>
</div>
</section>
</div>
JS:
$('.hidden').hide();
var slideSection = function() {
$('.project-image-wrapper').click(function() {
var $parentDiv = $(this).parents('.transition-div');
var $childToShow = $parentDiv.find('.hidden');
var $childToHide = $childToShow.siblings('.project-section');
$childToHide.hide(300, hideActiveSection());
function hideActiveSection() {
$childToHide.addClass('hidden');
$childToShow.show(300, function() {
$(this).removeClass('hidden');
});
}
});
};
slideSection();
How would I get the section I want to hide to do so persistently until I click the currently visible project image to show it? Could my CSS be interfering with what I want to do here? If so I'll post the code. Thanks!

toggleClass used to execute two different scrollTop methods, not working

So I have the following function running and it works great. The selected div expands with the .slideToggle() function and the page slides down the body with the .animate() and .scrollTop() methods.
$('.pfitem').click(function(){
$(this).toggleClass('minimized maximized');
$(this).next().toggleClass('minimized maximized');
$(this).next().slideToggle(1200);
});
$('.pfitem.minimized').click(function(){
$('html, body').animate({
scrollTop: $(this).next().offset().top
}, 1200);
});
Now when I try to add this following code which from my understanding should slide the page back up to the div with an id of #portfolio it does nothing even though that now the class of the div that is targeted by the .click() function has been toggled to .pfitem.maximized, so the previous .click() function should not interfere.
$(".pfitem.maximized").click(function() {
$('html, body').animate({
scrollTop: $('#portfolio').offset().top
}, 1200);
});
This is a snippet of my HTML, I have tried to strip it of irrelevant information (I am using bootstrap and have left some bootstrap classes in the code)
<div class="page" id="portfolio">
<div class="content container">
<ul class="row npr">
<li class="container col-xs-12 col-sm-4 col-md-3 pfitem businesscards minimized">
<div class="orangeover">
<span>Business Cards</span>
</div>
</li>
<div class="container col-xs-12 maximizeitem minimized" id="businesscards">
<div class="maxicontent col-sm-4">
<h4>BUSINESS CARDS</h4>
<p>Some text goes here</p>
<p>Some text goes here</p>
</div><!-- maxicontent -->
<div class="maxiimages col-sm-8">
<button class="close"><span class="">X</span></button>
<img src="" class="">
</div><!-- maxiimages -->
</div><!-- container maximizeitem -->
</ul>
</div><!-- .content .container -->
</div><!-- #portfolio -->
This is my first post, I hope I have provided sufficient information.
Thanks

Since you want the selectors to be evaluated dynamically you will have to use event delegation
$(document).on('click', '.pfitem', function () {
$(this).toggleClass('minimized maximized');
$(this).next().toggleClass('minimized maximized');
$(this).next().slideToggle(1200);
});
$(document).on('click', '.pfitem.minimized', function () {
$('html, body').animate({
scrollTop: $(this).next().offset().top
}, 1200);
});

Use of the :not selector

I have a website with different sections. I have jQuery to slide between these sections.
But now I have a link in a section which points to another section.
HTML:
<div class="section" id="one">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<img src="button"/>
</div>
</div>
<div class="section" id="tow">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<img src="button"/>
</div>
</div>
<div class="section" id="ordernow">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<img src="button"/>
</div>
</div>
<div class="section" id="four">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<img src="button"/>
</div>
</div>
jQuery:
// onclick on an object with class "section" scroll to this object
$('div.section').click(function() {
$.scrollTo($(this), 800);
});
function scrollOrderNow(){
$('html,body').animate({
scrollTop: $("#ordernow").offset().top
}, 1000);
}
The problem is that if I click on the link scrollOrderNow() the page slides to the order page and than back to the section because the link is in that section.
Could you please help me figure this out?
Thank You!

You can use a single click handler and determine what to do based on which element was clicked inside the section. For this, it's best to distinguish the clickable element by giving it a class:
<div class="section" id="four">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<img src="button" class="scroll-to-order"/>
</div>
</div>
The the click handler code:
$('div.section').on('click', function(evt) {
var $target = $(evt.target);
if ($target.is('.scroll-to-order')) {
// the image itself was clicked, so scroll to ordernow
$('html,body').animate({
scrollTop: $("#ordernow").offset().top
}, 1000);
} else {
// something else inside the section was clicked, scroll to section
$.scrollTo($(this), 800);
}
});

You'll need to put return false to your scrollOrderNow() function.
function scrollOrderNow(){
$('html,body').animate({
scrollTop: $("#ordernow").offset().top
}, 1000);
return false;
}
This way, your links will not react and the hash will not be appended to the URL, leaving the page where it is.

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();
});