website Changeset - 6b649e2f48e0 · Conservancy Kallithea

Changeset - 6b649e2f48e0

Parent rev.

Child rev.

[Not reviewed]

0 3 0

Bradley M. Kuhn - 3 years 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:

www/conservancy/static/css/forms.css

www/conservancy/static/js/supporter-page.js

www/conservancy/templates/supporter/index.html

0 comments (0 inline, 0 general)

www/conservancy/static/css/forms.css

➞

Show inline comments

@@ ... / @@ -114 +114,6 @@ p.appeal-match-text { @@
+}
 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.
@@ ... / @@ -130,2 +130,15 @@ $(document).ready(function() { @@
     });
     $('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

@@ ... / @@ -79,2 +79,3 @@ @@
 <hr style="clear: both;"/>
 <div class="expandable-section">
@@ ... / @@ -103,2 +104,4 @@ 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>
@@ ... @@
 users.</p>
+</div>
 {% endblock %}

0 comments (0 inline, 0 general)