<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Draggable components with jquery ui</h2> <ul id="sortable" class="ab sortable1"> <li class="ui-state-default" ><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1 <i class="toggle">+</i> <ul class="min_sort" ondrop="dDrop()"> <li>Sub 1 <i class="toggle">+</i> <ul class="min_sort2"> <li>Sub sub 1</li> <li>Sub sub 2</li> <li>Sub sub 3</li> <li>Sub sub 4</li> <li>Sub sub 5</li> </ul> </li> <li>Sub 2</li> <li>Sub 3</li> <li>Sub 4</li> <li>Sub 5</li> </ul> </li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2 <i class="toggle">+</i> <ul class="min_sort"> <li>Sub 1 <i class="toggle">+</i> <ul class="min_sort2"> <li>Sub sub 1</li> <li>Sub sub 2</li> <li>Sub sub 3</li> <li>Sub sub 4</li> <li>Sub sub 5</li> </ul> </li> <li>Sub 2</li> <li>Sub 3</li> <li>Sub 4</li> <li>Sub 5</li> </ul> </li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3 <i class="toggle">+</i> <ul class="min_sort"> <li>Sub 1</li> <li>Sub 2</li> <li>Sub 3</li> <li>Sub 4</li> <li>Sub 5</li> </ul> </li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4 <i class="toggle">+</i> <ul class="min_sort"> <li>Sub 1</li> <li>Sub 2</li> <li>Sub 3</li> <li>Sub 4</li> <li>Sub 5</li> </ul> </li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5 <i class="toggle">+</i> <ul class="min_sort"> <li>Sub 1</li> <li>Sub 2</li> <li>Sub 3</li> <li>Sub 4</li> <li>Sub 5</li> </ul> </li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6 <i class="toggle">+</i> <ul class="min_sort"> <li>Sub 1</li> <li>Sub 2</li> <li>Sub 3</li> <li>Sub 4</li> <li>Sub 5</li> </ul> </li> </ul> </div> </div> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

body{overflow-x: hidden; font-family: sans-serif;} .ab { list-style-type: none; margin: 0; padding: 0; width: 80%; margin-bottom: 50px; } .ab li { margin: 0 3px 3px 3px; padding: 0.4em; font-size: 22px; height: auto; border:solid 1px #000; background-color:#fff; cursor:pointer;} .ab li span { position: absolute; margin-left: -1.3em; } .min_sort{padding-left: 0px; margin-top: 15px; } .min_sort li {font-size: 18px; list-style-type: none;border:solid 1px #eaa0bd;} .ab li ul{display: none;} .toggle{float: right; margin-right: 5px;} .min_sort2{list-style-type: none; padding-left: 0px; margin-top: 20px;} .min_sort2 li{border:solid 1px #ffc107; font-size: 14px; background-color: #ffc107; color: #fff; }

$( function() { $( ".sortable1" ).sortable({ cursor:'move' }); $( ".min_sort" ).sortable({ placeholder: "ui-sortable-placeholder", connectWith: ".min_sort", stack: '.min_sort ul', cursor:'move' }); $( ".min_sort2" ).sortable({ placeholder: "ui-sortable-placeholder", connectWith: ".min_sort2", stack: '.min_sort2 ul', cursor:'move' }); } ); $(document).ready(function(){ $('.toggle').click(function(){ $(this).siblings('ul').toggle(500); }); });