'Search or filter nested list of ul li

I have searched to the extent of my capabilities and found no answer. I would like to be able to search or filter and then display only matching items from a three level nested list. The results shall be displayed in such a way that items not matching will be hidden. I would prefer pure javascript and/or css if possible.

Check this codepen https://codepen.io/parken26/pen/abqmrJZ

a, u{
  text-decoration: none;
}


.pcnav__list{
  float: center;
  min-width: 100%; /* makes the ul wider */
  font-family: "Open-Sans" sans-serif;
  font-size: 20px;

}

.pcnav__list,
.group-list,
.sub-group-list{
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
  
}

.amount{
  float: right;
  rotate: none;
  color: black;
}

  /* Styling top level menu items */
  .pcnav a, .pcnav label {
    display: block;
    text-align:left;
    width: 100%;
    padding: 1rem;
    color: rgb(0, 0, 0);
   /* background-color: #C0392B;*/
    box-shadow: inset 0 -1px #ffffff;
    -webkit-transition: all .25s ease-in;
    transition: all .25s ease-in;
  }

  .pcnav a:focus, .pcnav a:hover, .pcnav label:focus, .pcnav label:hover {
    background: #cccccc;
    color: #8B000D;
    /*color: rgba(255, 255, 255, 0.5);
    /* background: #6d2018; */
  }

  .pcnav label { cursor: pointer; }
  
  /* Styling first level lists items*/

  .group-list a, .group-list label {
    padding-left: 2rem;
    /*background: #AB3326;*/
    box-shadow: inset 0 -1px #ffffff;
  }

  .group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { 
    /*background: #AB3326;*/
    background: #cccccc;
    color: #8B000D;
  }
  
   /* Styling second level list items */
  
  .sub-group-list a, .sub-group-list label {
    padding-left: 4rem;
    /*background: #962D22;*/
    box-shadow: inset 0 -1px #ffffff;
  }
  .sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover {
    background: #cccccc;
    color: #8B000D;
  }
  
    /* Styling third level list items */
    
  .sub-sub-group-list a, .sub-sub-group-list label {
    padding-left: 6rem;
    background: #a7a7a7;
    box-shadow: inset 0 -1px #ffffff;
  }
  .sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover { 
    background: #333333; 
  }
  
   /* Hide nested lists*/

  .group-list, .sub-group-list, .sub-sub-group-list {
    height: 100%;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height .5s ease-in-out;
    transition: max-height .5s ease-in-out;
  }
  .pcnav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */
  max-height: 1000px; }
  
  /* Rotating chevron icon on toggle */
  label > span {
    float: left;
    padding: 5px 20px;
    vertical-align: middle;
    -webkit-transition: -webkit-transform .65s ease;
    transition: transform .65s ease;
  }
  .pcnav__list input[type=checkbox]:checked + label > span {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }

    /* ipad pro 12,9 landscape */
    @media only screen and (min-width: 1366px) and (orientation: landscape){

    .pcnav{
      max-width: 100%; /* this removes x movement on ios */
    }

    .pcnav__list{
      width: 780px; /* somehow this enables the numbers on the right to be shown on ipad */
      max-width: 100%;
      overscroll-behavior-y: none;
      overflow-x: hidden;
    }

    .mobilebag{
      overscroll-behavior: contain;/* ATTEMPT at preventing scroll of the body behind when reaching end of active container, does not work */
    }
}

    /* iphone x portrait */
    @media only screen and (min-width: 375px) and (orientation: portrait){
      .pcnav__list{
        position: absolute;/* + left and top + width 100% makes the red pcnav fille the width of iphone x portrait */
        left: 0px;
        top: 80px;
        min-width: 100%;
        font-family: "Open-Sans" sans-serif;
        font-size: 16px;    
      }

    .mobile-bag{
      position: absolute;
      top: 60px;
      height: 80vh;
      background-color: beige;
      overflow-y: scroll; /* Allows scrolling of the treeview menu om iphone x portrait */
      overscroll-behavior: contain; /* prevents scroll of the body behind when reaching end of active container */
    }
    }

<!-- Product catalog -->

<div class="product-catalog-container">
    <nav class="pcnav" role="navigation">
        <ul class="pcnav__list">
            <li>
                <input id="group-0" type="checkbox" hidden />
                <label for="group-0"><p class="amount" >2</p><span class="fa fa-angle-right fa-lg fa-lg"></span>Calculators and conversions</label>
                <ul class="group-list">
                    <li>
                        <a href="#.php">Weight and dimensions
                        </a>
                    </li>
                    <li>
                        <a href="#.php">Capacities
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <input id="group-1" type="checkbox" hidden />
                <label for="group-1"><p class="amount" >7</p><span class="fa fa-angle-right fa-lg fa-lg"></span>Weighing machines</label>
                <ul class="group-list">
                    <li>
                        <input id="sub-group-1" type="checkbox" hidden />
                        <label for="sub-group-1"><p class="amount" >5</p><span class="fa fa-angle-right fa-lg"></span>Linear weighers</label>
                        <ul class="sub-group-list">
                            <li><a href="#.php">LW 225</a></li>
                            <li><a href="#.php">LW 300</a></li>
                            <li><a href="#.php">BW 250</a></li>
                            <li><a href="#.php">BW 300</a></li>
                        </ul>
                    </li>
                    <li>
                        <input id="sub-group-1-2" type="checkbox" hidden />
                        <label for="sub-group-1-2"><p class="amount" >12</p><span class="fa fa-angle-right fa-lg"></span>Multi head weighers</label>
                        <ul class="sub-group-list">
                            <li><a href="#">LC 10 - 25</a></li>
                            <li><a href="#">LC 10 - 50</a></li>
                            <li><a href="#">LC 14 - 25</a></li>
                            <li><a href="#">LC 14 - 45</a></li>
                            <li><a href="#">LC 14 - 50</a></li>
                            <li><a href="#">LC 14 - 75</a></li>
                            <li><a href="#">LC 20 - 25</a></li>
                            <li><a href="#">LC 20 - 25 / 2</a></li>
                            <li><a href="#">MH 40 - 10</a></li>
                            <li><a href="#">MH 40 - 14</a></li>
                            <li><a href="#">MH 50 - 14</a></li>
                            <li><a href="#">MH 40 - 20</a></li>
                        </ul>
                    </li>
                    <li>
                        <input id="sub-group-1-3" type="checkbox" hidden />
                        <label for="sub-group-1-3"><p class="amount" >2</p><span class="fa fa-angle-right fa-lg"></span>Single tray weigher</label>
                        <ul class="sub-group-list">
                            <li><a href="#">STW 200</a></li>
                            <li><a href="#.php">STW 300</a></li>
                        </ul>
                    </li>
                    <li>
                        <input id="sub-group-1-4" type="checkbox" hidden />
                        <label for="sub-group-1-4"><p class="amount" >2</p><span class="fa fa-angle-right fa-lg"></span>Bowl feeder weigher</label>
                        <ul class="sub-group-list">
                            <li><a href="#">BFW 450</a></li>
                            <li><a href="#">BFW 650</a></li>
                        </ul>
                    </li>
                    <li>
                        <input id="sub-group-1-5" type="checkbox" hidden />
                        <label for="sub-group-1-5"><p class="amount" >3</p><span class="fa fa-angle-right fa-lg"></span>Bowl feeder counter</label>
                        <ul class="sub-group-list">
                            <li><a href="#">BFC 400</a></li>
                            <li><a href="#">BFC 600</a></li>
                            <li><a href="#">BFC 800</a></li>
                        </ul>
                    </li>
                    <li>
                        <input id="sub-group-1-6" type="checkbox" hidden />
                        <label for="sub-group-1-6"><p class="amount" >2</p><span class="fa fa-angle-right fa-lg"></span>Belt weigher</label>
                        <ul class="sub-group-list">
                            <li><a href="#">xxx</a></li>
                            <li><a href="#">xxx</a></li>
                        </ul>
                    </li>
                    <li>
                        <input id="sub-group-1-7" type="checkbox" hidden />
                        <label for="sub-group-1-7"><p class="amount" >2</p><span class="fa fa-angle-right fa-lg"></span>Bulk weighing unit</label>
                        <ul class="sub-group-list">
                            <li><a href="#">xxx</a></li>
                            <li><a href="#">xxx</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <input id="group-2" type="checkbox" hidden />
                <label for="group-2"><p class="amount" >2</p><span class="fa fa-angle-right fa-lg"></span>Lift and tip units</label>
                <ul class="group-list">
                    <li>
                        <input id="sub-group-2" type="checkbox" hidden />
                        <label for="sub-group-2"><p class="amount" >5</p><span class="fa fa-angle-right fa-lg"></span>Lift and tip</label>
                        <ul class="sub-group-list">
                            <li><a href="#">LU 100</a></li>
                            <li><a href="#">LU 250</a></li>
                            <li><a href="#">LU 500</a></li>
                            <li><a href="#">LU 1000</a></li>
                            <li><a href="#">LU 2000</a></li>
                        </ul>
                    </li>
                    <li>
                        <input id="sub-group-2-2" type="checkbox" hidden />
                        <label for="sub-group-2-2"><p class="amount" >2</p><span class="fa fa-angle-right fa-lg"></span>Tip units</label>
                        <ul class="sub-group-list">
                            <li><a href="#">TP 500</a></li>
                            <li><a href="#">TP 1000</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

Screnshot of final layout

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Search or filter nested list of ul li

Sources

Related Questions