Ashley Brown Ashley Brown - 4 months ago 22
CSS Question

jQuery ui accordion - different collapse panel?

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

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

Comments