diff --git a/opentech/public/funds/templates/public_funds/blocks/related_projects.html b/opentech/public/funds/templates/public_funds/blocks/related_projects.html
index d85fc3e173d50bf9fa653ef1e2cfa6c078829899..c3606bd6d83624f1918700d4a288be583bdd6748 100644
--- a/opentech/public/funds/templates/public_funds/blocks/related_projects.html
+++ b/opentech/public/funds/templates/public_funds/blocks/related_projects.html
@@ -2,11 +2,19 @@
<div class="wrapper wrapper--breakout">
<div class="wrapper--media-boxes">
<div class="grid grid--two grid--medium-gap">
- {% for funding in page.projectfunding_set.unique %}
- {% if funding.page.active and funding.page.live %}
+ {% for funding in page.projectfunding_set.unique %}
+ {% if funding.page.live %}
+ {% if forloop.counter0 == 10 %}
+ <input class="show-more--checkbox" type="checkbox" id="projects-toggle">
+ <label class="link link--button link--button__center show-more--button" for="projects-toggle">Show more</label>
+ {% endif %}
+ {% if forloop.counter0 < 10 %}
{% include "public_funds/includes/project_listing.html" with project=funding.page %}
+ {% else %}
+ {% include "public_funds/includes/project_listing.html" with project=funding.page class="show-more--target" %}
{% endif %}
- {% endfor %}
+ {% endif %}
+ {% endfor %}
</div>
</div>
</div>
@@ -16,8 +24,16 @@
<div class="wrapper--media-boxes">
<div class="grid grid--two grid--medium-gap">
{% for funding in page.funding_set.unique %}
+ {% if forloop.counter0 == 10 %}
+ <input class="show-more--checkbox" type="checkbox" id="fellows-toggle">
+ <label class="link link--button link--button__center show-more--button" for="fellows-toggle">Show more</label>
+ {% endif %}
{% if funding.page.active and funding.page.live %}
- {% include "public_funds/includes/reviewer_listing.html" with person=funding.page.specific %}
+ {% if forloop.counter0 < 10 %}
+ {% include "public_funds/includes/reviewer_listing.html" with person=funding.page.specific %}
+ {% else %}
+ {% include "public_funds/includes/reviewer_listing.html" with person=funding.page.specific class="show-more--target"%}
+ {% endif %}
{% endif %}
{% endfor %}
</div>
diff --git a/opentech/public/funds/templates/public_funds/blocks/related_reviewers.html b/opentech/public/funds/templates/public_funds/blocks/related_reviewers.html
index 1fb07e0684e8b7254af4ee366b3e1eb872c12397..667d495ec6e5c44e5e6c6e967da69dfc06e898e4 100644
--- a/opentech/public/funds/templates/public_funds/blocks/related_reviewers.html
+++ b/opentech/public/funds/templates/public_funds/blocks/related_reviewers.html
@@ -5,7 +5,15 @@
{% for person in page.reviewers.all %}
{% with person_page=person.reviewer.specific %}
{% if person_page.active and person_page.live %}
- {% include "public_funds/includes/reviewer_listing.html" with person=person.reviewer.specific %}
+ {% if forloop.counter0 == 10 %}
+ <input class="show-more--checkbox" type="checkbox" id="reviewers-toggle">
+ <label class="link link--button link--button__center show-more--button" for="reviewers-toggle">Show more</label>
+ {% endif %}
+ {% if forloop.counter0 < 10 %}
+ {% include "public_funds/includes/reviewer_listing.html" with person=person.reviewer.specific %}
+ {% else %}
+ {% include "public_funds/includes/reviewer_listing.html" with person=person.reviewer.specific class="show-more--target" %}
+ {% endif %}
{% endif %}
{% endwith %}
{% endfor %}
diff --git a/opentech/public/funds/templates/public_funds/includes/project_listing.html b/opentech/public/funds/templates/public_funds/includes/project_listing.html
index a6e573e908e8364a192e1e3a30b6d0885b700127..cdf06d082455691d1258a4a7ffe61fba84f1394d 100644
--- a/opentech/public/funds/templates/public_funds/includes/project_listing.html
+++ b/opentech/public/funds/templates/public_funds/includes/project_listing.html
@@ -1,5 +1,5 @@
{% load wagtailcore_tags wagtailimages_tags %}
-<a class="media-box" href="{% pageurl project %}">
+<a class="media-box {{ class }}" href="{% pageurl project %}">
{% image project.icon max-210x235 as project_icon %}
{% include "utils/includes/media_box_icon.html" with page_icon=project_icon listing=True %}
@@ -10,4 +10,3 @@
{% endif %}
</div>
</a>
-
diff --git a/opentech/public/funds/templates/public_funds/includes/reviewer_listing.html b/opentech/public/funds/templates/public_funds/includes/reviewer_listing.html
index 82fdff0357210b2c746833d2846633a194b8497f..1d439aedafe1992f6edf647b0d0e392904bec059 100644
--- a/opentech/public/funds/templates/public_funds/includes/reviewer_listing.html
+++ b/opentech/public/funds/templates/public_funds/includes/reviewer_listing.html
@@ -1,5 +1,5 @@
{% load wagtailcore_tags wagtailimages_tags %}
-<a class="media-box" href="{% pageurl person %}">
+<a class="media-box {{ class }}" href="{% pageurl person %}">
{% image person.photo max-210x235 as person_photo %}
{% include "utils/includes/media_box_icon.html" with page_icon=person_photo listing=True %}
diff --git a/opentech/public/people/templates/people/includes/person_listing.html b/opentech/public/people/templates/people/includes/person_listing.html
index 86be4be58cec92e244b04fadda92129ae21823cc..9a6ce2e7bea505c812151ecf58097cbf3a1488ca 100644
--- a/opentech/public/people/templates/people/includes/person_listing.html
+++ b/opentech/public/people/templates/people/includes/person_listing.html
@@ -1,5 +1,5 @@
{% load wagtailcore_tags wagtailimages_tags %}
-<a class="listing" href="{% pageurl person %}">
+<a class="listing {{ class }}" href="{% pageurl person %}">
<div class="listing__image listing__image--default">
{% if person.photo %}
{% image person.photo fill-180x180 %}
diff --git a/opentech/static_src/src/sass/public/components/_link.scss b/opentech/static_src/src/sass/public/components/_link.scss
index 825ea267041ccc7bcd37576fb65c3cd21fbd78ca..b22db3c619db81d063c13807b65038ce776cbbac 100644
--- a/opentech/static_src/src/sass/public/components/_link.scss
+++ b/opentech/static_src/src/sass/public/components/_link.scss
@@ -11,6 +11,11 @@
}
}
+ &__center {
+ display: block;
+ width: fit-content;
+ margin: 0 auto;
+ }
}
&--button-secondary {
diff --git a/opentech/static_src/src/sass/public/components/_show-more.scss b/opentech/static_src/src/sass/public/components/_show-more.scss
new file mode 100644
index 0000000000000000000000000000000000000000..80bb2d4d4bca3a03520cbc2f3c7da593a327a009
--- /dev/null
+++ b/opentech/static_src/src/sass/public/components/_show-more.scss
@@ -0,0 +1,28 @@
+.show-more {
+ &--button {
+ cursor: pointer;
+ user-select: none;
+
+ @include media-query(tablet-portrait) {
+ grid-column: 1 / 3;
+ }
+ }
+
+ &--target {
+ display: none;
+ }
+
+ &--checkbox {
+ display: none;
+
+ &:checked {
+ & ~ .show-more--target {
+ display: flex;
+ }
+ & ~ .show-more--button {
+ display: none;
+ }
+ }
+ }
+
+}
diff --git a/opentech/static_src/src/sass/public/main.scss b/opentech/static_src/src/sass/public/main.scss
index 7f09236fa417640878b5a4f94aaac4377369554e..2c66fe8e0d0edb4db394771200788b05ccbac3e3 100755
--- a/opentech/static_src/src/sass/public/main.scss
+++ b/opentech/static_src/src/sass/public/main.scss
@@ -35,6 +35,7 @@
@import 'components/rich-text';
@import 'components/section';
@import 'components/select2';
+@import 'components/show-more';
@import 'components/wrapper';
// Layout