Маркированный список в виде дерева c JS!

[bulat786]

Всем доброго времени суток!

Есть такой маркированный список:

<style>
.lecture_list, ul{
	list-style:none;
	margin-top:8px;
}
.lecture_list li{
	margin:0 0 10px 0;
}
.lecture_list .list_number{
	background:#F4F4F4;
	text-shadow:1px 1px 0px #ffffff;
	padding:0 4px;
	border:1px solid #ccc;
	border-radius:3px;
	margin-right:5px;
	font-size:11px;
	font-weight:bold;
}
</style>
<ul class="lecture_list">
     	<li><span class="list_number">1</span>
        <a href="#">Пример</a> 
        	<ul class="link_vlog">
            	<li><span class="list_number">1.2</span>Пример </li>
            </ul>
        </li>
        <li><span class="list_number">3</span>Пример</li>
         <li><span class="list_number">4</span>Пример
         <ul class="link_vlog">
            	<li><span class="list_number">1.2</span>Пример </li>
                <li><span class="list_number">1.3</span>Пример </li>
            </ul>
            </li>
          <li><span class="list_number">5</span>Пример</li>
           <li><span class="list_number">6</span>Пример</li>
     </ul>

По началу вложенные списки скрыты

<ul class="link_vlog">
            	<li><span class="list_number">1.2</span>Пример </li>
            </ul>

Нужен Js который при клике на <span class="list_number"> открывал и закрывал вложенные списки в текущем где он находится теге li.

Написал такой js но он неправильно работает! так как спаны все с одним классом он открывает только первое вложение!
Немогу решить эту проблему опыта не хватает помогите с использованием Jquery!

$('.list_number').toggle(function(){ 
	   var a = $(this).parent();
	   $('a + .link_vlog').hide();},
	   function(){
		   var a = $(this).parent();
	   $('a + ul').show();
		   }
	   );

[bulat786]

Тема закрыта!
Вот решение:

$('.list_number').click(function(){ 
  var node = $(this).parent().find('.link_vlog');
  node.css("display") == "none" ? node.show(1000) : node.hide(1000);
});