Jquery Accordion功能

Question

我是javascript和jquery的新手，我正在尝试使用jquery实现手风琴，我正在尝试做的是在页面上加载第一个面板应该打开和剩下的面板应该关闭，当我点击第一个面板中的下一个部分第二个面板应该打开，第一个应该关闭，当我点击第二个面板中的下一个部分时，第一个和第二个应该关闭，当我点击最后一个面板时，第一个应该打开，剩下应该关.. 这是我的代码JsFiddle

Answer 1

为什么不试试jquery UI，

JSFiddle

此处Reference 这是一些代码，

<div id="accordion">
  <h3>Section 1</h3>
  <div>
      <button id="first">Next Session</button>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
      <button id="second">Next Session</button>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
      <button id="third">First Session</button>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>

</div>

<强> Jquery的：

$(function() {
    $( "#accordion" ).accordion({ active: 0 });
    $("#first").click(function(){
    $( "#accordion" ).accordion( "option", "active", 1 );
    }); 
     $("#second").click(function(){
    $( "#accordion" ).accordion( "option", "active", 2 );
    }); 
    $("#third").click(function(){
    $( "#accordion" ).accordion( "option", "active", 0 );
    });

});

<强>更新

我创建了没有jquery UI的http://jsfiddle.net/dhana36/UYbMH/8/ JsFiddle

$("#nextsection").click(function(){

    $( ".panel__body:eq(0)" ).toggle('slow');
    $( ".panel__body:eq(1)" ).toggle('slow');
});
$("#nextsection1").click(function(){

    $( ".panel__body:eq(1)" ).toggle('slow');
    $( ".panel__body:eq(2)" ).toggle('slow');
});
$("#nextsection2").click(function(){

    $( ".panel__body:eq(2)" ).toggle('slow');
    $( ".panel__body:eq(0)" ).toggle('slow');
});