Menu icon Foundation
Toggle/Filter Content On Button Click

I was excited when I found this CodePen demonstrating this using Foundation http://codepen.io/elenanicole53/pen/ahbgL

However, I cannot get this to work. When I copy paste this code into a fresh install of Foundation I see the buttons but no grid of images. I see the css is calling for display none. Very confused. I also see extra classes being called like "controls" and "filter" are those inherited from Foundation?

Any help or clarification would be awesome.

 <div class="controls">
  <button class="filter" data-filter="all">All</button>
  <button class="filter" data-filter=".one">Category 1</button>
  <button class="filter" data-filter=".two">Category 2</button>
</div>


<ul id="Container" class="container small-block-grid-2 medium-block-grid-3 large-block-grid-4">
  <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix two"><img src='http://placehold.it/500x300'/></li>
    <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix one"><img src='http://placehold.it/400x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix one"><img src='http://placehold.it/400x300'/></li>
      <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix one"><img src='http://placehold.it/400x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
      <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix one"><img src='http://placehold.it/400x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
      <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix one"><img src='http://placehold.it/400x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
      <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix one"><img src='http://placehold.it/400x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
</ul>
            

         

togglefiltercontentbuttonjavascript

I was excited when I found this CodePen demonstrating this using Foundation http://codepen.io/elenanicole53/pen/ahbgL

However, I cannot get this to work. When I copy paste this code into a fresh install of Foundation I see the buttons but no grid of images. I see the css is calling for display none. Very confused. I also see extra classes being called like "controls" and "filter" are those inherited from Foundation?

Any help or clarification would be awesome.

 <div class="controls">
  <button class="filter" data-filter="all">All</button>
  <button class="filter" data-filter=".one">Category 1</button>
  <button class="filter" data-filter=".two">Category 2</button>
</div>


<ul id="Container" class="container small-block-grid-2 medium-block-grid-3 large-block-grid-4">
  <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix two"><img src='http://placehold.it/500x300'/></li>
    <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix one"><img src='http://placehold.it/400x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix one"><img src='http://placehold.it/400x300'/></li>
      <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix one"><img src='http://placehold.it/400x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
      <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix one"><img src='http://placehold.it/400x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
      <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix one"><img src='http://placehold.it/400x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
      <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix one"><img src='http://placehold.it/400x300'/></li>
    <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
  <li class="mix one"><img src='http://placehold.it/400x300'/></li>
  <li class="mix two"><img src='http://placehold.it/500x300'/></li>
</ul>
            

         
ayezee almost 5 years ago

Sigh, as with all things in life, a little more googling and I found what I needed

Download this and link it up

https://mixitup.kunkalabs.com/