Plusieurs boutons radio comme filtres

<div class="filterInputs">
  <label><input type="radio" name="year" value="" checked><i></i>All years</label>
  <label><input type="radio" name="year" value="1950"><i></i>1950</label>
  <label><input type="radio" name="year" value="1960"><i></i>1960</label>
  <label><input type="radio" name="year" value="1970"><i></i>1970</label>
</div>

<div class="filterInputs">
  <label><input type="radio" name="type" value=""><i></i>All types</label>
  <label><input type="radio" name="type" value="movies"><i></i>Movies</label>
  <label><input type="radio" name="type" value="music" checked><i></i>Music</label>
  <label><input type="radio" name="type" value="newspapers"><i></i>Newspapers</label>
</div>

<div data-filterable="1950 newspapers">1950 Newspapers</div>
<div data-filterable="1960 music">1960 Music</div>
<div data-filterable="1960 newspapers">1960 Newspapers</div>

/* FILTER INPUTS */

.filterInputs {
  padding-bottom: 5px;
}

.filterInputs input {
  display: none;
}

.filterInputs label {
  display: inline-block;
  position: relative;
  padding: 10px 20px;
  cursor: pointer;
  user-select: none; /* prevent highlight */
}

.filterInputs i {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 2px #0bf;
  z-index: -1;
}

.filterInputs input:checked + i {
  background: #0bf;
}


/* HELPER CLASSES */

.is-hidden {
  display: none;
}

const el_filters = document.querySelectorAll('[name="year"], [name="type"]'),
  el_filterable = document.querySelectorAll('[data-filterable]');

const applyFilter = () => {

  // Filter checked inputs
  const el_checked = [...el_filters].filter(el => el.checked && el.value);
  
  // Collect checked inputs values to array
  const filters = [...el_checked].map(el => el.value);
  
  // Get elements to filter
  const el_filtered = [...el_filterable].filter(el => {
    const props = el.getAttribute('data-filterable').trim().split(/\s+/);
    return filters.every(fi => props.includes(fi))
  });

  // Hide all
  el_filterable.forEach(el => el.classList.add('is-hidden'));

  // Show filtered
  el_filtered.forEach(el => el.classList.remove('is-hidden'));
}

// Assign event listener
el_filters.forEach(el => el.addEventListener('change', applyFilter));
// Init
applyFilter();

<div id="myBtnContainer" align="center" style="line-height: 20pt">
  <button class="btn active" filter="ShowAll" group="year">Show all</button>
  <button class="btn" filter="1950" group="year">1950</button>
  <button class="btn" filter="1960" group="year">1960</button>
  <button class="btn" filter="1970" group="year">1970</button>
</div>
<br>
<div id="myBtnContainer" align="center" style="line-height: 20pt">
  <button class="btn active" filter="AllMedia" group="media">All Media</button>
  <button class="btn" filter="Movies" group="media">Movies</button>
  <button class="btn" filter="Music" group="media">Music</button>
  <button class="btn" filter="Newspapers" group="media">Newspapers</button>
</div>

<br><br>

 <div class="filterDiv AllMedia ShowAll 1950 Newspapers">
<div class="content">
  1950 Newspapers Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>


 <div class="filterDiv AllMedia ShowAll 1960 Music">
<div class="content">
  1960 Music Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>


 <div class="filterDiv AllMedia ShowAll 1960 Newspapers">
<div class="content">
  1960 Newspapers Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>

.filterDiv {
  float: left;
  background-color: white;
  color: black;
  width: 37vw;
  line-height: 100px;
  text-align: center;
  margin: 5px;
  display: none;
     margin-right: 15px;
}




.show {
  display: block;
}

.container {
  margin-top: 20px;
  overflow: hidden;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
    padding: 0;
    padding-right: 40px;
    background-color: white;
  cursor: pointer;
    font-size: 16px;
 font-weight: normal;
}

.btn:hover {
}

.btn.active {
  font-weight: bold;
}



.content{
  font-size:16px;
  line-height:20px;
  text-align:left;
}

(function(){
  const selectedFilters = [];

  // [].slice.call => converts HTMLCollection to Array

  const yearFilters = [].slice.call(document.querySelectorAll('[filter][group="year"]'));
  const mediaFilters = [].slice.call(document.querySelectorAll('[filter][group="media"]'));
  const allFilters = yearFilters.concat(mediaFilters);
  
  const filterContents = [].slice.call(document.querySelectorAll('.filterDiv'));

  // add click event to all filters
  allFilters.forEach((filter) => {
    filter.addEventListener('click', filterToggle);
  });
    
  function filterToggle() {
    const filter = this.getAttribute('filter');
    const group = this.getAttribute('group');

    resetMediaFilters();
    
    if(group === 'year') {
      resetYearFilters();
      mediaFilters[0].classList.add('active');
    }    

    this.classList.add('active');
    applyFilter();
  }
  
  function resetYearFilters() {
    yearFilters.forEach(filter => filter.classList.remove('active'));
  }
  
  function resetMediaFilters() {
    mediaFilters.forEach(filter => filter.classList.remove('active'));
  }
  
  function resetFilterContent() {
    filterContents.forEach(content => content.classList.remove('show'));
  }

  function applyFilter() {
    const selectedFilters = [].slice.call(document.querySelectorAll('[filter].active'))
                        .map(filter => filter.getAttribute('filter'));

// class starts with number is a invalid query selector, so using attribute selector for class
    const selector = ["filterDiv"].concat(selectedFilters).map(filter => '[class~="'+ filter +'"]').join('');
    
    resetFilterContent();
    
    document.querySelectorAll(selector).forEach(content => content.classList.add('show'));
  }
  
  // initialize
  applyFilter();
})();