折叠和展开标签 jquery/简单的手风琴 [英] collapse and expand tabs jquery / simple accordion

问题描述

我有关于手风琴标签的问题..

我使用了 Accordion Menu 插件 下面的代码我用于页面中的选项卡.

 [手风琴][accordion title =about"]**Content 1** [/accordion][accordion title="Home"]**Content 2** [/accordion][/手风琴]

网页如下所示:

我希望首先折叠这两个选项卡.点击关于时，它应该展开并显示内容.点击主页后，它应该折叠关于标签并展开主页

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

有什么想法吗??提前致谢

解决方案

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

1) 这是带有关闭按钮的JsFiddle示例:

jQuery:

$('.content').slideUp(400);//重置面板$('.panel').click(function() {//打开var takeID = $(this).attr('id');//从点击的元素中获取id$('#'+takeID+'C').slideDown(400);//显示被点击的ele的id macthed div = 1second});$('span').click(function() {//关闭var takeID = $(this).attr('id').replace('Close','');//从 id = 1 秒开始关闭$('#'+takeID+'C').slideUp(400);//隐藏点击的关闭按钮面板});

html:

panel1
<div id="panel1C">content1<span id="panel1Close">X</span>

<div class="panel" id="panel2">panel2</div><div id="panel2C">content2<span id="panel2Close">X</span>

<div class="panel" id="panel3">panel3</div><div id="panel3C">content3<span id="panel3Close">X</span>

-------

2) 这是带有悬停触发器的JsFiddle示例:

$('.panel').hover(function() {var takeID = $(this).attr('id');//从点击的元素中获取id$('.content').stop(false,true).slideUp(400);//关闭//使用停止来防止冲突$('#'+takeID+'C').stop(false,true).slideDown(400);//打开//显示被点击的ele的id macthed div});

I have query regarding Accordion tabs ..

I have used Accordion Menu plugin Below code i have used for the tabs in the page .

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

The web page looks like as follows:

I want first both these tabs to be collapsed and.When clicked on ABOUT it should expand and display the content .And once clicked on Home it should collapse ABOUT tab and expand the home page

By jquery i can achieve this but i dont know which script to download and work with it..

Any ideas?? Thanks in advance

解决方案

I have two different methods for simple accordion; 1st with close button, 2nd is with hover trigger.

1) Here is JsFiddle example with close button:

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
});​

html:

<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>

-------

​ 2) Here is JsFiddle example with hover trigger:

$('.panel').hover(function() {
   var takeID = $(this).attr('id');//takes id from clicked ele
   $('.content').stop(false,true).slideUp(400);//close
   //used stop for prevent conflict
   $('#'+takeID+'C').stop(false,true).slideDown(400);//open
   //show's clicked ele's id macthed div
});​

这篇关于折叠和展开标签 jquery/简单的手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！