How to filter hidden lists and display the results?

Keywords´╝Ü javascript css

Question: 

I have a large section of H4 that consist of several hidden LI that once the user clicks on the H4, the list expands. Now this works great in general. However, I want to implement a search filter to enable the user to search a book(for example) by the title. The filter feature worked well before I hid all the lists.

function section(el){
  el.classList.toggle('on');
}


$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#section1,section2,section3 *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
#section1 .list, #section2 .list
{max-height:0vw; background:rgba(80,80,80,0.9); width:80%; float:left; list-style-type:none; margin:0% 0% 1% 7%; border-radius:10px; transition:0.2s ease-in-out; opacity:0; transform:translate3d(0px, 20px, 0px); overflow:hidden; }



#section1 .part.on ~ .list, #section2 .part.on ~ .list,#section3 .psg.on ~ .list
{max-height:100vw; opacity:1; transform:translate3d(0px, 0px, 0px); transition:0.2s ease-in-out; margin:0.0% 0% 5% 7%; overflow:auto; box-shadow:0px 0px 11px rgba(100,100,100,0.5);}


.list li{background:rgba(55,55,55,1); width:98%; margin:2% 0% 2% 0%; float:left; border-radius:5px; display:block; transition:0.1s; }
. list li a{ transition:0.1s; color:white; float:right; text-decoration:none; background:rgba(0,150,0,1); width:20%; height:50%; margin:1% 1% 1% 0%; padding:1% 1% 1% 1%; font-weight:bold; border-radius:10px; text-align:center; font-size:0.9vw; }
. list li p{text-align:center; width:65%; height:auto; margin:1% 0% 1% 1%; padding:0.5% 0.5% 0.5% 0.5%; font-weight:bold; color:rgba(220,220,220,1); float:left; font-size:0.9vw;}
. list li h5{float:left; width:15%; height:auto; text-align:center; font-size:0.9vw; margin:1% 0% 0% 0%; color:rgba(200,200,200,1);}
. list li h6{float:right; width:15%; height:auto; text-align:center; font-size:0.9vw; margin:0.5% 0% 0% 0%;  color:rgba(220,220,220,1); padding:0.3% 0.3% 0.3% 0.3%;}
. list li:nth-child(even){background:rgba(65,65,65,1); color:rgba(230,230,230,1);}
. list li:hover{background:rgba(100,100,100,0.9); color:white;}
. list li:hover p{color:white;}
. list li:hover h5{color:white;}
. list li:hover h6{color:white;}
. list li a:hover{background:rgba(0,100,0,1);}

.part{width:20%; height:1vw; padding:1% 0% 1% 0%; float:left; background:rgba(50,50,50,1); display:block; margin:0% 0% 0% 40%; overflow:hidden; text-align:center; border-radius:5px; border:1px solid rgba(70,70,70,1); transition:0.15s; user-select:none; color:rgba(200,200,200,1); font-size:0.9vw;}
.part:hover{color:white; background:rgba(70,70,70,1); border:1px solid rgba(150,150,150,0.7);}
.part:active{color:white; background:rgba(40,40,40,1); border:1px solid rgba(0,0,0,0.7); transition:0s; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="bar"> 
<input type="search" placeholder="Search" id="myInput" onkeyup="myFunction()"></input>
</div>

<h2>title</h2>

<div id="section1">
<h4 class="part" onclick="sections(this)">Book title 1</h4>
<div class="list">
<ul>
<div id="title"><p>Test1</p></div> 
<li ><h5>Price:</h5><p>Title</p><h6>Date:</h6>
</li> 
<li ><h5>price:</h5><p>Title</p><h6>Date:</h6>
<a href="Books/book.pdf" download="test.pdf">Download sample</a>
</li> 
</ul>
</div>
</div> 
</div>


<div id="section2">
<h4 class="part" onclick="sections(this)">Book title 2</h4>
<div class="list">
<ul>
<div id="title"><p>Test1</p></div> 
<li ><h5>Price:</h5><p>Title</p><h6>Date:</h6>
</li> 
<li ><h5>price:</h5><p>Title</p><h6>Date:</h6>
<a href="Books/book.pdf" download="test.pdf">Download sample</a>
</li> 
</ul>
</div>
</div> 
</div>

<div id="section3">
<h4 class="part" onclick="sections(this)">Book title 3</h4>
<div class="list">
<ul>
<div id="title"><p>Test1</p></div> 
<li ><h5>Price:</h5><p>Title</p><h6>Date:</h6>
<a href="Books/book.pdf" download="test.pdf">Download sample</a>
</li> 
<li ><h5>price:</h5><p>Title</p><h6>Date:</h6>
</li> 
</ul>
</div>
</div> 
</div>
</body>

Answers: