Changeset - 6b649e2f48e0
[Not reviewed]
0 3 0
Bradley M. Kuhn - 4 months ago 2020-11-26 03:27:53
bkuhn@sfconservancy.org
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.
3 files changed with 23 insertions and 2 deletions:
0 comments (0 inline, 0 general)
www/conservancy/static/css/forms.css
Show inline comments
...
 
@@ -112,3 +112,8 @@ p.appeal-match-text  {
 
    border: 1px solid #fff;
 
    background: #eee;
 
}
 
a.expander {
 
    font-size: 75%;
 
    font-style: italic;
 
    text-align: center;
 
}
www/conservancy/static/js/supporter-page.js
Show inline comments
 
/* 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.
 
** License: GPLv3-or-later
 
**  Find a copy of GPL at https://sfconservancy.org/GPLv3
...
 
@@ -128,4 +128,17 @@ $(document).ready(function() {
 
            $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(); }); });
 
    });
 
});
www/conservancy/templates/supporter/index.html
Show inline comments
...
 
@@ -77,6 +77,7 @@
 
<span id="form-correction-needed" class="form-error">Please ensure all form data above is correct.</span>
 

	
 
<hr style="clear: both;"/>
 
<div class="expandable-section">
 

	
 
<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">
...
 
@@ -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,
 
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>
 
<div data-read-more="Read more about staying connected&hellip;">
 
<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
 
your money to work fighting for the freedom and rights of all software
 
users.</p>
 

	
 
</div>
 
{% endblock %}
0 comments (0 inline, 0 general)