JavaScript Question

I am not an expert at all with JS, but I created a page that has headings, and then when you click on the heading, a hidden div will appear. I was having problems with it filling the page correctly and with the image next to the heading changing from a side arrow to a down arrow, but I figured all of that out.

My problem I'm having now is when you click on one of the headings and it expands the content, it takes you back to the top of the page. This can all be viewed at starmoose.com/jobs.html.

It doesn't matter if you're selecting one of the top jobs, but if you scroll down and select one of the bottom jobs, it jumps you back to the top of the page, forcing you to scroll back down to read the job description. I know there is a way to not make it jump, but not sure if it's in the JavaScript or what. Code can be seen below.

Code:

$(document).ready(function initJobPostings(){
		  $('.job_posting h2').click(function(e){
			  var $_pn=$(this.parentNode);
			  if($_pn.is('.job_posting_expanded')){
				  $_pn.removeClass('job_posting_expanded');
				  $_pn.find('.details').slideUp();
				  }
		      else{
				  $_pn.addClass('job_posting_expanded');
				  $_pn.find('.details').slideDown();
			  }
		  });
      });

 

Never mind, I fixed the issue.