0

I am wondering if it is possible to hide items from the "all" filter. I have dynamic items being pulled into an isotope grid. At the end of this grid I have hard coded maps. Each of these maps I have gave a data-filter. So when a filter is clicked, the grid will appear with the map below it. My issue is, on the all filter. There are 8 maps appearing.

With isotope is it possible to hide these hardcoded maps from the "all" category?

CODE:

<div class="item stores-grid <?php foreach(get_the_category() as $category) {echo $category->slug . ' ';} ?><?php echo $postclass; ?>">
    <div class="threegrid-img">
        <a href="<?php the_permalink(); ?>"><?php getCustomField('Store Logo'); ?></a>
    </div>
</div>

<?php endwhile; ?>

<!-- BEGIN MAPS -->

<div class="item">
    <img style="border:none;" src="<?php bloginfo("template_url"); ?>/images/store-maps/all.png" alt="" />
</div>

<div class="item fashion">
    <img style="border:none;" src="<?php bloginfo("template_url"); ?>/images/store-maps/fashion.png" alt="" />
</div>

<div class="item food-drink-eateries">
    <img style="border:none;" src="<?php bloginfo("template_url"); ?>/images/store-maps/food-drink-eateries.png" alt="" />
</div>

<div class="item gifts">
    <img style="border:none;" src="<?php bloginfo("template_url"); ?>/images/store-maps/gifts.png" alt="" />
</div>

<div class="item grocery">
    <img style="border:none;" src="<?php bloginfo("template_url"); ?>/images/store-maps/grocery.png" alt="" />
</div>

<div class="item health-beauty">
    <img style="border:none;" src="<?php bloginfo("template_url"); ?>/images/store-maps/health-beauty.png" alt="" />
</div>

<div class="item leisure-entertainment">
    <img style="border:none;" src="<?php bloginfo("template_url"); ?>/images/store-maps/leisure-entertainment.png" alt="" />
</div>

<div class="item other">
    <img style="border:none;" src="<?php bloginfo("template_url"); ?>/images/store-maps/other.png" alt="" />
</div>

<div class="item shoe-stores">
    <img style="border:none;" src="<?php bloginfo("template_url"); ?>/images/store-maps/shoe-stores.png" alt="" />
</div>

<!-- END MAPS -->
kala233
  • 549
  • 4
  • 20

1 Answers1

0

You can hide elements outside of isotope and it should use that in its calculations. Try just hiding the elements in jquery and see if that works for you.

Hderms
  • 170
  • 1