Hide by default responsibilities and click to show them

layouts/partials/experiences/multiple-positions.html

@@ -18,7 +18,7 @@
 {{ range $index,$position:= .positions }}
     <div class="company-timeline-item position">
         <h6 class="designation">{{ $position.designation }}</h6>
-        <p class="text-muted">{{ $position.start }} - {{if $position.end }} {{ $position.end }} {{else}} Present {{end}}</p>
+        <span class="text-muted company-period">{{ $position.start }} - {{ $position.end }} </span>
         <ul class="justify-content-around responsabilities">
         {{ range $position.responsibilities }}
             <li>{{ . | markdownify }}</li>

layouts/partials/experiences/single-position.html

@@ -5,7 +5,7 @@
     <div class="company-info">
         <h5>{{ .designation }}</h5>
         <h6>{{ if .company.url }}<a href={{.company.url}}>{{ .company.name }}</a>{{ else }}{{ .company.name }}{{ end }}</h6>
-        <span class="text-muted">{{ .start }} - {{ .end }},
+        <span class="text-muted company-period">{{ .start }} - {{ .end }},
             {{ .company.location }}
         </span>
     </div>

static/assets/css/experiences.css

@@ -22,6 +22,7 @@
 .experiences-section .designation{
  font-weight: 600;
  text-align: left;
+ margin-bottom: 0.25em;
 }
 
 .company{
@@ -158,6 +159,15 @@
   .company-timeline-item.position::after {
     left: 20px;
   }
+
+  .responsabilities {
+    margin-top: 0.5em;
+    display: none;
+  }
+  
+  .company-period {
+    color: #808080 !important;
+  }
 }
 
 /* iPhoneX, iPhone 6,7,8 */

static/assets/js/home.js

@@ -373,6 +373,17 @@ var projectCards;
       adjustRecentPostsHeight();
       showAchievements();
     };
+
+    if (isMobile) {
+      $(".position").click(function() {
+        let responsabilities = $(this).find('.responsabilities');
+        if (responsabilities.is(":visible")) {
+          responsabilities.slideUp( "slow");
+        }
+        else responsabilities.slideDown("slow");
+      });
+    }
+    
   });
 
 })(jQuery);