We Keep Coding

Scroll page onClick of button to link on the same page

Here is my code, which does not show any error, but don't go to href location either.
Code works when I change href to "www.google.com". Why it does not work for same page link?
<form>
<a href="#DivIdToScroll">
<div id="btnLink" onClick="generateReport();"> Generate </div>
</a>
</form>
<script>
function generateReport()
{
window.location.href = '#DivIdToScroll';
}
</script>

I prepared a code snippet from the code you provided. I just made a long container, and inserted a div with the Id "DivIdToScroll" in the lower part. It seems to be working alright. You may have used a class instead of Id. Hope it helps.
function generateReport() {
window.location.href = '#DivIdToScroll';
}
.longContainer {
height: 1000px;
background: #eee;
}
.justTakingSpace {
height: 600px;
margin: 2px;
background: #ddd;
}
<div class="longContainer">
<form>
<a href="#DivIdToScroll">
<div id="btnLink" onClick="generateReport();">Generate</div>
</a>
</form>
<div class="justTakingSpace"></div>
<div id="DivIdToScroll">Oh you're here at "#DivIdToScroll". hello hello.</div>
</div>

Without Animation
function generateReport() {
window.location.href = '#DivIdToScroll';
}
<form>
<a href="#DivIdToScroll">
<div id="btnLink" onClick="generateReport();"> Generate </div>
</a>
<div style="height:500px"> </div>
<div id="DivIdToScroll">Go to link</div>
<div style="height:500px"> </div>
</form>
With Animation
function generateReport() {
$('html, body').animate({
scrollTop: $("#DivIdToScroll").offset().top
}, 1000);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<a href="#DivIdToScroll">
<div id="btnLink" onClick="generateReport();"> Generate </div>
</a>
<div style="height:500px"> </div>
<div id="DivIdToScroll">Go to link</div>
<div style="height:500px"> </div>
</form>

You can try this set of code, it has animation too.
<div id="DivIdToScroll">Go to link</div>
Here jquery code
$("#DivIdToScroll").click(function(){
$('html, body').animate({
scrollTop: $("#scroll_div").offset().top
}, 1000);
});
and here is the content div
<div id="scroll_div">Content</div>

Hide Other Divs when clicking new Div with the same class

I cannot figure out how to add in the functionality of closing other divs when I click a div new div with the same class. I know it should be simple, but just can't get it to work. Here is the fiddle - http://jsfiddle.net/dnym5p1s/
added correct link
<div class="option-heading">
<div class="arrow-up">▲</div>
<div class="arrow-down">▼</div>
<h1>Year1</h1>
</div>
<div class="option-content">
Content
</div>
<div class="option-heading">
<div class="arrow-up">▲</div>
<div class="arrow-down">▼</div>
<h1>Year2</h1>
</div>
<div class="option-content">
Content
</div>
$(".option-content").hide(); $(".arrow-up").hide();
$(".option-heading").click(function(){
$(this).next(".option-content").slideToggle(150);
$(this).find(".arrow-up, .arrow-down").toggle();
});

This would do it:
$(".option-content,.arrow-up").hide();
$(".option-heading").click(function () {
$(".option-content").not($(this).next()).slideUp(250);
$(".option-heading").not(this).find("div.arrow-up").hide();
$(".option-heading").not(this).find("div.arrow-down").show();
$(this).next(".option-content").slideToggle(250);
$(this).find(".arrow-up, .arrow-down").toggle();
});
jsFiddle example

Just add $(".option-content").hide(); on top of your click listener like so:
$(".option-heading").click(function(){
$(".option-content").hide();
$(this).next(".option-content").slideToggle(150);
$(this).find(".arrow-up, .arrow-down").toggle();
});

jQuery slide toggle change image onclick?

When I click on the .main_box div both arrow-up images change. I want to change only the first arrow-up image when I click on first .main_box div.
Does anyone know how to do this?
<div class="wrapper">
<div class="main_box">
<div class="arrow-up"><img src="arrow-up.png"></div>
<div class="arrow-down"><img src="arrow-down.png"></div>
</div>
<div class="sliding_box"></div>
</div>
<div class="wrapper">
<div class="main_box">
<div class="arrow-up"><img src="arrow-up.png"></div>
<div class="arrow-down"><img src="arrow-down.png"></div>
</div>
<div class="sliding_box"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".arrow-up").hide();
$(".main_box").click(function(){
$(this).siblings(".sliding_box").slideToggle(500);
$(".arrow-up, .arrow-down").toggle();
});
});
</script>

Change to this instead, this should only toggle sub-elements to the clicked element.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".arrow-up").hide();
$(".main_box").click(function(){
$(this).siblings(".sliding_box").slideToggle(500);
$(this).find(".arrow-up, .arrow-down").toggle();
});
});
</script>

Check this jsfiddle.net
JS
$(document).ready(function() {
$('#toggle3').click(function() {
$('.toggle3').slideToggle('1100');
var src = $("#bg3").attr('src') == "http://s8.postimg.org/maan1hkrl/box_arrow_down_green.jpg" ? "http://s12.postimg.org/jy2yiw6ix/box_arrow_up_green.jpg" : "http://s8.postimg.org/maan1hkrl/box_arrow_down_green.jpg";
$("#bg3").attr('src', src);
});
});
Other Code part you get From jsfiddle Link

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

jQuery Rotate Function Img Selecting

I'm trying to use jQuery to rotate an image 90 degrees upon click on my div.
Why doesn't it work?
Here's my HTML ...
<div class="class1">
<div class="class2">
<img id="whatever">
</div>
</div>
.. and here's my jQuery ;
jQuery(document).ready(function() {
jQuery(".class1").click(function()
{
jQuery(this).find('img').rotate({animateTo:-90})
});
});
If it helps,
http://code.google.com/p/jqueryrotate/wiki/Examples
NOTE: I need the code to FIND the first image...not just get the image by id, then rotate it.

According to #Abdullah Jibaly post and look at comment. I think you miss something like
<script src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
And here is an example to rotate at first image http://jsfiddle.net/oamiamgod/BeUBF/2/

Your code looks fine as is, I'd guess that the plugin is not being loaded or something else outside the given context went wrong.
To get the first img you can use:
jQuery(this).find('img').first().rotate({animateTo:-90})

// according to use it
<div class="class1">
<div class="class2">
<img src="https://www.google.com/images/srpr/logo3w.png">
<img src="https://www.google.com/images/srpr/logo3w.png" >
</div>
</div>
<button id='test'>click</button>
<script>
jQuery(document).ready(function() {
var setvalue=90;
jQuery("#test").click(function() {
jQuery('.class1').find('img').rotate({
animateTo: setvalue
});
setvalue=setvalue+90;
});
});
</script>
https://code.google.com/p/jqueryrotate/wiki/Examples

fisrt letter of class name should not be a number, change them to class1 and class2 instead and add quotation marks for animateTo value:
<div class="class1">
<div class="class2">
<img id="whatever">
</div>
</div>
$(document).ready(function() {
$(".class1").click(function(){
$(this).find('img').rotate({animateTo: "-90"})
});
});

try it
<div class="class1">
<div class="class2">
<img id="whatever">
</div>
</div>
jQuery(document).ready(function() {
jQuery(".class1").click(function()
{
$("#whatever").rotate(90);
});
});