Updated foldable function - now swaps visibility

Xarlizard · Oct 15, 2024 · be3ab4e · be3ab4e
1 parent bfc5d98
commit be3ab4e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -33,7 +33,7 @@ <h1>Charlie - @xarlizard</h1>
   <main>
     <div class="container">
       <text class="overview">Portfolio</text>
-      <div class="containerTop">
+      <div class="containerTop" id="foldable0">
         <div class="row">
           <div class="card instagram">
             <div class="title"><img src="./src/images/icon-github.png" alt="icon"> Interior Design Site</div>
@@ -131,7 +131,7 @@ <h1>Charlie - @xarlizard</h1>
              </div>
             </div>
             <div class="card" >
-              <div class="info"><text>Advanced Blockchain Skills</text><img src="./src/images/icon-university-nicosia_grey.png" alt="icon"></div>
+              <div class="info"><text>Advanced Blockchain Skills Certificate</text><img src="./src/images/icon-university-nicosia_grey.png" alt="icon"></div>
               <div class="values">
                 <a href="https://trust-food.ubitech.eu/certificates/ca861786c35e9605e0ae63c2fc3cadc6" target="_blank">
                   <img src="./src/images/certificate_10.png" alt="icon" >
@@ -141,7 +141,7 @@ <h1>Charlie - @xarlizard</h1>
           </div>
           <div class="row">
             <div class="card">
-              <div class="info"><text>MiCA Regulation and CBDC's</text><img src="./src/images/icon-university-nicosia_grey.png" alt="icon"></div>
+              <div class="info"><text>MiCA Regulation and CBDC's Certificate</text><img src="./src/images/icon-university-nicosia_grey.png" alt="icon"></div>
               <div class="values">
                 <a href="https://trust-food.ubitech.eu/certificates/350a6387a1989ee629d3405a6fa27f31" target="_blank">
                   <img src="./src/images/certificate_11.png" alt="icon" >
@@ -161,15 +161,15 @@ <h1>Charlie - @xarlizard</h1>
         <div class="bigRow">
           <div class="row">
             <div class="card">
-              <div class="info"><text>Google Ads Apps</text><img src="./src/images/icon-google.svg" alt="icon"></div>
+              <div class="info"><text>Google Ads Apps Certificate</text><img src="./src/images/icon-google.svg" alt="icon"></div>
               <div class="values">
                 <a href="https://skillshop.exceedlms.com/student/award/zKJHzMaUS4PS9deKMhTCrEUk?id=277115609" target="_blank">
                   <img src="./src/images/certificate_1.png" alt="icon" >
                 </a>
              </div>
             </div>
             <div class="card" >
-              <div class="info"><text>Bitcoin101</text><img src="./src/images/icon-bccouncil.svg" alt="icon"></div>
+              <div class="info"><text>Bitcoin101 Certificate</text><img src="./src/images/icon-bccouncil.svg" alt="icon"></div>
               <div class="values">
                 <a href="https://www.credential.net/7b011d83-3994-4ef5-9326-0c1904195941" target="_blank">
                   <img src="./src/images/certificate_2.png" alt="icon" >
@@ -179,15 +179,15 @@ <h1>Charlie - @xarlizard</h1>
           </div>
           <div class="row">
             <div class="card">
-              <div class="info"><text>Network Defense</text><img src="./src/images/icon-eccouncil.png" alt="icon"></div>
+              <div class="info"><text>Network Defense Certificate</text><img src="./src/images/icon-eccouncil.png" alt="icon"></div>
               <div class="values">
                 <a href="https://codered.eccouncil.org/certificate/595a000a-9b7b-4e3d-9399-bb2f03a87456" target="_blank">
                   <img src="./src/images/certificate_3.png" alt="icon" >
                 </a>
               </div>
             </div>
             <div class="card">
-              <div class="info"><text>Digital Forensics</text><img src="./src/images/icon-eccouncil.png" alt="icon"></div>
+              <div class="info"><text>Digital Forensics Certificate</text><img src="./src/images/icon-eccouncil.png" alt="icon"></div>
               <div class="values">
                 <a href="https://codered.eccouncil.org/certificate/0e565d4d-12a8-4ba5-a9eb-7c4ee0913a70" target="_blank">
                   <img src="./src/images/certificate_4.png" alt="icon" >

diff --git a/src/js/onclick_row_toggle.js b/src/js/onclick_row_toggle.js
@@ -1,20 +1,27 @@
 var c = 0; //iteration counter
 
 function toggle_row() {
+    var foldable0 = document.getElementById('foldable0');
     var foldable1 = document.getElementById('foldable1');
     var foldable2 = document.getElementById('foldable2');
     var showMore = document.getElementById('showMore');
     var showLess = document.getElementById('showLess');
 
     if (c == 0) {
+      foldable0.style.display = "none";
       foldable1.style.display = "flex";
+      foldable1.style.flexDirection = "row";
       c++;  
     } else if (c == 1) {
+      foldable1.style.display = "none";
       foldable2.style.display = "flex";
+      foldable2.style.flexDirection = "row";
       showMore.style.display = "none"
       showLess.style.display = "flex"
       c++;
     } else if (c == 2) {
+      foldable0.style.display = "flex";
+      foldable0.style.flexDirection = "row";
       foldable1.style.display = "none";
       foldable2.style.display = "none";
       c = 0;