The current list of collapsible and parent elements
I'm having trouble getting my lists to interact the way I need them. I need to keep the functionality I currently have by adding two more key parts.
I was unable to add these parts without losing my current functionality, or I completely broke the application.
I need to select / deselect all children items by clicking the parent.
I need the lists to be resettable, and when the parent has a child in the second list, I need the parent name to be above the children in that list.
If all children have left the list on the right, the parent should not appear there, but the parent should always be on the left.
The problem I actually ran into is that I try to use checkboxes and hide the style to reset it, but none of that worked and you can see why. code below.
Finally
-
Folding lists
-
Select / Deselect all children by clicking on the parent
-
the parent identifier appears in the left-hand list if it has 1 or more children.
HTML:
<div class="half">
<ol id="one">
<li id="alaska">
Alaska
<ul>
<li data-id="alaska"><input type="checkbox"> Children 1</li>
<li data-id="alaska"><input type="checkbox"> Children 2</li>
<li data-id="alaska"><input type="checkbox"> Children 3</li>
</ul>
</li>
<li id="washington">
Washington
<ul>
<li data-id="washington"><input type="checkbox"> Children 1</li>
<li data-id="washington"><input type="checkbox"> Children 2</li>
<li data-id="washington"><input type="checkbox"> Children 3</li>
</ul>
</li>
<li id="texas">
Texas
<ul>
<li data-id="texas"><input type="checkbox"> Children 1</li>
<li data-id="texas"><input type="checkbox"> Children 2</li>
<li data-id="texas"><input type="checkbox"> Children 3</li>
</ul>
</li>
</ol>
<button type="button" class="include">Include</button>
</div>
<div class="half">
<ol id="two"></ol>
<button type="button" class="exclude">Exclude</button>
</div>
CSS
.half {
display:block;
float:left;
width:50%;
}
JavaScript:
$(function(){
$('.include').click(function(e){
var $checks = $("input:checked");
$.each($checks, function(k,v){
var tempid = $(this).parent().data('id');
var element = $(this).parent().detach();
$('#two').append(element);
});
});
$('.exclude').click(function(e){
var $checks = $("input:checked");
$.each($checks, function(k,v){
var tempid = $(this).parent().data('id');
var element = $(this).parent().detach();
$('#one').find('#'+tempid+' ul').append(element);
});
});
});
source to share
Update
Here is an updated demo https://jsfiddle.net/dhirajbodicherla/hb9j8ua7/19/
Made several changes to the .exclude method
$('.exclude').click(function(e) {
var $checks = $("input:checked");
$.each($checks, function(k, v) {
var tempid = $(this).parent().data('id');
var element = $(this).parent().detach();
$('#one').find('#' + tempid + ' ul').append(element);
var items = $('#two #' + tempid + '-2').children('li');
if (items.length == 3 || items.length == 0) {
$('#two #' + tempid + '-2-heading').hide();
} else {
$('#two #' + tempid + '-2-heading').show();
}
});
});
Here is a demo https://jsfiddle.net/dhirajbodicherla/hb9j8ua7/16/
Something like this should
The HTML structure will look like this:
I modified it a bit to accommodate the collapse and validation of all children.
<li id="alaska">
<span class="parent">Alaska</span>
<span class="collapse">collapse</span>
<ul>
<li data-id="alaska">
<input type="checkbox">Children 1</li>
<li data-id="alaska">
<input type="checkbox">Children 2</li>
<li data-id="alaska">
<input type="checkbox">Children 3</li>
</ul>
</li>
Include script
$('.include').click(function(e) {
var $checks = $("input:checked");
$.each($checks, function(k, v) {
var tempid = $(this).parent().data('id');
var element = $(this).parent().detach();
if (!$('#two #' + tempid + '-2').length) {
var ol = $('<ol></ol>').attr('id', tempid + '-2');
var heading = $('<span />').text(tempid).attr('id', tempid + '-2-heading');
ol.prepend(heading);
$('#two').append(ol);
}
$('#two #' + tempid + '-2').append(element);
if ($('#two #' + tempid + '-2').children('li').length == 3) {
$('#two #' + tempid + '-2-heading').hide();
} else {
$('#two #' + tempid + '-2-heading').show();
}
});
});
When the enable button is clicked, the script will create a new ordered list based on the selected checkboxes. New ordered lists under #two will look like this: #alaska-2
. This is accomplished with
if (!$('#two #' + tempid + '-2').length) { // check if alaska-2 is present
var ol = $('<ol></ol>').attr('id', tempid + '-2');
var heading = $('<span />').text(tempid).attr('id', tempid + '-2-heading');
ol.prepend(heading);
$('#two').append(ol);
}
Besides creating a new ordered list #alaska-2
, so that the script would add a span that would be the name of the parent, and it would have a type id #alaska-2-heading
.
If all children are selected, the title will be hidden, which will be achieved with this script (which is also in the exclude script)
if ($('#two #' + tempid + '-2').children('li').length == 3) {
$('#two #' + tempid + '-2-heading').hide();
} else {
$('#two #' + tempid + '-2-heading').show();
}
exclude script
$('.exclude').click(function(e) {
var $checks = $("input:checked");
$.each($checks, function(k, v) {
var tempid = $(this).parent().data('id');
var element = $(this).parent().detach();
$('#one').find('#' + tempid + ' ul').append(element);
if ($('#two #' + tempid + '-2').children('li').length == 3) {
$('#two #' + tempid + '-2-heading').hide();
} else {
$('#two #' + tempid + '-2-heading').show();
}
});
});
check all children
$('#one span.parent').on('click', function() {
var checked = $(this).parent().find('input').prop('checked');
$(this).parent().find('input').prop('checked', !checked);
});
roll kids
$('#one span.collapse').on('click', function() {
$(this).parent().find('ul').slideToggle();
});
source to share
Here's a fiddle solution: https://jsfiddle.net/hb9j8ua7/1/
I will explain the important battles here.
HTML for one list item
<li id="alaska">
<span class="title">Alaska</span><span class="collapse">(V)</span>
<ul>
<li data-id="alaska"><input type="checkbox" /> Children 1</li>
<li data-id="alaska"><input type="checkbox" /> Children 2</li>
<li data-id="alaska"><input type="checkbox" /> Children 3</li>
</ul>
</li>
I added a wrapped heading to the range title
and added a button to switch collapse
to the list.
JS for include
$('.include').click(function(e){
var $checks = $("#one input:checked");
$.each($checks, function(k,v){
var $parent = $(this).parent();
var tempid = $parent.data('id');
var element = $parent.detach();
element.prepend('<span class="state-name">' + tempid + '</span><br>');
$('#two').append(element);
});
});
Reorganized the bit to capture the parent in a variable only once. Class priority state-name
for displaying state name over included children.
JS for collapse and auto select
$('.collapse').click(function() {
$(this).siblings('ul').slideToggle();
});
$('.title').click(function() {
$(this).siblings('ul').find('input').each(function() {
$(this).attr('checked', true);
});
});
Pressing the minimize button will open and close the sibling ul
Clicking on the header marks all child checkboxes as checked
.
I believe this will take care of all the problems you are having.
source to share