Слайд-переключатель с несколькими разделителями

Question

Я пытаюсь переключить несколько div, в частности spGroupSubView (#) после нажатия ссылки на изображение с id spForumToggleIcon (#). Можно ли это сделать в функции?

<div class='spListSection'> 
    <div class='spGroupViewSection'> 
     <a id='spForumToggleIcon1' class='spToggleButton spRight' title='Click to expand forum group' rel='nofollow' href='#'><img src='images/sp_TogglePlus.png' alt=''/></a> 
     <img id='spGroupHeaderIcon1' class='spHeaderIcon spLeft' src='' alt='' /> 
     <div id='spGroupHeaderName1' class='spHeaderName'>Group 1</div> 
     <div style='clear: both;'></div> 
     <div id='spGroupSubView1' class='spSubGroupView'> 
      <div class='spGroupForumSection spOdd spUnreadPosts' id='topic1'> 
      </div> 
      <div class='spGroupForumSection spOdd spUnreadPosts' id='topic2'> 
      </div> 
      <div class='spGroupForumSection spOdd spUnreadPosts' id='topic3'> 
      </div> 
     </div> 
    </div> 
    <div class='spGroupViewSection'> 
     <a id='spForumToggleIcon3' class='spToggleButton spRight' title='Click to expand forum group' rel='nofollow' href='#'><img src='images/sp_TogglePlus.png' alt=''/></a> 
     <img id='spGroupHeaderIcon3' class='spHeaderIcon spLeft' src='' alt='' /> 
     <div id='spGroupHeaderName3' class='spHeaderName'>Group 2</div> 
     <div style='clear: both;'></div> 
     <div id='spGroupSubView3' class='spSubGroupView'> 
      <div class='spGroupForumSection spOdd spUnreadPosts' id='topic4'> 
      </div> 
      <div class='spGroupForumSection spOdd spUnreadPosts' id='topic5'> 
      </div> 
     </div> 
    </div> 
    <div class='spGroupViewSection'> 
     <a id='spForumToggleIcon4' class='spToggleButton spRight' title='Click to expand forum group' rel='nofollow' href='#'><img src='images/sp_TogglePlus.png' alt=''/></a> 
     <img id='spGroupHeaderIcon4' class='spHeaderIcon spLeft' src='' alt='' /> 
     <div id='spGroupHeaderName4' class='spHeaderName'>Group 3</div> 
     <div id='spGroupSubView4' class='spSubGroupView'> 
      <div class='spGroupForumSection spOdd spUnreadPosts' id='topic6'> 
      </div> 
     </div> 
    </div> 
</div> 

Я могу получить только один div, работающий в ходе исследования, которое я сделал, я буду признателен за любую помощь в этом.

Благодаря

Answer 1

Этот код будет делать slideToggle на .spSubGroupView DIV в том же .spGroupViewSection как .spToggleButton что щелкнули.

$('.spToggleButton').click(function() { 
    $(this).closest('.spGroupViewSection').find('.spSubGroupView').slideToggle(); 
}); 

Здесь вы можете увидеть, как он работает; http://jsfiddle.net/jfriend00/4Z8mY/.

Что это делает:

1. Установка обработчиков нажмите на .spToggleButton объекты
2. Начиная с объектом, который был нажимали, найти ближайший предок с классом spGroupViewSection.
3. Искать в этом объекте объекта, который соответствует .spSubGroupView.
4. Затем позвоните по номеру .slideToggle() на все, что соответствует.