How can jquery accordion for nested tags ul li ... be reached?

Question

I am trying to show a jQuery accordion for my nested <ul> <li> tags ...

I found this site to display the accordion: http://jqueryui.com/demos/accordion/

But unfortunately, it uses the <h3> tags as headers.

In my actual code, I had only <ul> and <li> tags, I tried, but I can’t figure out which function to write for this.

My code style looks like this:

 <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> 

Answer 1

As far as I know, you should structure your document, as in the examples.
jQuery looks for a header with an anchor, followed by a div block, etc.

Example:

 <div id="accordion"> <h3><a href="#">First header</a></h3> <div>First content</div> <h3><a href="#">Second header</a></h3> <div>Second content</div> </div> 

So you have to use jQuery markup, otherwise jQuery will not recognize your content.
Another problem with your <ul> list is that jQuery does not know which part is the header and which part is the content.

At this point you have several options:

• You can find the corresponding lines of code in jQuery and edit them (not recommended)
• You can write your own accordion (based on the original)
• (If you really need your <ul> list), you can exchange the <ul> and <li> tags at run time with the corresponding jQuery tags
• Use jQuery markup (recommended)

Best wishes