Hide or show elements when user change buttons

Question

I'm just going to create a function that allows me to hide some elements (filters on my website), while the other element ( All Categories) is selected. I'm using Sharetribe - marketplace CMS, here's mine https://rentim.sharetribe.com/

Here's piece of code I wrote to make it happen, but it's not working

document.querySelectorAll('a.home-categories-main:first-child.selected'),
function hideFilters() {
   document.getElementById('filters').style.display = 'none';
};           

Answer 1

In Rentim you should add custom scripts with onDocumentReady function. It's executed after HTML is parsed and all elements rendered.

onDocumentReady(function() { 
  var filters = document.querySelector('#filters');
  var allCategories = document.querySelector('.home-categories-main:first-child.selected');
  filters.style.display = allCategories ? 'block' : 'none';
});

Answer 2

Here is a working example on JSFiddle.

This is a simple example to what you are trying to do using the most basic HTML and JS combination.

Nothing fancy, but it works.

HTML:

<div id="first" onclick="hideFilters();">All</div>
<div id="filters">
  <div>Price</div>
  <div>Model</div>
  <div>Date</div>
  <div>Color</div>
</div>

Javascript:

var a = true;
function hideFilters(){
  let x = document.getElementById("filters");
  if(a){
        x.style.display = "none";
    }else{
        x.style.display = "block";
    }
  a = !a;
}

Here is a working example on JSFiddle.