├── README.markdown ├── css └── style.css ├── images ├── aquaman.jpg ├── batman.jpg ├── ironman.jpg ├── spiderman.jpg └── superman.jpg ├── index.html └── js ├── gridaccordion.js └── jquery-1.11.0.js /README.markdown: -------------------------------------------------------------------------------- 1 | ### Usage -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | CSS-Tricks Example 3 | by Chris Coyier 4 | http://css-tricks.com 5 | */ 6 | 7 | * { margin: 0; padding: 0; } 8 | html, body { height: 100%; overflow: hidden; background: #eee; } 9 | body { font: 14px Georgia, serif; } 10 | #page-wrap { width: 960px; padding: 0 0 0 15px; margin: 0 auto; overflow: hidden; height: 100%; } 11 | 12 | .info-col { float: left; width: 132px; height: 100%; } 13 | .info-col h2 { text-align: center; font-weight: normal; padding: 25px 0; } 14 | 15 | .image { height: 100px; text-indent: -9999px; display: block; border-right: 1px solid white; } 16 | 17 | .batman { background: url(../images/batman.jpg) center center no-repeat; } 18 | .spiderman { background: url(../images/spiderman.jpg) center center no-repeat; } 19 | .aquaman { background: url(../images/aquaman.jpg) center center no-repeat; } 20 | .ironman { background: url(../images/ironman.jpg) center center no-repeat; } 21 | .superman { background: url(../images/superman.jpg) center center no-repeat; } 22 | 23 | dl { } 24 | dt { padding: 5px; background: #900; color: white; border-bottom: 1px solid white; border-right: 1px solid white; } 25 | dd { position: absolute; left: -9999px; top: -9999px; width: 299px; background: #900; padding: 10px; color: white; border-right: 1px solid white; } 26 | 27 | dt:nth-of-type(1) { background: #b44835; } 28 | dd:nth-of-type(1) { background: #b44835; } 29 | 30 | dt:nth-of-type(2) { background: #ff7d3e; } 31 | dd:nth-of-type(2) { background: #ff7d3e; } 32 | 33 | dt:nth-of-type(3) { background: #ffb03b; } 34 | dd:nth-of-type(3) { background: #ffb03b; } 35 | 36 | dt:nth-of-type(4) { background: #c2a25c; } 37 | dd:nth-of-type(4) { background: #c2a25c; } 38 | 39 | dt:nth-of-type(5) { background: #4c443c; } 40 | dd:nth-of-type(5) { background: #4c443c; } 41 | 42 | dt:nth-of-type(6) { background: #656b60; } 43 | dd:nth-of-type(6) { background: #656b60; } 44 | 45 | .curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; } -------------------------------------------------------------------------------- /images/aquaman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/Grid-Accordion/31a00bf53a57c6000592cebfe3336092ff390ba7/images/aquaman.jpg -------------------------------------------------------------------------------- /images/batman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/Grid-Accordion/31a00bf53a57c6000592cebfe3336092ff390ba7/images/batman.jpg -------------------------------------------------------------------------------- /images/ironman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/Grid-Accordion/31a00bf53a57c6000592cebfe3336092ff390ba7/images/ironman.jpg -------------------------------------------------------------------------------- /images/spiderman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/Grid-Accordion/31a00bf53a57c6000592cebfe3336092ff390ba7/images/spiderman.jpg -------------------------------------------------------------------------------- /images/superman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSS-Tricks/Grid-Accordion/31a00bf53a57c6000592cebfe3336092ff390ba7/images/superman.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grid Accordion 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 |

Superman

22 | 23 | View Image 24 | 25 |
26 |
Super Power
27 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 28 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 29 | commodo consequat.
30 |
Costume
31 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 32 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 33 | commodo consequat.
34 |
Morality
35 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 36 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 37 | commodo consequat.
38 |
Sidekicks
39 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 40 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 41 | commodo consequat.
42 |
Vehicles
43 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 44 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 45 | commodo consequat.
46 |
Weaknesses
47 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 48 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 49 | commodo consequat.
50 |
51 | 52 |
53 | 54 |
55 | 56 |

Batman

57 | 58 | View Image 59 | 60 |
61 |
Super Power
62 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 63 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 64 | commodo consequat.
65 |
Costume
66 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 67 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 68 | commodo consequat.
69 |
Morality
70 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 71 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 72 | commodo consequat.
73 |
Sidekicks
74 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 75 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 76 | commodo consequat.
77 |
Vehicles
78 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 79 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 80 | commodo consequat.
81 |
Weaknesses
82 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 83 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 84 | commodo consequat.
85 |
86 | 87 |
88 | 89 |
90 | 91 |

Aquaman

92 | 93 | View Image 94 | 95 |
96 |
Super Power
97 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 98 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 99 | commodo consequat.
100 |
Costume
101 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 102 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 103 | commodo consequat.
104 |
Morality
105 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 106 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 107 | commodo consequat.
108 |
Sidekicks
109 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 110 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 111 | commodo consequat.
112 |
Vehicles
113 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 114 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 115 | commodo consequat.
116 |
Weaknesses
117 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 118 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 119 | commodo consequat.
120 |
121 | 122 |
123 | 124 |
125 | 126 |

Spiderman

127 | 128 | View Image 129 | 130 |
131 |
Super Power
132 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 133 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 134 | commodo consequat.
135 |
Costume
136 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 137 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 138 | commodo consequat.
139 |
Morality
140 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 141 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 142 | commodo consequat.
143 |
Sidekicks
144 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 145 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 146 | commodo consequat.
147 |
Vehicles
148 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 149 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 150 | commodo consequat.
151 |
Weaknesses
152 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 153 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 154 | commodo consequat.
155 |
156 | 157 |
158 | 159 |
160 | 161 |

Ironman

162 | 163 | View Image 164 | 165 |
166 |
Super Power
167 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 168 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 169 | commodo consequat.
170 |
Costume
171 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 172 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 173 | commodo consequat.
174 |
Morality
175 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 176 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 177 | commodo consequat.
178 |
Sidekicks
179 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 180 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 181 | commodo consequat.
182 |
Vehicles
183 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 184 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 185 | commodo consequat.
186 |
Weaknesses
187 |
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 188 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 189 | commodo consequat.
190 |
191 | 192 |
193 | 194 |
195 | 196 | 197 | 198 | -------------------------------------------------------------------------------- /js/gridaccordion.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | // Set up variables 4 | var $el, $parentWrap, $otherWrap, 5 | $allTitles = $("dt").css({ 6 | padding: 5, // setting the padding here prevents a weird situation, where it would start animating at 0 padding instead of 5 7 | "cursor": "pointer" // make it seem clickable 8 | }), 9 | $allCells = $("dd").css({ 10 | position: "relative", 11 | top: -1, 12 | left: 0, 13 | display: "none" // info cells are just kicked off the page with CSS (for accessibility) 14 | }); 15 | 16 | // clicking image of inactive column just opens column, doesn't go to link 17 | $("#page-wrap").delegate(".image","click", function(e) { 18 | 19 | if ( !$(this).parent().hasClass("curCol") ) { 20 | e.preventDefault(); 21 | $(this).next().find('dt:first').click(); 22 | } 23 | 24 | }); 25 | 26 | // clicking on titles does stuff 27 | $("#page-wrap").delegate("dt", "click", function() { 28 | 29 | // cache this, as always, is good form 30 | $el = $(this); 31 | 32 | // if this is already the active cell, don't do anything 33 | if (!$el.hasClass("current")) { 34 | 35 | $parentWrap = $el.parent().parent(); 36 | $otherWraps = $(".info-col").not($parentWrap); 37 | 38 | // remove current cell from selection of all cells 39 | $allTitles = $("dt").not(this); 40 | 41 | // close all info cells 42 | $allCells.slideUp(); 43 | 44 | // return all titles (except current one) to normal size 45 | $allTitles.animate({ 46 | fontSize: "14px", 47 | paddingTop: 5, 48 | paddingRight: 5, 49 | paddingBottom: 5, 50 | paddingLeft: 5 51 | }); 52 | 53 | // animate current title to larger size 54 | $el.animate({ 55 | "font-size": "20px", 56 | paddingTop: 10, 57 | paddingRight: 5, 58 | paddingBottom: 0, 59 | paddingLeft: 10 60 | }).next().slideDown(); 61 | 62 | // make the current column the large size 63 | $parentWrap.animate({ 64 | width: 320 65 | }).addClass("curCol"); 66 | 67 | // make other columns the small size 68 | $otherWraps.animate({ 69 | width: 140 70 | }).removeClass("curCol"); 71 | 72 | // make sure the correct column is current 73 | $allTitles.removeClass("current"); 74 | $el.addClass("current"); 75 | 76 | } 77 | 78 | }); 79 | 80 | $("#starter").trigger("click"); 81 | 82 | }); --------------------------------------------------------------------------------