Question

I’m using JQUERYUI and I have the following 2 lists with list items. By default, the first list contains all the items and all divs inside these list items are hidden. When I move items from this list to the second list, I want to show these divs in the list item (but only for that particular list item). When I move it back from the second list to the orginal list, I want to hide all the divs for this item again.I’m not sure how to hide these divs depending on each item. Any help would be much appreciated. My original list is:

<ul id="all-colls-list" class="droptrue">
                    <li class="sortedli">
                        Item 0
                                <div class="sel-total-on">&nbsp;</div>
                                <div class="sel-group-off">&nbsp;</div>
                                <div class="sel-sort-on">&nbsp;</div> 
                                <div class="sel-display-on">&nbsp;</div>
            </li>
    <li class="sortedli">
                        Item 1
                                <div class="sel-total-on">&nbsp;</div>
                                <div class="sel-group-off">&nbsp;</div>
                                <div class="sel-sort-on">&nbsp;</div> 
                                <div class="sel-display-on">&nbsp;</div>
            </li>
                    <li class="sortedli">
                        Item 3
                                <div class="sel-total-on">&nbsp;</div>
                                <div class="sel-group-off">&nbsp;</div>
                                <div class="sel-sort-on">&nbsp;</div> 
                                <div class="sel-display-on">&nbsp;</div>
            </li>
    </ul>

Second list is:

 <ul id="coll-selected-list" class="droptrue sort-drop" style="width:400px;">
</ul>

Receive Second List – Show the divs

receive: function (event, ui) {
 // Show the divs
$(ui.item).not(':has(.sel-total-on)').show();
}

Receive First List – Hide the divs

receive: function (event, ui) {
 // Hide the divs
$(ui.item).not(':has(.sel-total-on)').hide();
}

Answer 1

When you move from 1st list to 2nd just change the class of div from ‘hidden’ to ‘not hidden’ and vice versa

If you havent already, define class in css as shown below. Please check:You may already have some css classes that have this property in which case you need not define

.divhide{
   display:none
} 

when moving from 2nd list to first do add .divhide class and remove when moving from first to second.

$("div.myClass").addClass('.divhide');
$("div.myClass").removeClass('.divhide');