jQuery ui手风琴 - 不同的折叠面板？

Question

I couldn't quite find what I was looking for on other questions so here goes.

Here is my code for an accordion using jQuery UI

    $('.blog-m-post').accordion({
      header: "h3",
      active: "true"
    });

My problem is that the docs state

Content panels must be the sibling immediately after their associated headers.

But with my markup, the content panel isn't immediately after the header, but one after that.

Example:

<div class="blog-m-post">
  <h3>My blog post title</h3>

  <div class="foo"> <!-- this becomes the collapsed element -->
    <p>Posted on: 8th Aug</p> <p>Author: John Doe</p>
  </div>

  <div class="content"> <!-- but I want THIS to collapse instead -->
    <p>my content inside here</p>
  </div>
</div>

How can I make the .content be the collapsable element as currently, it is .foo ?

The .foo needs to stay where it is in terms of ordering as it needs to be shown by default. .content is where the inner content will be that should collapse and open.

Answer 1

You can put <div class="foo"></div> inside a HEADER-div and keep the <div class="content"> as immediate sibling of that HEADER.

For example:

 <div class="blog-m-post">
      <div class="header">
        <h3>My blog post title</h3>
        <div class="foo"> <!-- this becomes the collapsed element -->
          <p>Posted on: 8th Aug</p> <p>Author: John Doe</p>
        </div>
      </div>

      <div class="content"> <!-- but I want THIS to collapse instead -->
        <p>my content inside here</p>
      </div>
 </div>

and the JQuery would be:

$('.blog-m-post').accordion({
      header: "div.header",
      active: "true"
});

Here is the JsFiddle

Answer 2

As docs state:

The markup of your accordion container needs pairs of headers and content panels

and also (as you already know)

Content panels must be the sibling immediately after their associated headers.

So you have to pair each header with the associated content to make it/them collapsible. Having an extra element inside the accordion and always visible requires quite a hack and I would suggest using toggle instead. Anyway, in accordion a solution would be to append the extra content after the creation and when activate remove it, refresh and append again. Ultimately, something like that:

 $('.blog-m-post').accordion({ header: "h3", active: "true", collapsible: true, create: function(){ $('h3').after('<div class="extra content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active"><div class="foo">Foo content here</div></div>'); }, activate: function( event, ui ) { $('.extra').remove(); $( ".blog-m-post" ).accordion( "refresh" ); if(ui.newHeader.length==1){//open $('.foo').remove(); $('.content').prepend('<div class="foo">Foo content here</div>') }else{ $('h3').after('<div class="extra content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active"><div class="foo">Foo content here</div></div>'); } } }); 

 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <div class="blog-m-post"> <h3>Accordion</h3> <div class="content"> <p>my content inside here</p> </div> </div>