Javascript-форум - Аккордеон открывающийся вверх

Здравствуйте, уважаемые форумчане! Не могу решить проблему с аккордеоном, который должен раскрываться вверх. По клику на ссылку (Mail либо Mail2) выплывают сразу два sub-menu. Замена .next() на .prev() дает следующий результат: при клике на Mail выплывает Hotmail2, а при клике на Mail2 выплывает Hotmail. Версия jquery 1.7.1. При установке на выплывания вниз все работает отлично. Может кто сможет подсказать, что я делаю неправильно и направить в верное русло?

<style>
.accordion .service2 > .sub-menu {display: none;}
.accordion .service2:target > .sub-menu {display: block;}
</style>
<div class="accordion">
<div class="service2">
	<div class="sub-menu">
		<a href="#">Hotmail2</a>
	</div>
	<a href="#two">Mail2</a>
</div>
<div class="service2">
	<div class="sub-menu">
		<a href="#">Hotmail</a>
	</div>
	<a href="#two">Mail</a>
</div>		
</div>

$(document).ready(function() {
 var accordion_head = $('.accordion > .service2 > a'),
     accordion_body = $('.accordion .service2 > .sub-menu');
 accordion_head.on('click', function(event) {
  event.preventDefault();
  if ($(this).attr('class') == 'active'){
     accordion_body.slideUp('normal');
     $(this).removeClass('active');
     return false;
     }
  if ($(this).attr('class') != 'active'){
	 accordion_body.slideDown('normal');
     $(this).next().stop(true,true).slideUp('normal');
     accordion_head.removeClass('active');
     $(this).addClass('active');
     }
   });
});

<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .accordion .service2 > .sub-menu {display: none;} .accordion .service2 > a.active { background-color: #D3D3D3;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function() { var accordion_head = $('.accordion > .service2 > a'), accordion_body = $('.accordion .service2 > .sub-menu'); accordion_head.on('click', function(event) { event.preventDefault(); accordion_head.not($(this).toggleClass('active')).removeClass('active') accordion_body.not($(this).prev().slideToggle()).slideUp('normal'); }); }); </script> </head> <body> <div class="accordion"> <div class="service2"> <div class="sub-menu"> <a href="#">Hotmail2</a> </div> <a href="#two">Mail2</a> </div> <div class="service2"> <div class="sub-menu"> <a href="#">Hotmail</a> </div> <a href="#two">Mail</a> </div> </div> </body> </html>