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…
	
	Add table
		
		Reference in a new issue