hide/show issue with quicksand

51 views Asked by At

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

0

There are 0 answers