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();
  });

  functionupdateView() {
    //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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text"id="searchEntry"placeholder="Search"><inputtype="submit"id="searchBtn"class="searchButton" /><ul><li><buttonclass="filter-button"data-filter="all">All </button></li><li><buttonclass="filter-button"data-filter="short">Short </button></li><li><buttonclass="filter-button"data-filter="tall">Tall </button></li><li><buttonclass="filter-button"data-filter="big">Big </button></li><li><buttonclass="filter-button"data-filter="small">Small </button></li><li><buttonclass="filter-button"data-filter="many">Many</button></li><li><buttonclass="filter-button"data-filter="few">Few </button></li></ul><divclass="filter all">
  All of Them
  <hr /></div><divclass="filter hidden short">
  Just the Short Ones
  <hr /></div><divclass="filter hidden tall">
  All the Tall Ones
  <hr /></div><divclass="filter hidden big">
  Only the Big Ones
  <hr /></div><divclass="filter hidden small">
  All the Small Ones
  <hr /></div><divclass="filter hidden many">
  The Many Ones
  <hr /></div><divclass="filter hidden few">
  The Few
  <hr /></div><divclass="filter item all big tall">
  Big and Tall
</div><divclass="filter item all short small">
  Short and Small
</div><divclass="filter item all big short">
  Big and Short
</div><divclass="filter item all tall small">
  Tall and Small
</div><divclass="filter item all big few">
  Big and Few
</div><divclass="filter item all many small">
  Many and Small
</div><divclass="filter item all few small">
  Few and Small
</div><divclass="filter item all short few small">
  Short and Small and Few
</div><divclass="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 UIfunctionupdateView() {
            //default situation: all is visibleif (!filterVal || filterVal === "all") {
                $(".filter").show();
                $(".filter").not(".all").hide();
            }

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