My goal is to extract content from a hidden div that contains an unordered list with specific classes and move certain list elements into placeholder divs based on checkbox values.
Initially, when no checkboxes are checked, I want all list elements in the hidden div to be displayed in the placeholder divs.
When checkboxes are selected, I want to transfer only those list elements from the hidden div whose classes correspond to the checkbox values into the placeholder divs. List elements in the hidden div without matching checkbox values should remain hidden.
Below is the HTML code:
<div id="php_hidden_results">
<ul id="vv_bg_results">
<li class="Sauces_Dips_Spreads Latin">Chili Lime Sour Cream</li>
<li class="Main_Dish Latin">Carnitas</li>
</ul>
<ul id="vv_content_wrapper_results">
<li class="Sauces_Dips_Spreads Latin"><div class="vv_content" id="content1">
<h2><a href="/v1.0/recipes/show_recipe.php?idrecipe=22">Chili Lime Sour Cream</a></h2>
<div class="vv_content_box">
<div class='subtitle'>Sauces Dips Spreads: Latin</div>
</div>
</li>
<li class="Main_Dish Latin"><div class="vv_content" id="content2">
<h2><a href="/v1.0/recipes/show_recipe.php?idrecipe=21">Slow Cooker Carnitas</a></h2>
<div class="vv_content_box">
<div class='subtitle'>Main Dish: Latin</div>
</div>
</li>
</ul>
</div>
<div id="test">Replace with checked value</div>
<div class="filterContainerBody">
<b>RECIPE TYPES</b><br />
<div class="horzRule"></div>
<ul class="checkfilter">
<li><input type='checkbox' value='Sauces_Dips_Spreads' />Sauces Dips Spreads</li>
<li><input type='checkbox' value='Main_Dish' />Main Dish</li>
</ul>
<b>CUISINE TYPES</b><br />
<div class="horzRule"></div>
<ul class="checkfilter">
<li><input type='checkbox' value='Latin' />Latin</li>
</ul>
</div><!-- end of filterContainer -->
<div id="vv_bg" class="vv_bg">
<ul class="results">
<li></li>
</ul>
</div>
<div id="vv_content_wrapper" class="vv_content_wrapper">
<ul class="results">
<li></li>
</ul>
</div>
The CSS code:
#php_hidden_results
{
display: none;
}
.filterContainerBody
{
width: 240px;
display: block;
background-color: #ffbb00;
}
Jquery script:
$(document).ready(function() {
$("ul.checkfilter :checkbox").click(function() {
var divhidden_bg_li = $('#php_hidden_results ul#vv_bg_results li');
$(".checkfilter :checkbox:checked").each(function(){
var filtervalue = $(this).val();
var filterclass = $(divhidden_bg_li).filter(filtervalue);
var divhidden_bg= $('#php_hidden_results ul#vv_bg_results').children("." + filtervalue);
$('#vv_bg ul.results').html(divhidden_bg);
var divhidden_content = $('#php_hidden_results ul#vv_content_wrapper_results').children("." + filtervalue);
$('#vv_content_wrapper').html(divhidden_content);
});
});
});
This Jquery script does not show all list elements initially or when no checkboxes are selected. It retrieves specific list elements from the hidden div upon the first check but becomes unresponsive. For more information and troubleshooting, see http://jsfiddle.net/Ayjent/ddsjB/5/
I am considering using AJAX for continuous server calls to avoid potential placeholder issues. Any assistance or guidance would be highly appreciated.