Foundation
-
FollowReply
-
Toggle/Filter Content On Button Click
byayezee Tuesday, October 07, 2014 at 12:21 PM EST
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>
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/