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:
parent
5560df9504
commit
6b649e2f48
3 changed files with 23 additions and 2 deletions
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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(); }); });
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -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’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’s Eschatology and Golden Era Hip Hop">
|
||||||
|
@ -101,6 +102,8 @@ freedom can be in the service of human freedom.</p>
|
||||||
<p>We’re proud of how much we’ve been able to accomplish in the last year,
|
<p>We’re proud of how much we’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…">
|
<div data-read-more="Read more about staying connected…">
|
||||||
<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 %}
|
||||||
|
|
Loading…
Reference in a new issue