<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/larpo1/pen/wWAvYW?depth=everything&order=popularity&page=57&q=product&show_forks=false" />
<link rel='stylesheet prefetch' href='https://entrusters.com/templates/yoo_moustache/css/theme.css'><link rel='stylesheet prefetch' href='https://entrusters.com/modules/mod_entrusters_shopbyurl/css/urldata.previewer.min.css'><link rel='stylesheet prefetch' href='https://entrusters.com/shop/products'>
<style class="cp-pen-styles">@import url('https://entrusters.com/templates/yoo_moustache/css/theme.css');
/* reset.css */
/* https://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
display: block;
}
body, * {
font-family: MuseoSans,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a, a:active, a:focus {
outline: none;
}
/* --------------------------------
Additional Styles
-------------------------------- */
*, *::after, *::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: #f03d6c;
text-decoration: none;
}
/* --------------------------------
Main Components
-------------------------------- */
.cd-header {
position: relative;
height: 150px;
background-color: #70e5cd;
}
.cd-header h1 {
color: #ffffff;
line-height: 150px;
text-align: center;
}
@media only screen and (min-width: 1170px) {
.cd-header {
height: 180px;
}
.cd-header h1 {
line-height: 180px;
}
}
.cd-main-content {
position: relative;
min-height: 100vh;
}
.cd-main-content:after {
content: "";
display: table;
clear: both;
}
.cd-main-content.is-fixed .cd-tab-filter-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.cd-main-content.is-fixed .cd-gallery {
padding-top: 76px;
}
.cd-main-content.is-fixed .cd-filter {
position: fixed;
height: 100vh;
overflow: hidden;
}
.cd-main-content.is-fixed .cd-filter form {
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.cd-main-content.is-fixed .cd-filter-trigger {
position: fixed;
}
@media only screen and (min-width: 768px) {
.cd-main-content.is-fixed .cd-gallery {
padding-top: 90px;
}
}
@media only screen and (min-width: 1170px) {
.cd-main-content.is-fixed .cd-gallery {
padding-top: 100px;
}
}
/* --------------------------------
xtab-filter
-------------------------------- */
.cd-tab-filter-wrapper {
background-color: #ffffff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
z-index: 1;
}
.cd-tab-filter-wrapper:after {
content: "";
display: table;
clear: both;
}
.cd-tab-filter {
/* tabbed navigation style on mobile - dropdown */
position: relative;
height: 50px;
width: 140px;
margin: 0 auto;
z-index: 1;
}
.cd-tab-filter::after {
/* small arrow icon */
content: '';
position: absolute;
right: 14px;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
display: inline-block;
width: 16px;
height: 16px;
background: url("https://entrusters.com/templates/yoo_moustache/html/com_entrusters_shop/products/ui-img/cd-icon-arrow.svg") no-repeat center center;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
pointer-events: none;
}
.cd-tab-filter ul {
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
box-shadow: inset 0 -2px 0 #f03d6c;
}
.cd-tab-filter li {
display: none;
}
.cd-tab-filter li:first-child {
/* this way the placehodler is alway visible */
display: block;
}
.cd-tab-filter a {
display: block;
/* set same size of the .cd-tab-filter */
height: 50px;
width: 140px;
line-height: 50px;
padding-left: 14px;
}
.cd-tab-filter a.selected {
background: #f03d6c;
color: #ffffff;
}
.cd-tab-filter.is-open::after {
/* small arrow rotation */
-webkit-transform: translateY(-50%) rotate(-180deg);
-moz-transform: translateY(-50%) rotate(-180deg);
-ms-transform: translateY(-50%) rotate(-180deg);
-o-transform: translateY(-50%) rotate(-180deg);
transform: translateY(-50%) rotate(-180deg);
}
.cd-tab-filter.is-open ul {
box-shadow: inset 0 -2px 0 #f03d6c, 0 2px 10px rgba(0, 0, 0, 0.2);
}
.cd-tab-filter.is-open ul li {
display: block;
}
.cd-tab-filter.is-open .placeholder a {
/* reduces the opacity of the placeholder on mobile when the menu is open */
opacity: .4;
}
@media only screen and (min-width: 768px) {
.cd-tab-filter {
/* tabbed navigation style on medium devices */
width: auto;
cursor: auto;
}
.cd-tab-filter::after {
/* hide the arrow */
display: none;
}
.cd-tab-filter ul {
background: transparent;
position: static;
box-shadow: none;
text-align: center;
}
.cd-tab-filter li {
display: inline-block;
}
.cd-tab-filter li.placeholder {
display: none !important;
}
.cd-tab-filter a {
display: inline-block;
padding: 0 1em;
width: auto;
color: #9a9a9a;
text-transform: uppercase;
}
.no-touch .cd-tab-filter a:hover {
color: #f03d6c;
}
.cd-tab-filter a.selected {
background: transparent;
color: #f03d6c;
/* create border bottom using box-shadow property */
box-shadow: inset 0 -2px 0 #f03d6c;
}
.cd-tab-filter.is-open ul li {
display: inline-block;
}
}
@media only screen and (min-width: 1170px) {
.cd-tab-filter {
/* tabbed navigation on big devices */
width: 100%;
float: right;
margin: 0;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.3s;
}
.cd-tab-filter.filter-is-visible {
/* reduce width when filter is visible */
width: 80%;
}
}
/* --------------------------------
xgallery
-------------------------------- */
.cd-gallery {
padding: 26px 5%;
width: 100%;
}
.cd-gallery li {
margin-bottom: 1.6em;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
display: none;
}
.cd-gallery li.gap {
/* used in combination with text-align: justify to align gallery elements */
opacity: 0;
height: 0;
display: inline-block;
}
.cd-gallery img {
display: block;
width: 100%;
}
.cd-gallery .cd-fail-message {
display: none;
text-align: center;
}
@media only screen and (min-width: 768px) {
.cd-gallery {
padding: 40px 3%;
}
.cd-gallery ul {
text-align: justify;
}
.cd-gallery ul:after {
content: "";
display: table;
clear: both;
}
.cd-gallery li {
width: 48%;
margin-bottom: 2em;
}
}
@media only screen and (min-width: 1170px) {
.cd-gallery {
padding: 50px 2%;
float: right;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.3s;
}
.cd-gallery li {
width: 23%;
}
.cd-gallery.filter-is-visible {
/* reduce width when filter is visible */
width: 80%;
}
}
/* --------------------------------
xfilter
-------------------------------- */
.cd-filter {
position: absolute;
top: 0;
left: 0;
width: 280px;
height: 100%;
background: #ffffff;
box-shadow: 4px 4px 20px transparent;
z-index: 2;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform 0.3s, box-shadow 0.3s;
-moz-transition: -moz-transform 0.3s, box-shadow 0.3s;
transition: transform 0.3s, box-shadow 0.3s;
}
.cd-filter::before {
/* top colored bar */
content: '';
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 100%;
background-color: #444444;
z-index: 2;
}
.cd-filter form {
padding: 70px 20px;
}
.cd-filter .cd-close {
position: absolute;
top: 0;
right: 0;
height: 50px;
line-height: 50px;
width: 60px;
color: #ffffff;
text-align: center;
background: #444444;
opacity: 0;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
transition: opacity 0.3s;
z-index: 3;
}
.no-touch .cd-filter .cd-close:hover {
background: #666666;
}
.cd-filter.filter-is-visible {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
}
.cd-filter.filter-is-visible .cd-close {
opacity: 1;
}
@media only screen and (min-width: 1170px) {
.cd-filter {
width: 20%;
}
.cd-filter form {
padding: 70px 10%;
}
}
.cd-filter-trigger {
position: absolute;
top: 0;
left: 0;
height: 50px;
line-height: 50px;
width: 60px;
/* image replacement */
overflow: hidden;
text-indent: 100%;
color: transparent;
white-space: nowrap;
background: transparent url("https://entrusters.com/templates/yoo_moustache/html/com_entrusters_shop/products/ui-img/cd-icon-filter.svg") no-repeat center center;
z-index: 3;
}
.cd-filter-trigger.filter-is-visible {
pointer-events: none;
}
@media only screen and (min-width: 1170px) {
.cd-filter-trigger {
width: auto;
left: 2%;
text-indent: 0;
color: #9a9a9a;
text-transform: uppercase;
padding-left: 24px;
background-position: left center;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.no-touch .cd-filter-trigger:hover {
color: #f03d6c;
}
.cd-filter-trigger.filter-is-visible, .cd-filter-trigger.filter-is-visible:hover {
color: #ffffff;
}
}
/* --------------------------------
xcustom form elements
-------------------------------- */
.cd-filter-block {
margin-bottom: 1.6em;
}
.cd-filter-block h4 {
/* filter block title */
position: relative;
margin-bottom: .2em;
padding: 10px 0 10px 20px;
color: #9a9a9a;
text-transform: uppercase;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
.no-touch .cd-filter-block h4:hover {
color: #f03d6c;
}
.cd-filter-block h4::before {
/* arrow */
content: '';
position: absolute;
left: 0;
top: 50%;
width: 16px;
height: 16px;
background: url("https://entrusters.com/templates/yoo_moustache/html/com_entrusters_shop/products/ui-img/cd-icon-arrow.svg") no-repeat center center;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
.cd-filter-block h4.closed::before {
-webkit-transform: translateY(-50%) rotate(-90deg);
-moz-transform: translateY(-50%) rotate(-90deg);
-ms-transform: translateY(-50%) rotate(-90deg);
-o-transform: translateY(-50%) rotate(-90deg);
transform: translateY(-50%) rotate(-90deg);
}
.cd-filter-block input, .cd-filter-block select,
.cd-filter-block .radio-label::before,
.cd-filter-block .checkbox-label::before {
/* shared style for input elements */ border-radius: 0;
background-color: #ffffff;
border: 2px solid #e6e6e6;
}
.cd-filter-block input[type='search'],
.cd-filter-block input[type='text'],
.cd-filter-block select {
width: 100%;
padding: .8em;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
box-shadow: none;
}
.cd-filter-block input[type='search']:focus,
.cd-filter-block input[type='text']:focus,
.cd-filter-block select:focus {
outline: none;
background-color: #ffffff;
border-color: #f03d6c;
}
.cd-filter-block input[type='search'] {
/* custom style for the search element */
border-color: transparent;
background-color: #e6e6e6;
/* prevent jump - ios devices */
font-size: 1rem !important;
}
.cd-filter-block input[type='search']::-webkit-search-cancel-button {
display: none;
}
.cd-filter-block .cd-select {
/* select element wrapper */
position: relative;
}
.cd-filter-block .cd-select::after {
/* switcher arrow for select element */
content: '';
position: absolute;
z-index: 1;
right: 14px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
display: block;
width: 16px;
height: 16px;
background: url("https://entrusters.com/templates/yoo_moustache/html/com_entrusters_shop/products/ui-img/cd-icon-arrow.svg") no-repeat center center;
pointer-events: none;
}
.cd-filter-block select {
cursor: pointer;
}
.cd-filter-block select::-ms-expand {
display: none;
}
.cd-filter-block .list li {
position: relative;
margin-bottom: .8em;
}
.cd-filter-block .list li:last-of-type {
margin-bottom: 0;
}
.cd-filter-block input[type=radio],
.cd-filter-block input[type=checkbox] {
/* hide original check and radio buttons */
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
opacity: 0;
z-index: 2;
}
.cd-filter-block .checkbox-label,
.cd-filter-block .radio-label {
padding-left: 24px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.cd-filter-block .checkbox-label::before, .cd-filter-block .checkbox-label::after,
.cd-filter-block .radio-label::before,
.cd-filter-block .radio-label::after {
/* custom radio and check boxes */
content: '';
display: block;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.cd-filter-block .checkbox-label::before,
.cd-filter-block .radio-label::before {
width: 16px;
height: 16px;
left: 0;
}
.cd-filter-block .checkbox-label::after,
.cd-filter-block .radio-label::after {
/* check mark - hidden */
display: none;
}
.cd-filter-block .checkbox-label::after {
/* check mark style for check boxes */
width: 16px;
height: 16px;
background: url("https://entrusters.com/templates/yoo_moustache/html/com_entrusters_shop/products/ui-img/cd-icon-check.svg") no-repeat center center;
}
.cd-filter-block .radio-label::before,
.cd-filter-block .radio-label::after {
border-radius: 50%;
}
.cd-filter-block .radio-label::after {
/* check mark style for radio buttons */
width: 6px;
height: 6px;
background-color: #ffffff;
left: 5px;
}
.cd-filter-block input[type=radio]:checked + label::before,
.cd-filter-block input[type=checkbox]:checked + label::before {
border-color: #f03d6c;
background-color: #f03d6c;
}
.cd-filter-block input[type=radio]:checked + label::after,
.cd-filter-block input[type=checkbox]:checked + label::after {
display: block;
}
@-moz-document url-prefix() {
/* hide custom arrow on Firefox - select element */
.cd-filter-block .cd-select::after {
display: none;
}
}
</style></head><body>
<body>
<header>
</header>
<main class="cd-main-content">
<div class="cd-tab-filter-wrapper">
<div class="cd-tab-filter">
<ul class="cd-filters">
<li class="placeholder">
<a data-type="all" href="#0">All</a> <!-- selected option on mobile -->
</li>
<li class="filter"><a class="selected" href="#0" data-type="all">All</a></li>
<li class="filter" data-filter=".color-1"><a href="#0" data-type="color-1">Apple Store</a></li>
<li class="filter" data-filter=".color-2"><a href="#0" data-type="color-2">Amazon.com</a></li>
</ul> <!-- cd-filters -->
</div> <!-- cd-tab-filter -->
</div> <!-- cd-tab-filter-wrapper -->
<section class="cd-gallery">
<ul>
<li class="mix color-1 check1 radio2 option3"><img src="https://entrusters.com/templates/yoo_moustache/html/com_entrusters_shop/products/ui-img/img-1.jpg" alt="Image 1"></li>
<li class="mix color-2 check2 radio2 option2"><img src="https://entrusters.com/templates/yoo_moustache/html/com_entrusters_shop/products/ui-img/img-2.jpg" alt="Image 2"></li>
<li class="mix color-1 check3 radio3 option1"><img src="https://entrusters.com/templates/yoo_moustache/html/com_entrusters_shop/products/ui-img/img-3.jpg" alt="Image 3"></li>
<li class="mix color-1 check3 radio2 option4"><img src="https://entrusters.com/templates/yoo_moustache/html/com_entrusters_shop/products/ui-img/img-4.jpg" alt="Image 4"></li>
<li class="mix color-1 check1 radio3 option2"><img src="https://entrusters.com/templates/yoo_moustache/html/com_entrusters_shop/products/ui-img/img-5.jpg" alt="Image 5"></li>
<li class="mix color-2 check2 radio3 option3"><img src="https://entrusters.com/templates/yoo_moustache/html/com_entrusters_shop/products/ui-img/img-6.jpg" alt="Image 6"></li>
<li class="mix color-2 check2 radio2 option1"><img src="https://entrusters.com/templates/yoo_moustache/html/com_entrusters_shop/products/ui-img/img-7.jpg" alt="Image 7"></li>
<li class="mix color-1 check1 radio3 option4"><img src="https://entrusters.com/templates/yoo_moustache/html/com_entrusters_shop/products/ui-img/img-8.jpg" alt="Image 8"></li>
<li class="mix color-2 check1 radio2 option3"><img src="https://entrusters.com/templates/yoo_moustache/html/com_entrusters_shop/products/ui-img/img-9.jpg" alt="Image 9"></li>
<li class="mix color-1 check3 radio2 option4"><img src="https://entrusters.com/templates/yoo_moustache/html/com_entrusters_shop/products/ui-img/img-10.jpg" alt="Image 10"></li>
<li class="mix color-1 check3 radio3 option2"><img src="https://entrusters.com/templates/yoo_moustache/html/com_entrusters_shop/products/ui-img/img-11.jpg" alt="Image 11"></li>
<li class="mix color-2 check1 radio3 option1"><img src="https://entrusters.com/templates/yoo_moustache/html/com_entrusters_shop/products/ui-img/img-12.jpg" alt="Image 12"></li>
<li class="gap"></li>
<li class="gap"></li>
<li class="gap"></li>
</ul>
<button class="uk-button uk-button-large uk-button-outline ladda-button uk-width-1-1"><i class="uk-icon uk-icon-plus"></i> SHOW MORE</button>
<div class="cd-fail-message">No results found</div>
</section> <!-- cd-gallery -->
<div class="cd-filter">
<form>
<div class="cd-filter-block">
<h4>Choose a Store</h4>
<ul class="cd-filter-content cd-filters list">
<li>
<input class="filter" data-filter="" type="radio" name="radioButton" id="radio1" checked>
<label class="radio-label" for="radio1">All</label>
</li>
<li>
<input class="filter" data-filter=".radio2" type="radio" name="radioButton" id="radio2">
<label class="radio-label" for="radio2">Apple Store</label>
</li>
<li>
<input class="filter" data-filter=".radio3" type="radio" name="radioButton" id="radio3">
<label class="radio-label" for="radio3">Amazon.com</label>
</li>
<li>
<input class="filter" data-filter=".radio4" type="radio" name="radioButton" id="radio4" disabled>
<label class="radio-label" for="radio4" >BestBuy.com</label>
</li>
</ul> <!-- cd-filter-content -->
</div> <!-- cd-filter-block -->
<div class="cd-filter-block">
<h4>Filter Results</h4>
<div class="cd-filter-content">
<input type="search" placeholder="Search Amazon.com">
</div> <!-- cd-filter-content -->
</div> <!-- cd-filter-block -->
<div class="cd-filter-block">
<h4>Categories</h4>
<ul class="cd-filter-content cd-filters list">
<li>
<input class="filter" data-filter=".check1" type="checkbox" id="checkbox1">
<label class="checkbox-label" for="checkbox1">iPhone</label>
</li>
<li>
<input class="filter" data-filter=".check2" type="checkbox" id="checkbox2">
<label class="checkbox-label" for="checkbox2">iPad</label>
</li>
<li>
<input class="filter" data-filter=".check3" type="checkbox" id="checkbox3">
<label class="checkbox-label" for="checkbox3">Apple TV</label>
</li>
<li>
<input class="filter" data-filter=".check3" type="checkbox" id="checkbox3">
<label class="checkbox-label" for="checkbox3">Macbook</label>
</li>
<li>
<input class="filter" data-filter=".check3" type="checkbox" id="checkbox3">
<label class="checkbox-label" for="checkbox3">Macbook Air</label>
</li>
<li>
<input class="filter" data-filter=".check3" type="checkbox" id="checkbox3">
<label class="checkbox-label" for="checkbox3">Macbook Pro</label>
</li>
<li>
<input class="filter" data-filter=".check3" type="checkbox" id="checkbox3">
<label class="checkbox-label" for="checkbox3">Apple Accessories</label>
</li>
</ul> <!-- cd-filter-content -->
</div> <!-- cd-filter-block -->
<div class="cd-filter-block">
<h4>Currency</h4>
<div class="cd-filter-content">
<div class="cd-select cd-filters">
<select class="filter" name="selectThis" id="selectThis">
<option value="">ARS</option>
<option value=".option1">USD</option>
<option value=".option2">BRL</option>
<option value=".option3">EUR</option>
<option value=".option4">GBP</option>
</select>
</div> <!-- cd-select -->
</div> <!-- cd-filter-content -->
</div> <!-- cd-filter-block -->
</form>
<a href="#0" class="cd-close"><i class="icon ent-close"></i> close </a>
</div> <!-- cd-filter -->
<a href="#0" class="cd-filter-trigger">Filters</a>
</main> <!-- cd-main-content -->
</body>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script><script src='https://cdn.jsdelivr.net/jquery.mixitup/2.1.11/jquery.mixitup.min.js'></script>
<script >jQuery(document).ready(function($){
//open/close lateral filter
$('.cd-filter-trigger').on('click', function(){
triggerFilter(true);
});
$('.cd-filter .cd-close').on('click', function(){
triggerFilter(false);
});
function triggerFilter($bool) {
var elementsToTrigger = $([$('.cd-filter-trigger'), $('.cd-filter'), $('.cd-tab-filter'), $('.cd-gallery')]);
elementsToTrigger.each(function(){
$(this).toggleClass('filter-is-visible', $bool);
});
}
//mobile version - detect click event on filters tab
var filter_tab_placeholder = $('.cd-tab-filter .placeholder a'),
filter_tab_placeholder_default_value = 'Select',
filter_tab_placeholder_text = filter_tab_placeholder.text();
$('.cd-tab-filter li').on('click', function(event){
//detect which tab filter item was selected
var selected_filter = $(event.target).data('type');
//check if user has clicked the placeholder item
if( $(event.target).is(filter_tab_placeholder) ) {
(filter_tab_placeholder_default_value == filter_tab_placeholder.text()) ? filter_tab_placeholder.text(filter_tab_placeholder_text) : filter_tab_placeholder.text(filter_tab_placeholder_default_value) ;
$('.cd-tab-filter').toggleClass('is-open');
//check if user has clicked a filter already selected
} else if( filter_tab_placeholder.data('type') == selected_filter ) {
filter_tab_placeholder.text($(event.target).text());
$('.cd-tab-filter').removeClass('is-open');
} else {
//close the dropdown and change placeholder text/data-type value
$('.cd-tab-filter').removeClass('is-open');
filter_tab_placeholder.text($(event.target).text()).data('type', selected_filter);
filter_tab_placeholder_text = $(event.target).text();
//add class selected to the selected filter item
$('.cd-tab-filter .selected').removeClass('selected');
$(event.target).addClass('selected');
}
});
//close filter dropdown inside lateral .cd-filter
$('.cd-filter-block h4').on('click', function(){
$(this).toggleClass('closed').siblings('.cd-filter-content').slideToggle(300);
})
//fix lateral filter and gallery on scrolling
$(window).on('scroll', function(){
(!window.requestAnimationFrame) ? fixGallery() : window.requestAnimationFrame(fixGallery);
});
function fixGallery() {
var offsetTop = $('.cd-main-content').offset().top,
scrollTop = $(window).scrollTop();
( scrollTop >= offsetTop ) ? $('.cd-main-content').addClass('is-fixed') : $('.cd-main-content').removeClass('is-fixed');
}
/************************************
MitItUp filter settings
More details:
https://mixitup.kunkalabs.com/
or:
https://codepen.io/patrickkunka/
*************************************/
buttonFilter.init();
$('.cd-gallery ul').mixItUp({
controls: {
enable: false
},
callbacks: {
onMixStart: function(){
$('.cd-fail-message').fadeOut(200);
},
onMixFail: function(){
$('.cd-fail-message').fadeIn(200);
}
}
});
//search filtering
//credits https://codepen.io/edprats/pen/pzAdg
var inputText;
var $matching = $();
var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
$(".cd-filter-content input[type='search']").keyup(function(){
// Delay function invoked to make sure user stopped typing
delay(function(){
inputText = $(".cd-filter-content input[type='search']").val().toLowerCase();
// Check to see if input field is empty
if ((inputText.length) > 0) {
$('.mix').each(function() {
var $this = $(this);
// add item to be filtered out if input text matches items inside the title
if($this.attr('class').toLowerCase().match(inputText)) {
$matching = $matching.add(this);
} else {
// removes any previously matched item
$matching = $matching.not(this);
}
});
$('.cd-gallery ul').mixItUp('filter', $matching);
} else {
// resets the filter to show all item if input is empty
$('.cd-gallery ul').mixItUp('filter', 'all');
}
}, 200 );
});
});
/*****************************************************
MixItUp - Define a single object literal
to contain all filter custom functionality
*****************************************************/
var buttonFilter = {
// Declare any variables we will need as properties of the object
$filters: null,
groups: [],
outputArray: [],
outputString: '',
// The "init" method will run on document ready and cache any jQuery objects we will need.
init: function(){
var self = this; // As a best practice, in each method we will asign "this" to the variable "self" so that it remains scope-agnostic. We will use it to refer to the parent "buttonFilter" object so that we can share methods and properties between all parts of the object.
self.$filters = $('.cd-main-content');
self.$container = $('.cd-gallery ul');
self.$filters.find('.cd-filters').each(function(){
var $this = $(this);
self.groups.push({
$inputs: $this.find('.filter'),
active: '',
tracker: false
});
});
self.bindHandlers();
},
// The "bindHandlers" method will listen for whenever a button is clicked.
bindHandlers: function(){
var self = this;
self.$filters.on('click', 'a', function(e){
self.parseFilters();
});
self.$filters.on('change', function(){
self.parseFilters();
});
},
parseFilters: function(){
var self = this;
// loop through each filter group and grap the active filter from each one.
for(var i = 0, group; group = self.groups[i]; i++){
group.active = [];
group.$inputs.each(function(){
var $this = $(this);
if($this.is('input[type="radio"]') || $this.is('input[type="checkbox"]')) {
if($this.is(':checked') ) {
group.active.push($this.attr('data-filter'));
}
} else if($this.is('select')){
group.active.push($this.val());
} else if( $this.find('.selected').length > 0 ) {
group.active.push($this.attr('data-filter'));
}
});
}
self.concatenate();
},
concatenate: function(){
var self = this;
self.outputString = ''; // Reset output string
for(var i = 0, group; group = self.groups[i]; i++){
self.outputString += group.active;
}
// If the output string is empty, show all rather than none:
!self.outputString.length && (self.outputString = 'all');
// Send the output string to MixItUp via the 'filter' method:
if(self.$container.mixItUp('isLoaded')){
self.$container.mixItUp('filter', self.outputString);
}
}
};
//# sourceURL=pen.js
</script>
</body></html>
