Nestable List

Nestable list are powered with Nestable Jquery plugin made by David Bushell

Nestable Plugin Documentation.

How to use create a nestable list?

You just have to add nestable class to your list, no need to include files.

<div class="dd nestable">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
            <div class="dd-handle">Item 1</div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle">Item 2</div>
            <ol class="dd-list">
                <li class="dd-item" data-id="3">
                    <div class="dd-handle">Item 3</div>
                </li>
                <li class="dd-item" data-id="4">
                    <div class="dd-handle">Item 4</div>
                    <ol class="dd-list">
                        <li class="dd-item" data-id="5">
                            <div class="dd-handle">Item 5</div>
                        </li>
                    </ol>
                </li>
                <li class="dd-item" data-id="6">
                    <div class="dd-handle">Item 6</div>
                </li>
                <li class="dd-item" data-id="7">
                    <div class="dd-handle">Item 7</div>
                </li>
            </ol>
        </li>
        <li class="dd-item" data-id="8">
            <div class="dd-handle">Item 8</div>
        </li>
    </ol>
</div>

Dark Look

You prefer dark style? Just add nestable-dark class to your list:

<div class="dd nestable">
    <ol class="dd-list nestable-dark">
        // Your list content
    </ol>
</div>

Drag & Drop Option

You can add drap and drop functionnality. Here is a simple example:

<div class="dd nestable">
    <ol class="dd-list">
        <li class="dd-item dd3-item" data-id="1">
            <div class="dd-handle dd3-handle">Item 1</div>
            <div class="dd3-content">Item 1</div>
        </li>
        <li class="dd-item dd3-item" data-id="2">
            <div class="dd-handle dd3-handle">Item 2</div>
            <div class="dd3-content">Item 2</div>
            <ol class="dd-list">
                <li class="dd-item dd3-item" data-id="3">
                    <div class="dd-handle dd3-handle">Item 3</div>
                    <div class="dd3-content">Item 3</div>
                </li>
                <li class="dd-item dd3-item" data-id="4">
                    <div class="dd-handle dd3-handle">Item 4</div>
                    <div class="dd3-content">Item 4</div>
                </li>
            </ol>
        </li>
    </ol>
</div>