diff --git a/index.html b/index.html index 1a845bc8..a9802bac 100755 --- a/index.html +++ b/index.html @@ -33,6 +33,7 @@ + @@ -162,22 +163,30 @@

Demographics

Age

+ +
-
-

Gender

-
-
-
- - +
+
+

Gender

+
+
+
+ + +

Employment

+ +

Education

+ +
@@ -238,7 +247,7 @@

Insights

- + diff --git a/js/custom.js b/js/custom.js index fa367491..56d75262 100755 --- 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); }); });