I'm trying to load multiple lists with quick sand. Basically I have a 3 divs and only 1 shows at a time and I am using hide/show to display them. The problem I have is that when I click to show a new div the quicksand feature has some strange behavior. The All link in my list(s) disappears (display:none) and when clicking to view another tab the other links are present but nothing shows until I click one of the tabs which does show content.
<ul id="filterOptions" class="filterOptions">
<li class="active"><a href="#" class="all">All</a></li>
<?php
$i = 0;
$pages = get_pages('child_of=181&sort_column=post_date&sort_order=desc&parent=181');
foreach($pages as $page){
$count = 0;
$id = $page->ID;
$count = count($children);
?>
<li>
<a href="#" class="<?php echo $page->ID; ?>"><?php echo $page->post_title ?> </a>|
</li>
<?php } ?>
</ul>
Here is the jquery
var $filterType = $('#filterOptions li.active a').attr('class');
var $holder = $('ul.ourHolder');
var $data = $holder.clone();
$('#filterOptions li a').click(function(e) {
$('#filterOptions li').removeClass('active');
var $filterType = $(this).attr('class');
$(this).parent().addClass('active');
if ($filterType == 'all') { var $filteredData = $data.find('#filterOptions li');} else {var $filteredData = $data.find('li[data-type=' + $filterType + ']');}
$holder.quicksand($filteredData, {duration: 800,easing: 'easeInOutQuad',adjustHeight: 'dynamic'});
return false;
});
Does anyone know if quicksand is affected with DOM changes, from past experiences I have had the same thing happen with islider
Also when clicking the all link to show all items for that particular list it will show all items from every list