Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!-- filters to add: artists met/taken pictures with, arena tour or not, year -->
<header>
  <div class="filters">

    <li class="option-set"><a href="#" data-filter-value="" class="reset selected">Show All</a></li>
<!--     <li class="option-set"><a href="#" data-filter-value=".fav">Favourites</a></li> -->

    
    <ul class="filter option-set exclusive" data-filter-group="status">
      <li><b>SHOW</b></li>
      <li><a href="#" data-filter-value="" class="selected">All</a></li>
      <li><a href="#" data-filter-value=".music">Music</a></li>
      <li><a href="#" data-filter-value=".theatre">Theatre</a></li>
      <li><a href="#" data-filter-value=".comedy">Comedy</a></li>
    </ul>


    <ul class="filter option-set exclusive" data-filter-group="content">
      <li><b>LOCATION</b></li>
      <li><a href="#" data-filter-value="" class="selected">All</a></li>
      <li><a href="#" data-filter-value=".IND">India</a></li>
      <li><a href="#" data-filter-value=".CHI">Chicago</a></li>
      <li><a href="#" data-filter-value=".DC">DC</a></li>
      <li><a href="#" data-filter-value=".TN">Tennessee</a></li>
      <li><a href="#" data-filter-value=".NYC">NYC</a></li>
      <li><a href="#" data-filter-value=".STL">St. Louis</a></li>
      <li><a href="#" data-filter-value=".FL">Florida</a></li>
      <li><a href="#" data-filter-value=".LDN">London</a></li>
    </ul>

    <ul class="filter option-set combine" data-filter-group="fandom">
      <li><b>TELL ME MORE</b></li>
      <li><a href="#" data-filter-value="" class="selected">All</a></li>
      <li><a href="#" data-filter-value=".vid">With Video</a></li>
      <li><a href="#" data-filter-value=".fest">Festival</a></li>
      <li><a href="#" data-filter-value=".rep">Repeats</a></li>
    </ul>    
    
    
    
  </div>

  <div class="log"></div>

</header>







<div class="grid">
  
  
  
  <div class="item theatre LDN">
    <p><i>4th November 2019</i></p>
    <h2>WICKED</h2></br>
    The Victoria Apollo Theatre (London) </br></br>
  </div>  
  
  

    <div class="item music LDN rep">
    <p><i>2nd Nov 2019</i></p>
    <h2>Little Mix x2</h2></br>
    The O2 Arena (London, UK) </br></br>
  </div>
  

  <div class="item music DC rep">
    <p><i>4th June 2019</i></p>
    <h2>Raja Kumari x2</h2></br>
    Pie Shop Studios (Washington, D.C.) </br></br>
  </div>
 

  <div class="item music fest TN rep">
    <p><i>15th June 2019</i></p>
    <h2>BONNAROO 2019</h2>
  <i>Little Simz x2, Bishop Briggs, Hozier, Kacey Musgraves, Odesza, Post Malone, The Lonely Island, Zhu, Juice Wrld</i> </br></br> 
  Great Stage Park (Tennessee) </br></br>
  </div> 


  <div class="item music fest FL rep">
    <p><i>4th May 2019</i></p>
    <h2>SUNFEST 2019</h2>
  <i>MAX x2, Diplo</i> </br></br> 
  Palm Beach (Florida) </br></br>
  </div>  


  
  <div class="item music DC vid">
    <p><i>2nd May 2019</i></p>
    <h2>Maren Morris ft. Raelynn</h2></br>
    The Anthem (Washington, D.C.) </br></br>
  </div>

  

<div class="item music fest NYC">
    <p><i>26th April 2019</i></p>
    <h2>CMT NEXT WOMEN IN COUNTRY 2019</h2>
  <i>Hannah Ellis, Clare Dunn, Cassadee Pope</i> </br></br> 
  Gramercy Theatre (NYC) </br></br>
  </div>


<div class="item music fest DC">
    <p><i>5th April 2019</i></p>
    <h2>BLOSSOM BASH 2019</h2>
  <i>Meghan Trainor, MAX, Jake Miller</i> </br></br> 
  The Anthem (Washington, D.C.) </br></br>
  </div>


  <div class="item theatre FL">
    <p><i>31st March 2019</i></p>
    <h2>DEAR EVAN HANSEN</h2></br>
    Broward Center For The Performing Arts, Ft. Lauderdale (Florida) </br></br>
  </div>


  <div class="item music vid DC rep">
    <p><i>26th March 2019</i></p>
    <h2>Ariana Grande x3 ft. Normani, Social House</h2></br>
    Capital One Arena (Washington, D.C.) </br></br>
<a href="https://www.youtube.com/watch?v=zCnZl5Du_zg">video</a>
  </div>


  <div class="item music DC">
    <p><i>24th March 2019</i></p>
    <h2>Nils Frahm</h2></br>
    9:30 Club (Washington, D.C.) </br></br>
  </div>


  <div class="item music rep DC">
    <p><i>10th March 2019</i></p>
    <h2>Sabrina Carpenter x2 ft. Maggie Lindemann</h2></br>
    9:30 Club (Washington, D.C.) </br></br>
  </div>


  <div class="item music DC">
    <p><i>20th February 2019</i></p>
    <h2>MNEK ft. Raja Kumari</h2></br>
    Union Stage (Washington, D.C.) </br></br>
  </div>


<div class="item music fest FL rep">
    <p><i>16th December 2018</i></p>
    <h2>JINGLE BALL 2018</h2>
  <i>Marshmello, Shawn Mendes, Calvin Harris, Khalid, Alessia Cara x2, Sabrina Carpenter, Bebe Rexha, Jack & Jack, Bazzi</i> </br></br> 
  BB&T Center, Ft. Lauderdale (Florida) </br></br>
  </div>


  <div class="item music DC">
    <p><i>29th November 2018</i></p>
    <h2>Travis Scott ft. Sheck Wes</h2></br>
    Capital One Arena (Washington, D.C.) </br></br>
  </div>


  <div class="item music DC">
    <p><i>14th November 2018</i></p>
    <h2>Louis the Child</h2></br>
    9:30 Club (Washington, D.C.) </br></br>
  </div>


  <div class="item music DC">
    <p><i>9th November 2018</i></p>
    <h2>Lake Street Dive ft. Jalen N'Gonda</h2></br>
    The Anthem (Washington, D.C.) </br></br>
  </div>


  <div class="item music FL">
    <p><i>28th October 2018</i></p>
    <h2>J Balvin ft. Anitta, Bad Bunny, Nicki Jam, De La Ghetto, Zion y Lennox, Wisin y Yandel,  </h2></br>
    AmericanAirlines Arena, Miami (Florida) </br></br>
  </div>


  <div class="item comedy DC">
    <p><i>13th October 2018</i></p>
    <h2>Whose Live Anyway? (Jeff B. Davis, Greg Proops, Joel Murray, Dave Foley)</h2></br>
    Warner Theatre (Washington, D.C.) </br></br>
  </div>


<div class="item music fest DC vid">
    <p><i>6th and 7th October 2018</i></p>
    <h2>ALL THINGS GO 2018</h2>
  <i>Carly Rae Jepsen, Maggie Rogers, Billie Eilish, MisterWives, Betty Who, Jessie Reyez, Alma, LPX, Kaye, Oshun, Ravyn Lenae, Cautious Clay</i> </br></br> 
  Union Market (Washington, D.C.) </br></br>
<a href="https://www.youtube.com/watch?v=sQvw7mItj00">video</a>
  </div>


  <div class="item music DC">
    <p><i>17th August 2018</i></p>
    <h2>Mura Masa ft. April + VISTA</h2></br>
    9:30 Club (Washington, D.C.) </br></br>
  </div>


  <div class="item comedy DC">
    <p><i>2nd August 2018</i></p>
    <h2>David Cross</h2></br>
    Warner Theatre (Washington, D.C.) </br></br>
  </div>


  <div class="item theatre CHI rep">
    <p><i>3rd July 2017</i></p>
    <h2>WAITRESS x2</h2></br>
    Cadillac Palace Theatre (Chicago) </br></br>
  </div>


  <div class="item theatre CHI">
    <p><i>2nd July 2017</i></p>
    <h2>HEARTBREAK HOTEL</h2></br>
    Broadway Playhouse (Chicago) </br></br>
  </div>


  <div class="item music CHI">
    <p><i>29th June 2018</i></p>
    <h2>Bryan Adams</h2></br>
    The Pavilion (Highland Park) </br></br>
  </div>


  <div class="item music CHI rep">
    <p><i>1st June 2018</i></p>
    <h2>Taylor Swift ft. Charli xcx x2, Camila Cabello</h2></br>
    Soldier Field (Chicago) </br></br>
  </div>


<div class="item music fest CHI">
    <p><i>2nd June 2018</i></p>
    <h2>DILLO DAY 2018</h2>
  <i>Young the Giant, Cupcakke, Tokimonsta, Daniel Caesar</i> </br></br> 
  Northwestern University (Evanston, IL) </br></br>
  </div>


  <div class="item music CHI">
    <p><i>8th May 2018</i></p>
    <h2>Madison Beer</h2></br>
    Bottom Lounge (Chicago) </br></br>
  </div>


  <div class="item music CHI rep">
    <p><i>3rd May 2018</i></p>
    <h2>Hayley Kiyoko x2 ft. Allie X</h2></br>
    House of Blues (Chicago) </br></br>
  </div>


  <div class="item music CHI">
    <p><i>13th April 2018</i></p>
    <h2>Nina Nesbitt</h2></br>
    Beat Kitchen (Chicago) </br></br>
  </div>


 <div class="item comedy CHI">
    <p><i>16th March 2018</i></p>
    <h2>Riz Ahmed</h2></br>
    Northwestern University (Evanston, IL) </br></br>
  </div>


  <div class="item music CHI">
    <p><i>14th March 2018</i></p>
    <h2>Eagles</h2></br>
    United Center (Chicago) </br></br>
  </div>


  <div class="item music CHI">
    <p><i>9th March 2018</i></p>
    <h2>Demi Lovato ft. Kehlani, DJ Khaled</h2></br>
    Allstate Arena (Chicago) </br></br>
  </div>


 <div class="item comedy CHI">
    <p><i>1st March 2018</i></p>
    <h2>Jenny Slate, Gabe Liedman</h2></br>
    Northwestern University (Evanston, IL) </br></br>
  </div>


  <div class="item comedy CHI">
    <p><i>1st February 2018</i></p>
    <h2>John Mulaney ft. Max Silvestri</h2></br>
    The Chicago Theatre (Chicago) </br></br>
  </div>


  <div class="item music CHI">
    <p><i>19th November 2017</i></p>
    <h2>Halsey ft. Charli xcx, PartyNextDoor</h2></br>
    Allstate Arena (Chicago) </br></br>
  </div>


  <div class="item music CHI">
    <p><i>24th October 2017</i></p>
    <h2>Katy Perry ft. Noah Cyrus</h2></br>
    United Center (Chicago) </br></br>
  </div>


  <div class="item music CHI">
    <p><i>22nd October 2017</i></p>
    <h2>PVRIS ft. LIGHTS, Flint Eastwood</h2></br>
    The Riviera Theatre (Chicago) </br></br>
  </div>


  <div class="item theatre CHI rep">
    <p><i>11th October 2017</i></p>
    <h2>HAMILTON x2</h2></br>
    The PrivateBank Theatre (Chicago) </br></br>
  </div>


  <div class="item comedy CHI">
    <p><i>7th October 2017</i></p>
    <h2>Trevor Noah</h2></br>
    Northwestern University (Evanston, IL) </br></br>
  </div>


  <div class="item music CHI">
    <p><i>13th October 2017</i></p>
    <h2>Lil Uzi Vert, MØ</h2></br>
    The Riviera Theatre (Chicago) </br></br>
  </div>


  <div class="item theatre NYC">
    <p><i>26th August 2017</i></p>
    <h2>WAITRESS</h2></br>
    The Brooks Atkinson Theatre (NYC) </br></br>
  </div>


  <div class="item theatre NYC rep">
    <p><i>25th August 2017</i></p>
    <h2>THE PLAY THAT GOES WRONG x2</h2></br>
    The Lyceum Theatre (NYC) </br></br>
  </div>


  <div class="item theatre NYC">
    <p><i>23rd August 2017</i></p>
    <h2>CHICAGO</h2></br>
    The Ambassador Theatre (NYC) </br></br>
  </div>


<div class="item music fest CHI">
    <p><i>24th June 2017</i></p>
    <h2>B96 SUMMER BASH 2017</h2>
  <i>Jason Derulo, Zedd, Kygo, Camilla Cabello, Niall Horan, Liam Payne, Hailee Steinfeld, Dua Lipa, Noah Cyrus, Cheat Codes</i> </br></br> 
  Allstate Arena (Chicago) </br></br>
  </div>


  <div class="item theatre CHI">
    <p><i>18th June 2017</i></p>
    <h2>ALADDIN</h2></br>
    Cadillac Palace Theatre (Chicago) </br></br>
  </div>


  <div class="item comedy CHI">
    <p><i>24th May 2017</i></p>
    <h2>Michael Che, Julio Torres</h2></br>
    Northwestern University (Evanston, IL) </br></br>
  </div>


<div class="item music fest CHI">
    <p><i>20th May 2017</i></p>
    <h2>DILLO DAY 2017</h2>
  <i>Little Simz, D.R.A.M., MGMT, Gramatik</i> </br></br> 
  Northwestern University (Evanston, IL) </br></br>
  </div>


  <div class="item music CHI">
    <p><i>1st April 2017</i></p>
    <h2>Hayley Kiyoko ft. Flor</h2></br>
    Park West (Chicago) </br></br>
  </div>


<div class="item theatre NYC">
    <p><i>22nd March 2017</i></p>
    <h2>LINDA</h2></br>
    City Center Stage 1 (NYC) </br></br>
  </div>


<div class="item theatre NYC">
    <p><i>21st March 2017</i></p>
    <h2>THE PLAY THAT GOES WRONG</h2></br>
    The Lyceum Theatre (NYC) </br></br>
  </div>

 
<div class="item theatre NYC">
    <p><i>18th March 2017</i></p>
    <h2>BOOK OF MORMON</h2></br>
    Eugene O'Neill Theatre (NYC) </br></br>
  </div>


  <div class="item music CHI rep">
    <p><i>14th March 2017</i></p>
    <h2>Ariana Grande x2 ft. Little Mix, Victoria Monet x2</h2></br>
    United Center (Chicago) </br></br>
  </div>


  <div class="item comedy CHI">
    <p><i>28th February 2017</i></p>
    <h2>Samantha Bee</h2></br>
    Northwestern University (Evanston, IL) </br></br>
  </div>


  <div class="item music CHI">
    <p><i>10th November 2016</i></p>
    <h2>Niykee Heaton</h2></br>
    Concord Music Hall (Chicago) </br></br>
  </div>


  <div class="item theatre CHI rep">
    <p><i>6th November 2016</i></p>
    <h2>FUN HOME x2</h2></br>
    The Oriental Theatre (Chicago) </br></br>
  </div>



  <div class="item theatre CHI">
    <p><i>October 2016</i></p>
    <h2>HAMILTON</h2></br>
    The PrivateBank Theatre (Chicago) </br></br>
  </div>


  <div class="item music CHI">
    <p><i>30th September 2016</i></p>
    <h2>Kehlani, Young Thug</h2></br>
    Northwestern University (Evanston, IL) </br></br>
  </div>


<div class="item music fest STL">
    <p><i>2nd September 2016</i></p>
    <h2>NOW 96.3's NOW NIGHT OUT 2016 featuring Fifth Harmony</h2>
  <i>Fifth Harmony, Victoria Monet, Jojo, Daya, Timeflies, Ruth B, The Madison letter</i> </br></br> 
  Hollywood Casino Amphitheatre (St. Louis) </br></br>
  </div>


<div class="item music fest CHI">
    <p><i>21st May 2016</i></p>
    <h2>DILLO DAY 2016</h2>
  <i>Anderson .Paak, Cashmere Cat, Schoolboy Q, The Mowglis</i> </br></br> 
  Northwestern University (Evanston, IL) </br></br>
  </div>


  <div class="item comedy CHI">
    <p><i>7th April 2016</i></p>
    <h2>Zaid Ali T</h2></br>
    Northwestern University (Evanston, IL) </br></br>
  </div>


  <div class="item comedy CHI">
    <p><i>2nd April 2016</i></p>
    <h2>Nathan Fielder</h2></br>
    Northwestern University (Evanston, IL) </br></br>
  </div>



  <div class="item music CHI">
    <p><i>13th February 2016</i></p>
    <h2>Kina Grannis</h2></br>
    Northwestern University (Evanston, IL) </br></br>
  </div>


  <div class="item comedy CHI">
    <p><i>13th February 2016</i></p>
    <h2>Hannibal Buress</h2></br>
    Northwestern University (Evanston, IL) </br></br>
  </div>


  <div class="item music CHI vid">
    <p><i>30th January 2016</i></p>
    <h2>Alessia Cara ft. Leaf</h2></br>
    The Metro (Chicago) </br></br>
<a href="https://www.youtube.com/watch?v=fV3hnLVlslw">video</a>
  </div>


  <div class="item comedy CHI">
    <p><i>4th November 2015</i></p>
    <h2>George R.R. Martin</h2></br>
    Northwestern University (Evanston, IL) </br></br>
  </div>



  <div class="item theatre NYC">
    <p><i>16th December 2015</i></p>
    <h2>FUN HOME</h2></br>
    Circle in the Square (NYC) </br></br>
  </div>


  <div class="item music CHI">
    <p><i>4th October 2015</i></p>
    <h2>Lianne La Havas</h2></br>
    Park West (Chicago) </br></br>
  </div>


  <div class="item music CHI vid">
    <p><i>2nd October 2015</i></p>
    <h2>Ariana Grande ft. Prince Royce, Who Is Fancy</h2></br>
    United Center (Chicago) </br></br>
<a href="https://www.youtube.com/watch?v=qLPdjF0TxtY">video</a>
  </div>


  <div class="item comedy CHI">
    <p><i>28th April 2015</i></p>
    <h2>Laverne Cox</h2></br>
    Northwestern University (Evanston, IL) </br></br>
  </div>


  <div class="item music CHI">
    <p><i>17th April 2015</i></p>
    <h2>Jay Sean</h2></br>
    Northwestern University (Evanston, IL) </br></br>
  </div>


  <div class="item music CHI">
    <p><i>15th May 2015</i></p>
    <h2>Sam Tsui</h2></br>
    Northwestern University (Evanston, IL) </br></br>
  </div>


  <div class="item comedy CHI">
    <p><i>7th February 2015</i></p>
    <h2>Nick Offerman</h2></br>
    Northwestern University (Evanston, IL) </br></br>
  </div>


  <div class="item music IND">
    <p><i>27th October 2007</i></p>
    <h2>Beyoncé</h2></br>
    MMRDA Grounds, Mumbai (India) </br></br>
  </div>


  <div class="item music IND">
    <p><i>11th April 2004</i></p>
    <h2>Enrique Iglesias</h2></br>
    MMRDA Grounds, Mumbai (India) </br></br>
  </div>






</div>
            
          
!
            
              @import url("https://fonts.googleapis.com/css?family=B612:400,400i,700,700i");

body {
  font: 1em "B612";
  background: #eaeaea;
  word-wrap: break-word;
}

a {
  text-decoration: none;
}

header {
  width: 100%;
  background: #151515;
  position: relative;
  padding: 15px 0;
  color: #fff;
}

header .filters {padding:10px 45px 0 45px;}
header ul {padding:0;}

header li {
  list-style-type: none;
  display: inline-block;
}

header li a {
  color: #97c5e0;
  border-bottom: 1px solid #454545;
  margin: 0 5px;
}

header ul b {
  margin: 0 5px;
}

.grid .item {
  display: block;
  padding: 30px;
  background: #fff;
  width: 23%;
  float: left;
  margin: 1%;
  box-sizing: border-box;
}

.selected {
  color: #fff;
  border-bottom-color: #97c5e0;
  font-weight: bold;
}

h2 {
  margin: 0;
}

.log {
  position: absolute;
  right: 0;
  color: #999;
  padding: 10px;
  top: 50%;
}

.item a {
  padding: 5px 15px;
  background: #97c5e0;
  border: 1px solid #97c5e0;
  color: #fff;
  transition: 0.4s ease;
}

.item a:hover {
  background: transparent;
  color: #97c5e0;
}

            
          
!
            
              $(document).ready(function() {
  var $container = $(".grid"); // the container with all the elements to filter inside
  var filters = {}; //should be outside the scope of the filtering function

  /* --- read the documentation on isotope.metafizzy.co for more options --- */
  var $grid = $container.isotope({
    itemSelector: ".item", // the elements to filter
    percentPosition: true // true if you use percentage widths
  });

  // save some classes for later usage
  /* ---
  activeClass: adds this class to filters that are selected (active)
  comboClass: the class that indicates that the filter group is a chain filter, i.e. if you select two filters, only items with BOTH filters will be shown
  exclClass: the class that indicates that the filter group is an exclusion filter, i.e. you can only select one filter from that group at a time
  resetClass: the class for the overall reset button
  --- */
  var activeClass = "selected",
    comboClass = "combine",
    exclClass = "exclusive",
    resetClass = "reset";

  var $defaults = $("a." + activeClass + '[data-filter-value=""]');
  $(".option-set a").click(function(e) {
    // insert your link selector where it says '.option-set a'
    var $this = $(this); // cache the clicked link
    var comboFilter,
      filterAttr = "data-filter-value";
    if (resetClass && !$this.hasClass(resetClass)) {
      // defining variables
      var filterValue = $this.attr(filterAttr); // cache the filter
      var $optionSet = $this.parents(".option-set"); // cache the parent element
      var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
      var filterGroup = filters[group]; // make new variable for the property being filtered
      if (!filterGroup) {
        // if the property doesn't exist
        filterGroup = filters[group] = []; // make a new empty array
      }
      var $selectAll = $optionSet.find("a[" + filterAttr + '=""]'); // cache the 'select all' button in the current group
      $("." + resetClass).removeClass(activeClass);
      comboFiltering(
        $this,
        filters,
        filterAttr,
        filterValue,
        $optionSet,
        group,
        $selectAll,
        activeClass,
        comboClass,
        exclClass
      );
      comboFilter = getComboFilter(filters); // join all the filters
      if (!comboFilter.length) $("a." + resetClass).addClass(activeClass);
      $this.toggleClass(activeClass);
    } else {
      filters = {};
      comboFilter = "";
      $(".option-set a").removeClass(activeClass);
      $(this).addClass(activeClass);
      $defaults.addClass(activeClass);
    }
    $grid.isotope({
      filter: comboFilter
    });
    e.preventDefault();
  });
});
function comboFiltering(
  $this,
  filters,
  filterAttr,
  filterValue,
  $optionSet,
  group,
  $selectAll,
  activeClass,
  comboClass,
  exclClass
) {
  // for non-exclusive groups of filters
  if (!$optionSet.hasClass(exclClass)) {
    // replace 'exclusive' with the class of your exclusive filter groups
    // if link is a filter that isn't selected
    if (!$this.hasClass(activeClass) && filterValue.length) {
      filters[group].push(filterValue); // add filter to array
      $selectAll.removeClass(activeClass); // remove the selected class from the 'select all' button
    } else if (filterValue.length) {
      // if link is a selected filter
      // remove filter from array
      // check if the filter group we're concerned with is a combination filter (.one.two instead of .one,.two)
      if ($optionSet.hasClass(comboClass)) {
        filters[group][0] = filters[group][0].replace(filterValue, ""); // delete the filter from the combined string
        if (!filters[group][0].length)
          // check if there is anything left in the string after deletion
          filters[group].splice(0, 1); // if no, remove the empty string
      } else {
        // if filter group is not a combo filter
        var curIndex = filters[group].indexOf(filterValue); // get index of filter string in array
        if (curIndex > -1) filters[group].splice(curIndex, 1); // remove the filter
      }
      if (!$optionSet.find("a." + activeClass).not($this).length)
        // if there are no remaining filters
        $selectAll.addClass(activeClass); // add the active class to the 'select all' button
    } else {
      // if link is the show all button for that group
      $optionSet.find("a." + activeClass).removeClass(activeClass); // remove the active class from all other buttons
      filters[group] = []; // clear the array of all filters
    }
    // join everything to a single string for the combined filtering groups
    if ($optionSet.hasClass(comboClass) && filters[group].length)
      filters[group] = [filters[group].join("")];
  } else {
    // for exclusive groups
    // if link is a filter that isn't selected
    if (!$this.hasClass(activeClass) && filterValue.length) {
      // run a loop for all active filters
      $optionSet.find("a." + activeClass).each(function(k, filterLink) {
        // remove all active filters in the same group from the array
        var removeFilter = $(filterLink).attr(filterAttr);
        var removeIndex = filters[group].indexOf(removeFilter);
        filters[group].splice(removeIndex, 1);
      });
      filters[group].push(filterValue); // add selected filter to array
      $optionSet.find("a." + activeClass).removeClass(activeClass); // remove the active class from all other links in the group
    } else if (filterValue.length) {
      // if link is a selected filter
      // remove filter from array
      var curIndex = filters[group].indexOf(filterValue);
      if (curIndex > -1) filters[group].splice(curIndex, 1);
      if (!$optionSet.find("a." + activeClass).not($this).length)
        // if there are no remaining filters
        $selectAll.addClass(activeClass); // add active class to 'select all' button
    } else {
      // if link is the show all button for that group
      $optionSet.find("a." + activeClass).removeClass(activeClass); // remove active class from all other buttons
      filters[group] = []; // reset all filters for this group
    }
  }
}
/* --- concat filters --- */
function getComboFilter(filters) {
  // pass the entire array of filters to the function
  var i = 0; // set counter variable as zero
  var comboFilters = []; // make a new array to save the string of filters

  for (var prop in filters) {
    // loop through all the properties in the filter array passed to the function
    var filterGroup = filters[prop]; // define variable
    // skip to next filter group if it doesn't have any values
    if (!filterGroup.length) {
      continue; // exit loop and move on with next iteration
    }
    if (i === 0) {
      // copy to new array
      comboFilters = filterGroup.slice(0);
    } else {
      var filterSelectors = [];
      // copy to fresh array
      var groupCombo = comboFilters.slice(0);
      // merge filter Groups
      for (var k = 0, len3 = filterGroup.length; k < len3; k++) {
        for (var j = 0, len2 = groupCombo.length; j < len2; j++) {
          filterSelectors.push(groupCombo[j] + filterGroup[k]);
        }
      }
      // apply filter selectors to combo filters for next group
      comboFilters = filterSelectors;
    }
    i++; // increment
  }

  var comboFilter = comboFilters.join(", ");
  return comboFilter;
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console