Functionality to search bar

Question

I am working on making a search bar that will filter my site for reports(urls) based on what is typed in. It currently works sort of. It will filter the items but you have the have the menus expanded for it to filter them.

I am looking for a way to either only have the results that match the search show(get rid of the headers for the dropdowns and only show links). OR to auto expand the dropdowns when a character is typed into the search bar

(closest I could get for a repeatable example.)

function searchSite() {
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('searchbar');
  filter = input.value.toUpperCase();
  ul = document.getElementById("Sidebar");
  li = ul.getElementsByTagName('li');
  closestClass = ul.closest('.parent');

  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

.evolve .barTop {
  -webkit-transform: rotate(-45deg) translate(-8px, 8px);
  transform: rotate(-45deg) translate(-8px, 8px);
}

.evolve .barMid {
  opacity: 0;
  transition: 0.1s ease-in;
}

.evolve .barBot {
  -webkit-transform: rotate(-45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

#main {
  transition: margin-left 0.5s;
  position: relative
}

.content {
  max-height: 0px;
  overflow: hidden;
  background-color: transparent;
  transition: max-height 1s ease-out;
  box-shadow: inset 0px 0px 7px 7px rgba(0, 0, 0, 0.15);
}

.content .content-stuff {
  background-color: #20396120;
  border-left: outset #203961 13px;
  padding: .5rem 1rem;
}

.content .content-stuff .subcontent {
  max-height: 0px;
  overflow: hidden;
  background-color: transparent;
  transition: max-height .75s ease-out;
}

.content .content-stuff .subcontent .subcontent-stuff {
  border-bottom: solid grey 3px;
  padding: .5rem;
}

.button:checked+.header+.content {
  max-height: inherit;
}

.subbutton:checked+.subheader+.subcontent {
  max-height: inherit;
}

.content .content-stuff .clickLink {
  cursor: pointer;
}

hr {
  border-style: solid;
  color: #20396150;
  border-height: .5px;
}

ul.Links {
  list-style-type: none;
  margin: 0;
  padding: 0px;
}

li:not(:last-child) {
  margin-bottom: 10px;
}

.fade-in-image {
  position: absolute;
  top: 13px;
  left: 60px;
  transition: FadeIn 1.0s ease-in;
}

.fade-in-image h2 {
  margin-top: 1px;
  margin-left: 45px;
  color: #fca445;
  white-space: nowrap;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  text-shadow: 3px 6px 6px rgba(0, 0, 0, 0.19), 0px -7.5px 15px rgba(255, 255, 255, 0.10);
  ;
}

@keyframes slide-right {
  0% {
    margin-left: -10%
  }
  ;
  100 {
    margin-left: 80%
  }
  ;
}

.fade-in-image img {
  position: absolute;
  animation: move 3s ease infinite;
}

@keyframes move {
  0% {
    margin-left: -10px;
  }
  5% {
    margin-left: -9.25px;
  }
  10% {
    margin-left: -10px;
  }
  15% {
    margin-left: -10px;
  }
  75% {
    margin-left: 3px;
  }
  80% {
    margin-left: -11.5px;
  }
  85% {
    margin-left: -5.5px;
  }
  87.25% {
    margin-left: -11px;
  }
  90% {
    margin-left: -7px;
  }
  95% {
    margin-left: -10.5px;
  }
  97.5% {
    margin-left: -9.25px;
  }
  100% {
    margin-left: -10px;
  }
}


}

/* popup code credit: codeconvey.com */

.sidebar .pop {
  position: absolute;
  width: 50%;
  margin: auto;
  padding: 20px;
  height: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
@media (max-width: 640px) {
  .pop {
    position: relative;
    width: 100%;
  }
}
.sidebar .pop .modal {
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: opacity 500ms ease-in-out;
  transition: opacity 500ms ease-in-out;
}
.sidebar .pop .modal__inner {
  -webkit-transform: translate(-50%, -50%) scale(0.75);
  transform: translate(-50%, -50%) scale(0.75);
  top: 50%;
  left: 50%;
  width: 50%;
  background: white;
  padding: 30px;
  position: absolute;
  color: black;
}
@media (max-width: 640px) {
  .pop .modal__inner {
    width: 100%;
  }
}
.sidebar .btn-close {
  color: #fff;
  text-align: center;
}
.sidebar .pop label {
  position: absolute;
  top: 8px;
  right: 55px;
  padding: 1px 19px 1px 19px;
  font-size: 45px;
  cursor: pointer;
  transition: 0.2s;
  color: #fca445;
}
.sidebar .pop label.open:hover {
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  background-color: #33d62b60;
  font-size: 45px;
}
.sidebar .pop input {
  display: none;
}
.sidebar .pop input:checked+.modal {
  opacity: 1;
  visibility: visible;
}
.sidebar .pop input:checked+.modal .modal__inner {
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}
.sidebar .pop input:checked+.modal .modal__inner p {
  font-size: 1.25rem;
  line-height: 125%;
}
.sidebar .pop input:checked+.modal label {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 8px 4px 8px;
  font-size: 20px;
  cursor: pointer;
  transition: 0.2s;
  color: #000;
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}
.sidebar .pop input:checked+.modal label:hover {
  background-color: #ff141860;
}

<div id="Sidebar" class="sidebar">
  <p style="text-align:center;"><input id="searchbar" onkeyup="searchSite()" type="text" name="search" placeholder="Search" title="Report or Category Name" style="width: 300px;" /></p>
  <input id="OpsButton" class="button" type="checkbox">
  <label for="OpsButton" class="header">Operations</label>
  <div class="content">
    <div class="content-stuff">
      <input id="Button1" class="subbutton" type="checkbox">
      <label for="Button1" class="subheader">Header1</label>
      <div class="subcontent">
        <div class="subcontent-stuff">
          <ul class="Links">
            <li><a title="Region" href="X" target="bodyinfo">Region</a></li>
            <li><a title="range" href="X" target="bodyinfo">range</a></li>
          </ul>
        </div>
      </div>
      <input id="FinancialButton" class="subbutton" type="checkbox">
      <label for="FinancialButton" class="subheader">Financials</label>
      <div class="subcontent">
        <div class="subcontent-stuff">
          <ul class="Links">
            <li><a title="Region2" href="X" target="bodyinfo">Region2</a></li>
            <li><a title="range2" href="X" target="bodyinfo">range2</a></li>
          </ul>
        </div>
      </div>
      <p>
      </p>
      <ul class="Links">
        <li><a href="X" target="bodyinfo">Turnover Report</a></li>
      </ul>
      <p></p>
    </div>
  </div>
</div>