Codecademy Forums

How to create filters that drop down on click?

how do i make filters drop down on click?

context, if y’all need that: i’m working with this page theme on tumblr and trying to make the filters drop down when the user clicks a button. i did not code the page, but i’m modifying it for personal use.

update!

i found a tutorial but can’t figure out how to make the filters work now :frowning: any help?

the relevant code snippets:

the buttons themselves

<div class="dropdown"> 
<!--start filters - you can add or delete as required.  -->

<button onclick="myFunction()" class="dropbtn">filters ▾</button>
<div id="myDropdown" class="dropdown-content">
<div class="button-group js-radio-button-group" data-filter-group="misc">
<button class="button is-checked" data-filter="">everything</button>
<button class="button" data-filter=".ya">young adult</button>
<button class="button" data-filter=".a">adult</button>
<button class="button" data-filter=".con">contemporary</button>
<button class="button" data-filter=".classic">classic</button>
<button class="button" data-filter=".series">series</button>
<button class="button" data-filter=".lgbt">lgbt</button>
<button class="button" data-filter=".standalone">standalone</button>
<button class="button" data-filter=".2017">2017</button>
<button class="button" data-filter=".2018">2018</button>
<button class="button" data-filter=".2019">2019</button>
<button class="button" data-filter=".fave">favorites</button>
<!--end filters-->
</div>
</div>
</div>

the script for opening/closing the filters

<script>
    /* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

lastly, the live page can be found here.

Hello :slight_smile:

From the analysis of the script https://static.tumblr.com/aptzszz/s5fp15zyp/candlelight.js it looks like the element containing the filters buttons must have the filters class assigned.

Instead of:

<div class="dropdown"> 

try to use:

<div class="filters dropdown">

And please remember that you have to specify data-filter for the elements that are supposed to be filtered, for example this article element:

<article class="ya fave series">
    <h1>book title</h1> :: <b>author</b>
    <div class="d">
        <span><a href="link url">goodreads</a></span>
        <span>★★★★★</span>
        <img src="image url" />
        book description goes here.
    </div>
</article>

will show up for filter young adult, series and favorites.