Javascript 折叠和展开选项卡jquery/simple accordion

我对手风琴标签有疑问

我使用了手风琴菜单插件，下面是我用于页面选项卡的代码

  [accordions]
  [accordion title ="about"]**Content 1** [/accordion ]
  [accordion title="Home"]**Content 2** [/accordion ]
  [/accordions]

该网页如下所示：

我希望首先将这两个选项卡折叠并显示。单击“关于”时，它应展开并显示内容。单击“主页”后，它应折叠“关于”选项卡并展开主页

通过jquery我可以实现这一点，但我不知道下载哪个脚本并使用它

有什么想法吗？？

---

提前感谢

如果您使用jQuery UI Accordion，您可以向Accordion添加简单事件

或添加事件：

$( ".selector" ).bind( "accordioncreate", function(event, ui) {
  $( ".selector" ).accordion( "option", "active", -1 )
});

---

我有两种不同的方法来演奏简单的手风琴；第一个带关闭按钮，第二个带悬停触发器

1）这里是

jQuery:

$('.content').slideUp(400);//reset panels

$('.panel').click(function() {//open
   var takeID = $(this).attr('id');//takes id from clicked ele
   $('#'+takeID+'C').slideDown(400);
                             //show's clicked ele's id macthed div = 1second
});
$('span').click(function() {//close
   var takeID = $(this).attr('id').replace('Close','');
   //strip close from id = 1second
    $('#'+takeID+'C').slideUp(400);//hide clicked close button's panel
});​

<div class="panel" id="panel1">panel1</div>
<div id="panel1C">content1
  <span id="panel1Close">X</span>
</div>
<div class="panel" id="panel2">panel2</div>
<div id="panel2C">content2
  <span id="panel2Close">X</span>
</div>
<div class="panel" id="panel3">panel3</div>
<div id="panel3C">content3
  <span id="panel3Close">X</span>
</div>

html:

$('.content').slideUp(400);//reset panels

$('.panel').click(function() {//open
   var takeID = $(this).attr('id');//takes id from clicked ele
   $('#'+takeID+'C').slideDown(400);
                             //show's clicked ele's id macthed div = 1second
});
$('span').click(function() {//close
   var takeID = $(this).attr('id').replace('Close','');
   //strip close from id = 1second
    $('#'+takeID+'C').slideUp(400);//hide clicked close button's panel
});​

<div class="panel" id="panel1">panel1</div>
<div id="panel1C">content1
  <span id="panel1Close">X</span>
</div>
<div class="panel" id="panel2">panel2</div>
<div id="panel2C">content2
  <span id="panel2Close">X</span>
</div>
<div class="panel" id="panel3">panel3</div>
<div id="panel3C">content3
  <span id="panel3Close">X</span>
</div>

---

可能有折叠/展开手风琴的选项。手风琴插件本质上是可折叠和可扩展的。嗨，barlas..谢谢..因为我是用wordpress（cms）做的，所以我需要用php而不是html..：（…这正是我想要的….但在我的例子中，内容1，内容2是wordpress的页面….对不起，我的错误没有在前面提到..什么是iFrame？我必须写页面ID？等待页面加载并检查内部面板这些是来自网络右侧的页面（“如果我创建了3个页面（关于、主页、人民”）…在wordpress中，那么在这种情况下该怎么办？我很难理解您真正的问题..如果您不想创建新页面，请在div.contents中使用默认的html标记