Develop Reference

Trying to hide/show partials based on if a input has text node.js handlebars

so I have a page. there's a search bar. if the search bar has no text inputted, the page displays two partials, one for featured apps and one for most popular. but if someone inputs any text at all into the search bar then the featured apps and most popular apps partials disappear and the search results partial shows up. instead what happens is neither partials load. there's just a big blank space where they should be.
I tried doing this with jQuery but was having no luck. so now I'm back to trying to use dynamic partials but am also having no luck with that. if this can only be done with something like jQuery please let me know.
I was briefly trying to use a handlebar helper but I could not link it to the input id="searchApps" element without throwing an error because it keeps saying searchApps is undefined.
index.hbs (if this is missing any divs it's cause it's just part of the code)
<div class="col-2 offset-1">
<div class="column-side">
<div class="sidebar">
<input id="searchApps" type="text" placeholder="Search apps...">
{{!-- so once someone types the first character here the searchResults partial should render. and it should be dynamic so results should further refine with each additional character typed--}}
{{>sidebar}}
</div>
</div>
</div>
{{#if 'searchApps.length === 0'}}
<div id="searchResultsHomePage">
<div class="col-7 offset-1">
{{>searchResults}}
</div>
</div>
{{else}}
<div id="homePageNoSearch">
<div class="col-7 offset-1">
{{>featuredApps}}
</div>
<div class="most-popular-grid">
{{>mostPopularApps}}
</div>
</div>
{{/if}}
here is the jQuery I tried in the index.hbs file just before the </body> tag
<script type="text/javascript">
$('#searchApps').on('change', function(){
if ($(this).val() == ""){
<div id="homePageNoSearch">
<div class="col-7 offset-1">
{{>featuredApps}}
</div>
<div class="most-popular-grid">
{{>mostPopularApps}}
</div>
</div>
} else {
<div id="searchResultsHomePage">
<div class="col-7 offset-1">
{{>searchResults}}
</div>
</div>
}
});
</script>
so anyone know how I can do this?
thanks

Hyperlink with relative url does not respond

OK so I am trying to build my own website using HTML templates and well i created a few additional pages of my own to incorporate to the template however and I linked them together well i thought i did and when i click the button linked to my created pages it does nothing it does not even refresh the page.
ill put a snippet of the part of the code i have problems with
<div class="col-lg-4 course_col">
<div class="course">
<div class="course_image"><img src="images/Physics.png" alt=""></div>
<div class="course_body">
<div class="course_title">Physics</div>
<div class="course_info">
<ul>
<li>Edward Nkadimeng</li>
<li>Grade 12</li>
</ul>
</div>
<div class="course_text">
<p>Physics Curriclum.</p>
</div>
</div>
</div>
</div>

Daily bible verse from ourmanna.com API is not always displaying

I have HTML and JS code that should display the daily verse from ourmanna.com API. However, the verse is not always displaying. I was wondering if it's a problem on their side or my side?
here is the html code:
<div class="col-md-6">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="daily-verse">
<h2>Daily Verse</h2>
<div class="body-daily-verse">
<div id="ourmanna-verse">Loading...</div>
<script src="https://www.ourmanna.com/verses/api/js/" type="text/javascript"></script>
<p class="daily-verse-text">
</p>
<br />
<p class="verse-reference"></p>
</div>
</div>
</div>
</div>
</div>
Thanks very much

If you look at the script returned by ourmanna, you see the problem is a not escaped quote in the mannaverse:
var mannaverse='"'If you can'?" said Jesus. "Everything is possible for him who believes."';
Correct would be
var mannaverse='"\'If you can\'?" said Jesus. "Everything is possible for him who believes."';
So you cannot do anything about it, it is a ourmanna-problem.

Is there a way to track event when a particular part of page getting seen in browser?

For example:
<div class="div1">
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
<div class="div5">
</div>
...
</div>
Imaging that the blocks are big ones, and the browser view cannot hold all of them at the same time. Is there a way if I can get idea that a particular block get displayed and viewed by user?

All toggle open but only when code copy pasted

I am facing a problem with the Jquery toggle option. I copy-pasted the code of the first toggle block to use as a template for the next ones and it worked perfectly on the first page. I personalised 8 blocks that open and close when clicked.
But when I copy-pasted some of those to put them on another page, they are all open by default. The same exact code gives a different outcome.
As suggested in other posts I tried changing the class and ID names, and over write with 'ready-hide' but it still won't make the toggle 'closed' by default.
How could I have the toggable blocks closed when the page opens?
I'm sorry for the gibberish, this is my first try at coding and I could really use a little help!
Thank you
Example of my code that works on one page but not the next one:
<div id="flip1" class="flip">
<span style="cursor:pointer">
<img src="img1"/><b>Title1</b>
</span>
</div>
<div id="panel1" class="panel">
<div class="type1">
<article id="article1">
<h2>Title first article</h2><img src="img"/>bla bla bla</article>
</div>
</div>
<script>
$(document).ready(function(){
$("#panel1").hide();
$("#flip1").click(function(){
$("#panel1").slideToggle("slow");
});
});
</script>
<div id="flip2" class="flip">
<span style="cursor:pointer">
<img src="img2"/><b>title2</b>
</span>
</div>
<div id="panel2" class="panel">
<div class="type2">
<article id="article2">
<h2>Title second article</h2><img src="img"/>Bla Bla bla Bla</article>
</div>
</div>
<script>
$(document).ready(function(){
$("#panel2").hide();
$("#flip2").click(function(){
$("#panel2").slideToggle("slow");
});
});
</script>
Thanks again!