"product filters"
Bootstrap 4.1.1 Snippet by wbitholedotbe

<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>

Related: See More


Questions / Comments: