Supporter page: Support a “Expand All” link for collapsible sections

I wrap the entire section that has material that can be expanded in a
div with class `expandable-section`.  Once doing so, if you provide an
anchor with the class of `expander`, that anchor will be created with
text in the `data-expand-link-text` attribute.

I've also added some CSS to make the link look a certain way, for
good measure.
This commit is contained in:
Bradley M. Kuhn 2020-11-25 19:15:11 -08:00
parent 5560df9504
commit 6b649e2f48
3 changed files with 23 additions and 2 deletions

View file

@ -112,3 +112,8 @@ p.appeal-match-text {
border: 1px solid #fff; border: 1px solid #fff;
background: #eee; background: #eee;
} }
a.expander {
font-size: 75%;
font-style: italic;
text-align: center;
}

View file

@ -1,5 +1,5 @@
/* Copyright (C) 2012-2013 Denver Gingerich, /* Copyright (C) 2012-2013 Denver Gingerich,
** Copyright (C) 2013-2014 Bradley M. Kuhn, ** Copyright (C) 2013-2014, 2020 Bradley M. Kuhn,
** Copyright (C) 2016, 2020 Brett Smith. ** Copyright (C) 2016, 2020 Brett Smith.
** License: GPLv3-or-later ** License: GPLv3-or-later
** Find a copy of GPL at https://sfconservancy.org/GPLv3 ** Find a copy of GPL at https://sfconservancy.org/GPLv3
@ -128,4 +128,17 @@ $(document).ready(function() {
$readmore.hide().replaceWith($linkpara); $readmore.hide().replaceWith($linkpara);
} }
}); });
$('a[data-expand-link-text]').each(function(index, element) {
var $element = $(element);
$element.append($element.data('expand-link-text'));
$element.removeAttr('data-expand-link-text');
});
$('.expandable-section').each(function(index) {
var $expandlink = $(this).children('.expander');
var $ourexpandablesection = $(this);
$expandlink.addClass('active').trigger('click');
$expandlink.on('click', function(event) {
$expandlink.fadeOut('slow');
$ourexpandablesection.find('.read-more').each(function(index) { $(this).click(); }); });
});
}); });

View file

@ -77,6 +77,7 @@
<span id="form-correction-needed" class="form-error">Please ensure all form data above is correct.</span> <span id="form-correction-needed" class="form-error">Please ensure all form data above is correct.</span>
<hr style="clear: both;"/> <hr style="clear: both;"/>
<div class="expandable-section">
<div class="picture right" style="clear: right;"> <div class="picture right" style="clear: right;">
<img src="/img/2020_Sebro-Tony_CopyleftConf.jpg" alt="Tony Sebro speaks on stage in front of a slide comparing 1800&rsquo;s Eschatology and Golden Era Hip Hop"> <img src="/img/2020_Sebro-Tony_CopyleftConf.jpg" alt="Tony Sebro speaks on stage in front of a slide comparing 1800&rsquo;s Eschatology and Golden Era Hip Hop">
@ -101,6 +102,8 @@ freedom can be in the service of human freedom.</p>
<p>We&rsquo;re proud of how much we&rsquo;ve been able to accomplish in the last year, <p>We&rsquo;re proud of how much we&rsquo;ve been able to accomplish in the last year,
even in the face of so many obstacles.</p> even in the face of so many obstacles.</p>
<a class="expander" data-expand-link-text="(Expand All Sections)"/>
<h3 id="StayingConnected">Staying Connected</h3> <h3 id="StayingConnected">Staying Connected</h3>
<div data-read-more="Read more about staying connected&hellip;"> <div data-read-more="Read more about staying connected&hellip;">
<p>We helped folks stay connected, even when travel <p>We helped folks stay connected, even when travel
@ -199,5 +202,5 @@ dollar you give to Conservancy is used to support critical work. While companie
you products this end of year season, we offer you a chance to donate to something much bigger. By becoming a Conservancy Supporter, you can put you products this end of year season, we offer you a chance to donate to something much bigger. By becoming a Conservancy Supporter, you can put
your money to work fighting for the freedom and rights of all software your money to work fighting for the freedom and rights of all software
users.</p> users.</p>
</div>
{% endblock %} {% endblock %}