Javascript dropdown - show different options based on selected option in the same dropdown

Question

I'm trying to build a dropdown based on the w3schools searchable dropdown. My dropdown has 3 items. When one of them is clicked I want to present new options based on which one was clicked (replacing the old options). How would I go about this? Also, a sliding animation - the new options sliding in - would be awesome.

Any idea how to get started on something like this?

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

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #f1f1f1
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}

<div class="dropdown">
  <input type="text" placeholder="Search.." id="myInput" onclick="myFunction()" class="dropbtn" onkeyup="filterFunction()">
  <div id="myDropdown" class="dropdown-content">
    <a href="#about">Expense:</a>
    <a href="#base">Income:</a>
    <a href="#blog">Transfer:</a>
  </div>
</div>

Answer 1

This can be done in multiple ways.

Also keep in mind this type of questions are not much welcomed here, it needs more focus, you should try something and then ask for help when you get stuck with some part of code.

Here is basic example of how to do it and it should be enough to give you a picture on how to and head start, polish this by your needs:

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

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

document.querySelectorAll('#myDropdown a').forEach(item => {
//get all links from menu
  item.addEventListener('click', function() {
  // add Event Listener to each
    document.querySelectorAll("." + this.id).forEach(menuOption => {
      menuOption.classList.add("slide-in")
      // on click get item id and use it to add class to elements with same class
    });
  });
});

/* Sub menu options */

.options {
  display: none;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}

.slide-in {
  display: block !important;
  animation: slide-in 0.5s forwards;
  -webkit-animation: slide-in 0.5s forwards;
}

@keyframes slide-in {
  100% {
    transform: translateY(0%);
  }
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #f1f1f1
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}

<div class="dropdown">
  <input type="text" placeholder="Search.." id="myInput" onclick="myFunction()" class="dropbtn" onkeyup="filterFunction()">
  <div id="myDropdown" class="dropdown-content">
    <a href="#about" id="expense">Expense:</a>
    <div class="options expense">Expense Option 1</div>
    <div class="options expense">Expense Option 2</div>
    <div class="options expense">Expense Option 3</div>
    <a href="#base" id="income">Income:</a>
    <div class="options income">Income Option 1</div>
    <div class="options income">Income Option 2</div>
    <div class="options income">Income Option 3</div>
    <a href="#blog" id="transfer">Transfer:</a>
    <div class="options transfer">Transfer Option 1</div>
    <div class="options transfer">Transfer Option 2</div>
    <div class="options transfer">Transfer Option 3</div>
  </div>
</div>