try epfl-ada-2018#2

Sytta · Dec 9, 2018 · 8e4d72f · 8e4d72f
1 parent b896af2
commit 8e4d72f
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 37 deletions.
diff --git a/index.html b/index.html
@@ -33,6 +33,7 @@
     <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 
     <script src="./js/particles/particles.js"></script>
     <script src="./js/load_plotly.js"></script>
+    <script type="text/javascript" src="js/custom.js"></script>
 
   </head>
   <body data-spy="scroll" data-target="#navigation" data-offset="120">
@@ -162,22 +163,30 @@ <h2 class="heading">Demographics</h2>
             </div>
             <div class="col">
               <h4 class="subheading">Age</h4>
+              <button class="square-button padding-large light-grey more1 more-button1" style="margin-top:64px">SHOW MORE</button>
+              <button class="square-button padding-large light-grey less1 less-button1" style="margin-top:64px">SHOW LESS</button>
 
             </div>
-            <div class="col">
-                <h4 class="subheading">Gender</h4>
-                <div id="prevalence_gender_disorder_share_global"></div>
-                <div id="share_gender_continent"></div>
-                <div id="prevalence_gender_share_per_country"></div>
-                <button class="square-button padding-large light-grey more more-button" style="margin-top:64px">SHOW MORE</button>
-                <button class="square-button padding-large light-grey less less-button" style="margin-top:64px">SHOW LESS</button>
+            <div class="row">
+              <div class="col">
+                  <h4 class="subheading more">Gender</h4>
+                  <div id="prevalence_gender_disorder_share_global" class="more"></div>
+                  <div id="share_gender_continent" class="less"></div>
+                  <div id="prevalence_gender_share_per_country" class="less"></div>
+                  <button class="square-button padding-large light-grey more2 more-button2" style="margin-top:64px">SHOW MORE</button>
+                  <button class="square-button padding-large light-grey less2 less-button2" style="margin-top:64px">SHOW LESS</button>
+              </div>
             </div>
             <div class="col">
                 <h4 class="subheading">Employment</h4>
+                <button class="square-button padding-large light-grey more3 more-button3" style="margin-top:64px">SHOW MORE</button>
+                <button class="square-button padding-large light-grey less3 less-button3" style="margin-top:64px">SHOW LESS</button>
 
             </div>
             <div class="col">
                 <h4 class="subheading">Education</h4>
+                <button class="square-button padding-large light-grey more4 more-button4" style="margin-top:64px">SHOW MORE</button>
+                <button class="square-button padding-large light-grey less4 less-button4" style="margin-top:64px">SHOW LESS</button>
 
             </div>
           </div>
@@ -238,7 +247,7 @@ <h2 class="heading">Insights</h2>
     <!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;amp;sensor=false"></script>
     <script src="js/gmaps.js"></script> -->
     <!-- main script-->
-    <script src="js/custom.js"></script>
+
 
     <script src="js/front.js"></script>
     <!-- Google Analytics: change UA-XXXXX-X to be your site's ID.-->

diff --git a/js/custom.js b/js/custom.js
@@ -1,35 +1,51 @@
-function openSection(evt, sectionName) {
-  // Declare all variables
-  var i, tabcontent, tablinks;
+// Show more Show less Button
+$(document).ready(function () {
+    $('.more1').show();
+    $('.less1').hide();
+    $('.more2').show();
+    $('.less2').hide();
+    $('.more3').show();
+    $('.less3').hide();
+    $('.more4').show();
+    $('.less4').hide();
 
-  // Get all elements with class="tabcontent" and hide them
-  tabcontent = document.getElementsByClassName("tabcontent");
-  for (i = 0; i < tabcontent.length; i++) {
-    tabcontent[i].style.display = "none";
-  }
+    $('.more-button1').click(function () {
+        $('.less1').show();
+        $('.more-button1').hide();
+    });
+    $('.less-button1').click(function () {
+        $('.more1').show();
+        $('.less-button1').hide();
+        $('.less1').hide(300);
+    });
 
-  // Get all elements with class="tablinks" and remove the class "active"
-  tablinks = document.getElementsByClassName("tablinks");
-  for (i = 0; i < tablinks.length; i++) {
-    tablinks[i].className = tablinks[i].className.replace(" active", "");
-  }
+    $('.more-button2').click(function () {
+        $('.less2').show();
+        $('.more-button2').hide();
+    });
+    $('.less-button2').click(function () {
+        $('.more2').show();
+        $('.less-button2').hide();
+        $('.less2').hide(300);
+    });
 
-  // Show the current tab, and add an "active" class to the link that opened the tab
-  document.getElementById(sectionName).style.display = "block";
-  evt.currentTarget.className += " active";
-}
+    $('.more-button3').click(function () {
+        $('.less3').show();
+        $('.more-button3').hide();
+    });
+    $('.less-button3').click(function () {
+        $('.more3').show();
+        $('.less-button3').hide();
+        $('.less3').hide(300);
+    });
 
-// Show more Show less Button
-$(document).ready(function () {
-    $('.more').show();
-    $('.less').hide();
-    $('.more-button').click(function () {
-        $('.less').show();
-        $('.more-button').hide();
-    });
-    $('.less-button').click(function () {
-        $('.more').show();
-        $('.less-button').hide();
-        $('.less').hide(300);
+    $('.more-button3').click(function () {
+        $('.less3').show();
+        $('.more-button3').hide();
+    });
+    $('.less-button3').click(function () {
+        $('.more3').show();
+        $('.less-button3').hide();
+        $('.less3').hide(300);
     });
 });