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

问题描述

我有关于手风琴选项卡的查询。

我使用了手风琴菜单插件下面的代码我已经用于页面。

  [accordion] 
 [accordion title =about] **内容1 ** [/ accordion] 
 [accordion title =Home] **内容2 ** [/手风琴] 
 [/手风琴] 
  

网页如下所示：

我要先将这两个标签合拢，然后点击关于应该展开并显示内容。一旦点击首页，它应该会折叠关于标签页并展开首页

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

任何想法？
提前感谢

解决方案

我有两种不同的简单手风琴方法：

1）这里是具有关闭按钮的JsFiddle示例：

strong>

  $（'。content'）。slideUp（400）; // reset panels 
 
 $（'。panel'）。click（function（）{//打开
 var takeID = $（this）.attr（'id'）; //从id中获取id 
 $ '＃'+ 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）; //隐藏点击关闭按钮的面板
}）; 
  

html：

 < div class =panelid =panel1> panel1< / div> 
< div id =panel1C> content1 
< span id =panel1关闭> X< / span> 
< / div> 
< div class =panelid =panel2> panel2< / div> 
< div id =panel2C> content2 
< span id =panel2Close> X< / span> 
< / div> 
< div class =panelid =panel3> panel3< / div> 
< div id =panel3C> content3 
< span id =panel3Close> X< / span> 
< / div> 
  

-------

2）以下是 JsFiddle示例，其中 hover trigger：

  $（'。panel'）。hover（function（）{
 var takeID = $（this）.attr（'id'）; //从被点击的元素中获取id 
 $（'。content'）stop（false，true）.slideUp b $ b //用于阻止冲突的停止
 $（'＃'+ takeID +'C'）。stop（false，true）.slideDown（400）; // open 
 // show's clicked 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屋！