Webster Webster - 11 months ago 115
CSS Question

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 title elements that should only appear when their subject is selected. For instance if the user chooses topic #3 the results for topic #3 should be shown with the title for topic #3. If I perform a search the title should say "search results".

Where I'm lost: the gallery starts with all objects and section titles in place. The section titles should be hidden until their section topic is selected. I have class "filter" for all visible elements. If I start them out with visibility: hidden; they never show up. If I don't give them visibility: hidden; they never go away. My function is showing and hiding "all" when I need to toggle these individual elements independently of the main filtering.

Here's a fiddle showing all the titles on page load, and when you type or click "all". The only title showing in these cases should be "All results".

https://jsfiddle.net/ewebster/Lxveeq65/43/

The JavaScript:

$(document).ready(function () {
//declare a global variable
var filterVal;
//check if sessionStorage exists and if so, if there is a var called fillTerm
//if not, set it to a default value (all)
if (sessionStorage && sessionStorage.getItem("filTerm")) {
filterVal = sessionStorage.getItem("filTerm");
} else {
filterVal = "all";
sessionStorage.setItem("filTerm", filterVal);
}

//now let's attach some interaction to our buttons
$(".filter-button").on("click", function () {
//get the value for our filter
filterVal = $(this).attr("data-filter");
//store it in the session storage
sessionStorage.setItem("filTerm", filterVal);
console.log(sessionStorage);
console.log(filterVal);
//call our view update function
updateView();
});

$("#searchBtn").on("click",function(){
filterVal = $('#searchEntry').val();
sessionStorage.setItem("filTerm", filterVal);
updateView();
});

$("#searchEntry").on("keypress",function(e){
if (e.keyCode == 13) {
filterVal = $('#searchEntry').val();
sessionStorage.setItem("filTerm", filterVal);
updateView();
}
});

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

console.log("searchTerm");
console.log("filterVal");
}
};
//update the view when the page loads
updateView();

});

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download