diff --git a/aleksis/core/static/js/main.js b/aleksis/core/static/js/main.js
index f3439d2a573a93a094e189c142e0d9fc6ee41cf8..27b5c5ad8fb126391f98e61b75883f965e9970e2 100644
--- a/aleksis/core/static/js/main.js
+++ b/aleksis/core/static/js/main.js
@@ -64,4 +64,16 @@ $(document).ready( function () {
             "paging": false
         });
     });
+
+    // Initialize text collapsibles [MAT, own work]
+    $(".text-collapsible").addClass("closed").removeClass("opened");
+
+    $(".text-collapsible .open-icon").click(function (e) {
+        var el = $(e.target).parent();
+        el.addClass("opened").removeClass("closed");
+    });
+    $(".text-collapsible .close-icon").click(function (e) {
+        var el = $(e.target).parent();
+        el.addClass("closed").removeClass("opened");
+    });
 });
diff --git a/aleksis/core/static/style.scss b/aleksis/core/static/style.scss
index 1e4433c0f317612636b7e4ef6893f1b5a4ac32c0..e2cc69479f8cca34d7f2b95c2b70d61aba284174 100644
--- a/aleksis/core/static/style.scss
+++ b/aleksis/core/static/style.scss
@@ -368,6 +368,27 @@ main .alert p:first-child, main .alert div:first-child {
   margin-right: -10px;
 }
 
+// Text collapsible
+
+.text-collapsible > .material-icons {
+    font-size: 20px;
+    line-height: 15px;
+    margin-bottom: 2px;
+    margin-left: -1px;
+    vertical-align: middle;
+    cursor: pointer;
+    color: #6d6d6d;
+}
+
+.text-collapsible.opened .a,
+.text-collapsible.opened > .material-icons.open-icon {
+    display: none;
+}
+
+.text-collapsible.closed .b,
+.text-collapsible.closed > .material-icons.close-icon {
+    display: none;
+}
 
 // Helpers
 
diff --git a/aleksis/core/templates/components/text_collapsible.html b/aleksis/core/templates/components/text_collapsible.html
new file mode 100644
index 0000000000000000000000000000000000000000..7096e8e9311d7fdcd5f6cffb6af0934fa9d56977
--- /dev/null
+++ b/aleksis/core/templates/components/text_collapsible.html
@@ -0,0 +1,13 @@
+<span class="text-collapsible opened">
+    <span class="a">
+      {% include template with item=qs.first %} –
+      {% include template with item=qs.last %}
+    </span>
+    <i class="material-icons open-icon" title="Show more">add_circle_outline</i>
+    <span class="b">
+      {% for item in qs %}
+        {% include template with item=item %}
+      {% endfor %}
+    </span>
+    <i class="material-icons close-icon" title="Show less">remove_circle_outline</i>
+</span>