Javascript-форум - Заголовок открытого спойлера был скрыт и наоборот

Подскажите пожалуйста, а как сделать так чтобы при нажатие на заголовок спойлера он исчезал и появлялось содержимое спойлера. А при нажатие на следующий заголовок, появлялся другой и исчезал этот.
Примерно как-то так) Пробовал так, но заголовок не появляется)
HTML:
<div class="box-letter">
<div class="letter open-letter">
<b>1</b><span></span>
</div>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<div class="box-letter">
<div class="letter open-letter">
<b>2</b><span></span>
</div>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>

CSS:

.box-letter ul {
display:none;
}
.open-letter span:after {
content:'раскрыть';
}

Script:

$(document).ready(function() {
$('.letter').click(function() {
$('div.box-letter ul').not($(this).parent().children('div.box-letter ul')).slideUp('normal').addClass('open-letter');
$(this).parent().children('div.box-letter ul').slideDown('normal');
$(this).addClass('open-letter');
$(this).removeClass('open-letter');
});
});

<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .box-letter ul { display:none; } .open-letter span:after { content:' раскрыть'; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script> $(document).ready(function() { $('.open-letter').click(function() { $('div.box-letter ul').not($(this).next()).slideUp('normal'); $('.letter').addClass('open-letter'); $(this).removeClass('open-letter').next().slideDown('normal'); }); }); </script> </head> <body> <div class="box-letter"> <div class="letter open-letter"> <b>1</b><span></span> </div> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> <div class="box-letter"> <div class="letter open-letter"> <b>2</b><span></span> </div> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body> </html>