Question

I’m trying to create a nested navigation accordion using the UI. (There’s lots of alternative methods out there, but I’d like to stick with UI.) This is what I understand to be true – correct me if I’m wrong:
The basic form of the jQuery accordion on the official site is:

<div>
   <h3><a href="#">Section 1</a></h3>
   <div>
      Section 1 content
   </div>
   <h3><a href="#">Section 2</a></h3>
   <div>
      Section 2 content
   </div>
   ...
</div>

You can nest a second level accordion in each of the sections, e.g. where it says “Section 1 content”:

<div class='accordion'>  
  <h3><a href="#1">1</a></h3>
  <div>
    <div class='accordion'>
      <h3><a href="#1a">1.a</a></h3>
      <div> Data from 1a</div>
      <h3><a href="#1b">1.b</a></h3>
      <div></div>
    </div>
  </div>
  <h3><a href="#2">2</a></h3>
  <div>
    <div class='accordion'>
    ...

Every heading, though, wants to open its corresponding <div> even if it’s empty (e.g. #1b). Is it possible to allow the heading to maintain its attractive CSS-styled form, but just function as an href?

Thanks in advance.

Answer 1

This isn’t the correct method.

Just declare secondary accordion levels in the JS, ID the secondary div(s) accordingly, and then use the same code as in primary levels. It doesn’t matter what you put in the href.

e.g. $("#accordion,#subaccordion1,#subaccordion2,#subaccordion3").accordion({ });

See the example here.