├── .repo-rt ├── README.md ├── css ├── basic.css └── enhanced.css ├── images ├── icon-file-warning.png ├── icon-triangle.gif ├── icon-triangle.png └── icon-warning.png ├── index.html ├── js ├── example.js └── jQuery.collapsible.js └── license.txt /.repo-rt: -------------------------------------------------------------------------------- 1 | RETIRED 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | :warning: This project is archived and the repository is no longer maintained. 2 | 3 | Code Examples from the book [Designing with Progressive Enhancement](http://filamentgroup.com/dwpe) 4 | ================================ 5 | 6 | This repository includes open-sourced code developed and maintained by Filament Group, Inc. as part of the book "Designing With Progressive Enhancement" (Peachpit). 7 | 8 | All examples use the [jQuery JavaScript library](http://jquery.com). 9 | 10 | These code examples use the [EnhanceJS framework](https://github.com/filamentgroup/EnhanceJS) for applying progressive enhancement based on browser capabilities testing. 11 | -------------------------------------------------------------------------------- /css/basic.css: -------------------------------------------------------------------------------- 1 | body { font-family: "Segoe UI", Arial, sans-serif; } 2 | div#message li em { display: block; } -------------------------------------------------------------------------------- /css/enhanced.css: -------------------------------------------------------------------------------- 1 | body { font-size:62.5%; margin:10px; color:#333; } 2 | div#message { padding:1em 20px; border:2px solid #aaa; background:#fff; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; width:430px; margin-bottom:20px; } 3 | div#message h1 { font-size:1.9em; font-weight:bold; padding-left:30px; background:url(../images/icon-warning.png) left .2em no-repeat; } 4 | div#message p { font-size:1.4em; } 5 | div#message h2 { font-size:1.5em; font-weight:normal; } 6 | div#message ul { border-top:1px solid #aaa; padding-left:0; margin-left:16px; } 7 | div#message li { line-height:1; font-size:1.3em; color:#000; border-bottom:1px solid #aaa; padding:.5em 40px .5em 30px; background:url(../images/icon-file-warning.png) left center no-repeat; display:block; list-style:none; overflow:hidden; } 8 | div#message li span.file { float:left; } 9 | div#message li em { color:#666; font-style:italic; float:right; font-size:.9em; } 10 | .collapsible-heading { padding-left:15px; background:url(../images/icon-triangle.png) 0 6px no-repeat; cursor:pointer; } 11 | .collapsible-heading-collapsed { background-position:0 -84px; } 12 | .collapsible-heading-toggle { text-decoration:none; color:#333; } 13 | .collapsible-heading-status { position:absolute; left:-99999px; } 14 | .collapsible-content { overflow:hidden; } 15 | .collapsible-content-collapsed { display:none; } -------------------------------------------------------------------------------- /images/icon-file-warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/jQuery-Collapsible-Content/71972765618979e102aaf4450d58a71a65f8530e/images/icon-file-warning.png -------------------------------------------------------------------------------- /images/icon-triangle.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/jQuery-Collapsible-Content/71972765618979e102aaf4450d58a71a65f8530e/images/icon-triangle.gif -------------------------------------------------------------------------------- /images/icon-triangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/jQuery-Collapsible-Content/71972765618979e102aaf4450d58a71a65f8530e/images/icon-triangle.png -------------------------------------------------------------------------------- /images/icon-warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/jQuery-Collapsible-Content/71972765618979e102aaf4450d58a71a65f8530e/images/icon-warning.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Spindown Example 6 | 7 | 8 | 19 | 20 | 21 | 22 |
23 |

Upload: 2 issues

24 |

The rest of your photos were uploaded successfully but 2 photos were not uploaded because they are not a supported format.

25 |

Details

26 | 30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /js/example.js: -------------------------------------------------------------------------------- 1 | $(function(){ 2 | $('h2').collapsible(); 3 | }); -------------------------------------------------------------------------------- /js/jQuery.collapsible.js: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------------------------------- 3 | * jQuery collapsible plugin 4 | * Author: Scott Jehl, scott@filamentgroup.com 5 | * Copyright (c) 2009 Filament Group 6 | * licensed under MIT (filamentgroup.com/examples/mit-license.txt) 7 | * -------------------------------------------------------------------- 8 | */ 9 | $.fn.collapsible = function(){ 10 | return $(this).each(function(){ 11 | 12 | //define 13 | var collapsibleHeading = $(this); 14 | var collapsibleContent = collapsibleHeading.next(); 15 | 16 | //modify markup & attributes 17 | collapsibleHeading.addClass('collapsible-heading') 18 | .prepend('') 19 | .wrapInner(''); 20 | 21 | collapsibleContent.addClass('collapsible-content'); 22 | 23 | //events 24 | collapsibleHeading 25 | .bind('collapse', function(){ 26 | $(this) 27 | .addClass('collapsible-heading-collapsed') 28 | .find('.collapsible-heading-status').text('Show '); 29 | 30 | collapsibleContent.slideUp(function(){ 31 | $(this).addClass('collapsible-content-collapsed').removeAttr('style').attr('aria-hidden',true); 32 | }); 33 | }) 34 | .bind('expand', function(){ 35 | $(this) 36 | .removeClass('collapsible-heading-collapsed') 37 | .find('.collapsible-heading-status').text('Hide '); 38 | 39 | collapsibleContent 40 | .slideDown(function(){ 41 | $(this).removeClass('collapsible-content-collapsed').removeAttr('style').attr('aria-hidden',false); 42 | }); 43 | }) 44 | .click(function(){ 45 | if( $(this).is('.collapsible-heading-collapsed') ){ 46 | $(this).trigger('expand'); 47 | } 48 | else { 49 | $(this).trigger('collapse'); 50 | } 51 | return false; 52 | }) 53 | .trigger('collapse'); 54 | }); 55 | }; -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2010 Filament Group, Inc 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. --------------------------------------------------------------------------------