JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<ul id="acc1">
    <li><a class="acc1">list01</a>
        <ul>
            <ul>
                        <li>sample01</li>
                        <li>sample01</li>
                        <li>sample01</li>
            </ul>
            
                          <!--入れ子-->
                <ul id="acc2">
                        <li><a class="acc2">list01-1</a>
                            <ul>
                                <li>sample01-1</li>
                                <li>sample01-1</li>
                                <li>sample01-1</li>
                            </ul>
                        </li>
                    
                        <li>
                            <a class="acc2">list01-2</a>
                            <ul>
                                <li>sample01-2</li>
                                <li>sample01-2</li>
                                <li>sample01-2</li>
                            </ul>
                        </li>
                </ul>
        </ul>
      </li>
    <li><a class="acc1">list02</a>
        <ul>
                      <li>sample02</li>
                      <li>sample02</li>
                      <li>sample02</li>
        </ul>
    </li>
</ul>

JavaScript

$(document).ready(function() {

    $("#acc1").accordion({
        active:"#acc1 li ul", 
        alwaysOpen: false,
        autoheight: false,
        header: 'a.acc1',
        clearStyle: true
    });
    $("#acc2").accordion({
        active:"#acc2 li ul", 
        alwaysOpen: false,
        autoheight: false,
        header: 'a.acc2',
        clearStyle: true
    });
});