makes the song index behave properly

static/script.js

@@ -1,9 +1,6 @@
-function getAnchor() {
-    return (document.URL.split('#').length > 1) ? document.URL.split('#')[1] : null;
-}
-
 window.addEventListener('load', (event) => {
-    const preclicked = getAnchor();
+    const preclicked = window.location.hash.slice(1);
+    console.log(preclicked);
     if (! preclicked) return;
     const radiobutton = document.getElementById(preclicked);
     if (radiobutton){
@@ -21,13 +18,20 @@ function albumselect(code){
         label.scrollIntoView();
     }
     document.getElementById('search-input').value = '';
+    document.getElementById('search-results').innerHTML = '';
 };
 
-function collapse(clickevent){
+function albumHeaderClick(clickevent){
     const radiobutton = document.getElementById(clickevent.target.htmlFor);
     if (radiobutton.checked){
         radiobutton.checked = false;
         clickevent.preventDefault();
+        history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${window.location.search}`);
     }
-}
+    else{
+        window.location.hash = radiobutton.id;
+        const label = clickevent.target;
+        label.scrollIntoView();
+    }
+};
 

templates/songindex.html

@@ -11,7 +11,7 @@
     {% for album_id, name, date, code in album_info %}
     <div class="sort-box album">
         <input type="radio" name="album" id="{{ code }}" class="collapse">
-        <label for="{{ code }}" id="{{ code }}_label" class="sort-header album" onclick="collapse(event)">
+        <label for="{{ code }}" id="{{ code }}_label" class="sort-header album" onclick="albumHeaderClick(event)">
             <img src="{{ url_for('static', filename='albumicons/') }}{{ code }}.svg" alt="{{ code }}" class="album-icon"/> 
             <h2>{{ name }}</h2>
         </label>