collapse and expand tabs jquery / simple accordion

问题

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

回答1:

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

回答2:

In case you use jQuery UI Accordion, you can add simple event to your accordion.

or add event:

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

来源：https://stackoverflow.com/questions/11504193/collapse-and-expand-tabs-jquery-simple-accordion

标签

javascript

jquery

html

css

accordion