<div class="container-fluid content-container filter-container">
<div class="row filter-btn-row">
<div class="col-lg-12">
<a data-filter="all" class="btn btn-blue filter-btn selected">All</a>
<a data-filter="adult" class="btn btn-blue filter-btn">Adult</a>
<a data-filter="animals" class="btn btn-blue filter-btn">Animals</a>
<a data-filter="art" class="btn btn-blue filter-btn">Art</a>
<a data-filter="food" class="btn btn-blue filter-btn">Food</a>
<a data-filter="free" class="btn btn-blue filter-btn">Free</a>
<a data-filter="kids" class="btn btn-blue filter-btn">Kids</a>
<a data-filter="music" class="btn btn-blue filter-btn">Music</a>
<a data-filter="new" class="btn btn-blue filter-btn">New</a>
<a data-filter="ride" class="btn btn-blue filter-btn">Rides</a>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center filtered-cards">
<div id="card-placeholder"></div>
<div class="card" data-filter="family">
<div class="card-img-container"></div>
<div class="card-text-container">
<h2 class="card-title">Card Title</h2>
<p class="card-body"
data-orig-text="Get your Kicks on Route 66 and explore national parks, monuments and historical site while visiting native animals, including reptiles. Meet Smokey Bear and friends and learn how to protect, respect and connect with nature and its animals. WTF"
data-short-text="Get your Kicks on Route 66 and explore national parks, monuments and historical site while visiting native animals, including reptiles. Meet Smokey Bear and friends and l..."> </p>
<p class="card-location">
Location: Center Patio <br>
Time: Fri 12pm - 11pm | Sat & Sun 10am - 11pm | Labor Day 12pm - 11pm <br>
Cost: FREE <br>
Age: ALL AGES <br>
</p>
</div>
<div class="card-link-container">
<a class="more-link">More Info</a>
</div>
</div>
<div class="card" data-filter="music, art, free">
<div class="card-img-container"></div>
<div class="card-text-container">
<h2 class="card-title">Music, art, free</h2>
<p class="card-body">Nunc mollis tortor elit, quis maximus ipsum pretium eget. Vestibulum imperdiet sapien sit.</p>
</div>
<div class="card-link-container">
<a class="more-link">More Info</a>
</div>
</div>
<div class="card" data-filter="ride">
<div class="card-img-container"></div>
<div class="card-text-container">
<h2 class="card-title">Card Title</h2>
<p class="card-body"> Nunc mollis tortor elit, quis maximus ipsum pretium eget. Vestibulum imperdiet sapien sit amet tellus malesuada consequat. Nunc mollis tortor elit, quis maximus ipsum pretium eget. Vestibulum imperdiet sapien sit amet tellus malesuada consequat.</p>
</div>
<div class="card-link-container">
<a class="more-link">More Info</a>
</div>
</div>
<div class="card" data-filter="adult">
<div class="card-img-container"></div>
<div class="card-text-container">
<h2 class="card-title">Card Title</h2>
<p class="card-body"> Nunc mollis tortor elit, quis maximus ipsum pretium eget. Vestibulum imperdiet sapien sit amet tellus malesuada consequat. Nunc mollis tortor elit, quis maximus ipsum pretium eget. Vestibulum imperdiet sapien sit amet tellus malesuada consequat.</p>
</div>
<div class="card-link-container">
<a class="more-link">More Info</a>
</div>
</div>
<div class="card" data-filter="new">
<div class="card-img-container"></div>
<div class="card-text-container">
<h2 class="card-title">Card Title</h2>
<p class="card-body">Nunc mollis tortor elit, quis maximus ipsum pretium eget. Vestibulum imperdiet sapien sit amet tellus malesuada consequat. Nunc mollis tortor elit, quis maximus ipsum pretium eget. Vestibulum imperdiet sapien sit amet tellus malesuada consequat.</p>
</div>
<div class="card-link-container">
<a class="more-link">More Info</a>
</div>
</div>
<div class="card" data-filter="art">
<div class="card-img-container"></div>
<div class="card-text-container">
<h2 class="card-title">Mi POCO LA</h2>
<p class="card-body">Nunc mollis tortor elit, quis maximus ipsum pretium eget. Vestibulum imperdiet sapien sit amet tellus malesuada consequat. Nunc mollis tortor elit, quis maximus ipsum pretium eget. Vestibulum imperdiet sapien sit amet tellus malesuada consequat. <br>
</p>
</div>
<div class="card-link-container">
<a class="more-link">More Info</a>
</div>
</div>
<div class="card" data-filter="free">
<div class="card-img-container"></div>
<div class="card-text-container">
<h2 class="card-title">Mi POCO LA</h2>
<p class="card-body">Nunc mollis tortor elit, quis maximus ipsum pretium eget. Vestibulum imperdiet sapien sit amet tellus malesuada consequat. Nunc mollis tortor elit, quis maximus ipsum pretium eget. Vestibulum imperdiet sapien sit amet tellus malesuada consequat.<br>
</p>
</div>
<div class="card-link-container">
<a class="more-link">More Info</a>
</div>
</div>
<div class="card" data-filter="free">
<div class="card-img-container"></div>
<div class="card-text-container">
<h2 class="card-title">Mi POCO LA</h2>
<p class="card-body">CNunc mollis tortor elit, quis maximus ipsum pretium eget. Vestibulum imperdiet sapien sit amet tellus malesuada consequat. Nunc mollis tortor elit, quis maximus ipsum pretium eget. Vestibulum imperdiet sapien sit amet tellus malesuada consequat. <br>
</p>
</div>
<div class="card-link-container">
<a class="more-link">More Info</a>
</div>
</div>
<div class="card" data-filter="free">
<div class="card-img-container"></div>
<div class="card-text-container">
<h2 class="card-title">Mi POCO LA</h2>
<p class="card-body">Nunc mollis tortor elit, quis maximus ipsum pretium eget. Vestibulum imperdiet sapien sit amet tellus malesuada consequat. Nunc mollis tortor elit, quis maximus ipsum pretium eget. Vestibulum imperdiet sapien sit amet tellus malesuada consequat.<br>
</p>
</div>
<div class="card-link-container">
<a class="more-link">More Info</a>
</div>
</div>
<div class="card" data-filter="free">
<div class="card-img-container"></div>
<div class="card-text-container">
<h2 class="card-title">Mi POCO LA</h2>
<p class="card-body">Nunc mollis tortor elit, quis maximus ipsum pretium eget. Vestibulum imperdiet sapien sit amet tellus malesuada consequat. Nunc mollis tortor elit, quis maximus ipsum pretium eget. Vestibulum imperdiet sapien sit amet tellus malesuada consequat.<br>
</p>
</div>
<div class="card-link-container">
<a class="more-link">More Info</a>
</div>
</div>
<div class="card" data-filter="free">
<div class="card-img-container"></div>
<div class="card-text-container">
<h2 class="card-title">Mi POCO LA</h2>
<p class="card-body">Nunc mollis tortor elit, quis maximus ipsum pretium eget. Vestibulum imperdiet sapien sit amet tellus malesuada consequat. Nunc mollis tortor elit, quis maximus ipsum pretium eget. Vestibulum imperdiet sapien sit amet tellus malesuada consequat.<br>
</p>
</div>
<div class="card-link-container">
<a class="more-link">More Info</a>
</div>
</div>
</div>
</div>
</div>
.filter-container{
padding-bottom: 100px;
}
.card{
width: 300px;
height: 500px;
position: relative;
box-shadow:none;
display:inline-block;
margin: 10px;
border-radius: 5px;
background-color: #fff;
text-align: left;
box-shadow: 2px 3px 12px 0px rgba(0,0,0,0.75);
transition: all .8s;
}
.card-img-container{
background: url(https://picsum.photos/300/300) center center no-repeat;
background-size:cover;
height: 200px;
width: auto;
border-radius: 5px 5px 0 0;
filter: contrast(2) invert(0.2) sepia(0.7);
transition: .4s all;
}
.card:hover .card-img-container{
filter: none;
}
.card-text-container{
padding: 20px;
height:250px;
overflow: hidden;
}
.card-text-container.expanded{
height: 500px;
}
.card-text-container h2,
.card-text-container p{
color: #13505c;
}
.card-text-container h2{
letter-spacing: 1px;
font-size: 24px;
}
.card-text-container p{
letter-spacing: 1px;
line-height: 22px;
margin-top: 10px;
}
.card-link-container{
height:50px;
position:absolute;
bottom:0;
padding: 10px 20px 10px 20px;
}
.card-link-container a{
color: #892f23;
font-size: 18px;
font-weight: bold;
}
.more-link:hover{
cursor: pointer;
}
.filter-btn-row{
text-align: center;
margin-bottom: 30px;
}
.filter-btn{
margin:5px;
width: 100px;
font-size: 18px;
}
.selected{
background:#f0862c;
border: 2px solid #f0862c;
color:#fff;
box-shadow: none;
}
.card-location{
display:none;
font-weight: bold;
}
@media screen and (min-width: 0) and (max-width: 425px){
.filtered-cards{
padding:0;
}
.card{
margin: 0px;
margin-top: 20px;
border-radius: 5px;
background-color: #fff;
text-align: left;
box-shadow: 2px 3px 12px 0px rgba(0,0,0,0.75);
}
.filter-btn{
width: 100px;
font-size: 18px;
margin: 10px;
}
}
/** Remove img filter on mobile **/
@media screen and (min-width: 0) and (max-width: 768px){
.card-img-container{
filter: none;
}
}
View Compiled
$(document).ready(function(){
/*FILTER/CARDS PAGES JS************************************/
var filterBtns = $('.filter-btn');
var cards = $('.card');
filterBtns.click(function(event){
/*Takes care of highlighting current filter*/
event.preventDefault();
$('.selected').removeClass('selected');
$(this).addClass('selected');
/*Takes care of showing correct cards*/
var currentFilter = $(this).attr('data-filter');
if(currentFilter === 'all'){
jQuery.each(cards, function(i, v){
$(this).show();
});
}
else{
jQuery.each(cards, function(i, v){
/*If statement checks if any of the filters are in the currentFilter*/
if(v.getAttribute('data-filter').indexOf(currentFilter) >= 0){
$(this).show();
}
else{
$(this).hide();
}
});
}
});
/*Takes care of cutting extra chars from cards*/
var bodyText = $('.card-body');
bodyText.each (function () {
$(this).text( $(this).attr('data-short-text') );
});
/*Takes care of expanding card when more info is clicked*/
var moreLinks = $('.more-link');
moreLinks.click(function(event){
var cardClicked = $(this).parents('.card');
var textContainer = cardClicked.find('.card-text-container');
var cardClickText = cardClicked.find('.card-body');
var locationInfo = cardClicked.find('p.card-location');
/*Checks to see if card is already open*/
if($(this).html() === 'Back'){
if($(window).width() >= 768){
$("html, body").animate({ scrollTop: 400 }, "slow");
}
cardClickText.text(cardClickText.attr('data-short-text'));
locationInfo.fadeOut('easeOutExpo');
cardClicked.css({
'width': '300px',
'height' : '500px',
'margin' : '10px',
'display': 'inline-block'
});
cardClicked.find('.card-img-container').css({
'height' : '200px'
});
$(this).html('More Info');
textContainer.removeClass('expanded');
}
/*If it isnt open, then depending on device transform width and height or just height*/
else{
$(this).html('Back');
cardClickText.text(cardClickText.attr('data-orig-text'));
locationInfo.fadeIn('easeInQuint');
var pos = cardClicked.position();
/*If desktop*/
if($( window ).width() >= 768){
cardClicked.css({
'display': 'block',
'margin' : '0 auto',
'width': '750px',
'height' : '750px'
});
cardClicked.find('.card-img-container').css({
'height' : '350px'
});
}
/*If mobile*/
else{
cardClicked.css('height', '750px');
}
textContainer.addClass('expanded');
// $("html, body").animate({ scrollTop: pos.top + 900 }, "slow");
}
});
/**/
});
