Updated search results

CSS/*.css

@@ -209,6 +209,19 @@ body{
     .visible{
         visibility: hidden;
     }
+
+    .visible-auto {
+        transition: ease-in-out .2;
+        height: auto;
+        visibility: visible;
+    }
+    .visible-absolute {
+        visibility: hidden;
+        height: 0;
+        width: 0;
+        position: absolute;
+    }
+
     .position-center{
         top: 50%;
         left: 50%;

CSS/colors.css

@@ -36,3 +36,5 @@
 
     --side-bar-active: #e3edfd;
 }
+
+

JS/main.js

@@ -693,12 +693,13 @@ function generateSuggestWords(array) {
     for(let i = 0; i < array.length; i++) {
         let div = document.createElement('div')
             div.innerHTML = array[i]
+            div.classList.add('visible-auto')
             // div.onclick = selectSuggestedSearchOption
         let hr = document.createElement('hr')
 
         if(i > 5) {
-            div.classList.add('disable')
+            div.classList.add('visible-absolute')
-            hr.classList.add('disable')
+            hr.classList.add('visible-absolute')
             moreSuggestWordsArray.push(div, hr)
         } 
         section.appendChild(div)
@@ -707,10 +708,14 @@ function generateSuggestWords(array) {
 }
 function moreSuggestWords() { 
     if(document.querySelector('.suggested-words footer').innerHTML.trim() === 'More') {
-        moreSuggestWordsArray.forEach(element => element.classList.remove('disable')) 
+        // moreSuggestWordsArray.forEach(element => element.classList.remove('visible-absolute')) 
+        let height = document.querySelectorAll('.suggested-words section div').length * 16 + document.querySelectorAll('.suggested-words section div').length + 
+        console.log(document.querySelectorAll('.suggested-words section div').length)
+        document.documentElement.style.cssText = `--suggest-more:${height}px`;
         document.querySelector('.suggested-words footer').innerHTML = 'Less'    
     } else {
-        moreSuggestWordsArray.forEach(element => element.classList.add('disable')) 
+        document.documentElement.style.cssText = `--suggest-more:auto`;
+        // moreSuggestWordsArray.forEach(element => element.classList.add('visible-absolute')) 
         document.querySelector('.suggested-words footer').innerHTML = 'More'    
     }
 }

headlines.php

@@ -110,7 +110,7 @@
 
     <?php include 'add-ons/navigation-bar.php' ?>
 
-    <div class="login-option-div grid absolute fixed" id="login-option-div">
+    <div class="login-option-div grid absolute fixed" id="login-option-div">    
         <header class="grid">
             <span class="flex align-center justify-center ">Sign in to</span>
             <h1 class="flex align-center justify-center ">News Website</h1>