두 개의 버튼을 사용하여 아코디언을 만드는 방법은 무엇입니까?

Question

jQuery 아코디언 메뉴에 대한 스크립트를 작성했습니다. 현재 작동 방식은 네 가지 메뉴 버튼이 있으며 각 버튼을 클릭하면 새로운 섹션이 나타납니다. 나는 아코디언을 앞뒤로 움직이는 단 두 개의 버튼이 있도록 스크립트를 변경하고 싶다. 따라서 다섯 개의 다른 섹션이있는 경우 버튼 하나가 다음 섹션으로 이동하고 하나는 이전 섹션으로 이동합니다. 나는 이것이 각각의 기능을 포함하고 있음을 알고 있지만 그것을 통합하는 방법을 모르겠습니다. 아래는 현재 스크립트와 HTML입니다.

$(document).ready(function() { 
      $('.tabs a').click(function(){ 
       var $this = $(this); 
       $('.panel').hide(); 
       $('.tabs a.active').removeClass('active'); 
       $this.addClass('active').blur(); 
       var panel = $this.attr('href'); 
       $(panel).fadeIn(1300); 
       return false; 
      });//end click 
      $('.tabs li:first a').click(); 
     }); // end ready 

<ul class="tabs"><!--Added class tabs and panel 1, 2, 3, 4--> 
      <li><a href="#panel1" class="">Home</a></li> 
      <li><a href="#panel2" class="">About</a></li> 
      <li><a href="#panel3" class="">Work</a></li> 
      <li><a href="#panel4" class="">Contact Me</a></li> 
     </ul> 

<div class='panel' id='panel1'> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
       laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
       ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
       laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. 
      </p> 
     </div> 

     <div class='panel' id='panel2'> 
      <p>hi 
      </p> 
     </div> 

     <div class='panel' id='panel3'> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
       laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
       ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
       laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. 
      </p> 
     </div> 

     <div class='panel' id='panel4'> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
       laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
       ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
       laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. 
      </p> 
     </div> 

     <div class='panel' id='panel5'> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
       laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
       ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
       laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. 
      </p> 
     </div> 

Answer 1

클러치 정말 감사했다이 http://jsfiddle.net/69D96/

HTML

<ul> 
    <li><a class="control" id="prev" href="#">Prev</a></li> 
    <li><a class="control" id="next" href="#">Next</a></li> 
</ul> 

<div class='panel' id='panel1'> 
1 
</div> 

<div class='panel' id='panel2'> 
2 
</div> 

<div class='panel' id='panel3'> 
3 
</div> 

<div class='panel' id='panel4'> 
4 
</div> 

그리고 자바 스크립트

$(document).ready(function() { 
    $('.control').click(function(){ 
     //handle click 
     var $this = $(this); 
     $('.panel').hide(); 

     var panel = $this.attr('href'); 
     $(panel).fadeIn(1300); 

     // update href of next and prev 
     var panelCount = $('.panel').size(); 
     var panelI = parseInt(panel.replace('#panel','')); 
     var prevI = panelI -1; 
     if (prevI <1) prevI=1; 
     var nextI = panelI +1; 
     if(nextI >= panelCount) nextI = panelCount -1; 

     $('#prev').attr('href', '#panel' + prevI); 
     $('#next').attr('href', '#panel' + nextI);   

     return false; 
    }).eq(0).attr('href', '#panel1').click(); 

});