When the page loads all the images show up on "all" tab, i tried to change the javascript and html so it can show on "web-design" tab or any other tab i choose when the page loads and it only shows one image and not all of them like the "all" tab.

I have also removed the "all" tab on the html and change "all" to "web-design" in the script.js, but that didnt seem to work.

Heres what i have.

HTML code

 <h4 class="filter-portfolio"> <a class="all" id="active-imgs" href="#">All</a> / <a class="web-design" id="" href="#">Hunger</a> / <a class="logo-design" id="" href="#">Human Exploitation</a> / <a class="print-design" id="" href="#">Medical Missions</a> / <a class="substance-abuse" id="" href="#">Substance Abuse</a> / <a class="skill-training" id="" href="#">Skill Training</a> </h4>

Script.JS

 jQuery(document).ready(function() { $clientsHolder = $('ul.portfolio-img'); $clientsClone = $clientsHolder.clone(); $('.filter-portfolio a').click(function(e) { e.preventDefault(); $filterClass = $(this).attr('class'); $('.filter-portfolio a').attr('id', ''); $(this).attr('id', 'active-imgs'); if($filterClass == 'all'){ $filters = $clientsClone.find('li'); } else { $filters = $clientsClone.find('li[data-type~='+ $filterClass +']'); } $clientsHolder.quicksand($filters, {duration: 700}, function() { $("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false}); }); });

});