Read-more button for new blog page(#5449)

publiclab · Apr 21, 2019 · 90e83e5 · 90e83e5
1 parent 39c739c
commit 90e83e5
Showing 1 changed file with 39 additions and 1 deletion.
diff --git a/app/views/tag/blog2.html.erb b/app/views/tag/blog2.html.erb
@@ -10,7 +10,7 @@
      This is basic html layout
      </h3>
      <hr>
-    <p>
+    <p class="more">
     Here is the lorem ipsum content
     <br>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
@@ -80,4 +80,42 @@
   margin-right:1em;
   margin-left:1em;
 }
+.more-content span {
+    display: none;
+}
+.more-link {
+    width: 150px;
+}
+.more-button{
+  text-align: center;
+  margin: 20px;
+}
 </style>
+<script>
+  $(document).ready(function() {
+    var showChar = 300;  // How many characters are shown by default
+    var moretext = "Read more";
+    var lesstext = "Read less";
+    $('.more').each(function() {
+        var content = $(this).html();
+        if(content.length > showChar) {
+            var c = content.substr(0, showChar);
+            var h = content.substr(showChar, content.length - showChar);
+            var html = c + '<span class="moreellipses">' + '</span><span class="more-content"><span>' + h + '</span>&nbsp;&nbsp;<div class="more-button"><a class="btn btn-default more-link">' + moretext + '</a></div></span>';
+            $(this).html(html);
+        }
+    });
+    $(".more-link").click(function(){
+        if($(this).hasClass("less")) {
+            $(this).removeClass("less");
+            $(this).html(moretext);
+        } else {
+            $(this).addClass("less");
+            $(this).html(lesstext);
+        }
+        $(this).parent().prev().toggle();
+        $(this).prev().toggle();
+        return false;
+    });
+});
+</script>