Toggle Visibility Or Display Of Objects

I have a group of objects acted on with data filters to search and filter. JavaScript toggles the visibility of the objects to make the searching and filtering happen. I have some

Solution 1:

A property rule for display needs to be written in .hidden CSS class. However, this is not enough because specificity. You may need to wrap the titles in another div with id to get around this.

If you're not so opposed to using !important, you have a solution like this.

sessionStorage references are removed for brevity and lack of support on here.

$(document).ready(function() {
  var filterVal = "all";

  $(".filter-button").on("click", function() {
    filterVal = $(this).attr("data-filter");
    updateView();
  });

  function updateView() {
    //default situation: all is visible
    $('.filter').addClass('hidden');
    $('.' + filterVal).removeClass('hidden');
  };

  updateView();
});

body {
  font-family: arial;
  font-size: small;
}

.item {
  height: 60px;
  width: 50px;
  padding: 10px;
  margin: 10px;
  background-color: grey;
  text-align: center;
  color: white;
  overflow: wrap;
  float: left;
}

ul {
  list-style-type: none;
  margin-left: -35px;
}

li {
  display: inline;
}

.filter-button {
  width: 50px;
  margin-bottom: 5px;
}

.filter-button:hover {
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}

.hidden {
  display: none !important;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="searchEntry" placeholder="Search">
<input type="submit" id="searchBtn" class="searchButton" />

<ul>
  <li>
    <button class="filter-button" data-filter="all">All </button>
  </li>
  <li>
    <button class="filter-button" data-filter="short">Short </button>
  </li>
  <li>
    <button class="filter-button" data-filter="tall">Tall </button>
  </li>
  <li>
    <button class="filter-button" data-filter="big">Big </button>
  </li>
  <li>
    <button class="filter-button" data-filter="small">Small </button>
  </li>
  <li>
    <button class="filter-button" data-filter="many">Many</button>
  </li>
  <li>
    <button class="filter-button" data-filter="few">Few </button>
  </li>
</ul>
<div class="filter all">
  All of Them
  <hr />
</div>
<div class="filter hidden short">
  Just the Short Ones
  <hr />
</div>
<div class="filter hidden tall">
  All the Tall Ones
  <hr />
</div>
<div class="filter hidden big">
  Only the Big Ones
  <hr />
</div>
<div class="filter hidden small">
  All the Small Ones
  <hr />
</div>
<div class="filter hidden many">
  The Many Ones
  <hr />
</div>
<div class="filter hidden few">
  The Few
  <hr />
</div>


<div class="filter item all big tall">
  Big and Tall
</div>
<div class="filter item all short small">
  Short and Small
</div>
<div class="filter item all big short">
  Big and Short
</div>
<div class="filter item all tall small">
  Tall and Small
</div>
<div class="filter item all big few">
  Big and Few
</div>
<div class="filter item all many small">
  Many and Small
</div>
<div class="filter item all few small">
  Few and Small
</div>
<div class="filter item all short few small">
  Short and Small and Few
</div>
<div class="filter item all big tall many">
  Big and Tall and Many
</div>

Solution 2:

Here's an updated fiddle with the working code: https://jsfiddle.net/ayunami2000/4uw7or7z/

Excerpt from jsfiddle:

//this is the function that manipulates the UI
        function updateView() {
            //default situation: all is visible
            if (!filterVal || filterVal === "all") {
                $(".filter").show();
                $(".filter").not(".all").hide();
            }

Btw, I also changed visibility:false; to display:none;