API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jun 11th, 2025
56
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.12 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Pure CSS Expand/Collapse - Constant Speed</title>
  7. <style>
  8. * {
  9. box-sizing: border-box;
  10. }
  11.  
  12. body {
  13. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  14. line-height: 1.6;
  15. margin: 0;
  16. padding: 40px 20px;
  17. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  18. min-height: 100vh;
  19. }
  20.  
  21. .container {
  22. max-width: 600px;
  23. margin: 0 auto;
  24. background: white;
  25. border-radius: 12px;
  26. box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  27. overflow: hidden;
  28. }
  29.  
  30. .accordion-item {
  31. border-bottom: 1px solid #e2e8f0;
  32. }
  33.  
  34. .accordion-item:last-child {
  35. border-bottom: none;
  36. }
  37.  
  38. /* Hide the checkbox */
  39. .accordion-checkbox {
  40. display: none;
  41. }
  42.  
  43. /* Style the label as the header */
  44. .accordion-header {
  45. background: #f8fafc;
  46. padding: 20px 24px;
  47. cursor: pointer;
  48. user-select: none;
  49. display: flex;
  50. justify-content: space-between;
  51. align-items: center;
  52. transition: all 0.3s ease;
  53. position: relative;
  54. }
  55.  
  56. .accordion-header:hover {
  57. background: #f1f5f9;
  58. }
  59.  
  60. /* Active state when checkbox is checked */
  61. .accordion-checkbox:checked + .accordion-header {
  62. background: #3b82f6;
  63. color: white;
  64. }
  65.  
  66. .accordion-title {
  67. font-size: 18px;
  68. font-weight: 600;
  69. margin: 0;
  70. }
  71.  
  72. .accordion-icon {
  73. width: 24px;
  74. height: 24px;
  75. display: flex;
  76. align-items: center;
  77. justify-content: center;
  78. transition: transform 0.3s ease;
  79. }
  80.  
  81. .accordion-icon::before {
  82. content: '+';
  83. font-size: 20px;
  84. font-weight: bold;
  85. line-height: 1;
  86. }
  87.  
  88. /* Rotate icon when expanded */
  89. .accordion-checkbox:checked + .accordion-header .accordion-icon {
  90. transform: rotate(45deg);
  91. }
  92.  
  93. /* CONSTANT SPEED ANIMATION - CSS Grid Technique */
  94. .accordion-content {
  95. display: grid;
  96. grid-template-rows: 0fr;
  97. transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  98. }
  99.  
  100. /* Expanded state - 1fr means "take available space" */
  101. .accordion-checkbox:checked ~ .accordion-content {
  102. grid-template-rows: 1fr;
  103. }
  104.  
  105. /* The wrapper inside grid must have overflow hidden */
  106. .accordion-body-wrapper {
  107. overflow: hidden;
  108. }
  109.  
  110. .accordion-body {
  111. padding: 24px;
  112. color: #4a5568;
  113. line-height: 1.7;
  114. }
  115.  
  116. .accordion-body h3 {
  117. color: #2d3748;
  118. margin-top: 0;
  119. margin-bottom: 16px;
  120. }
  121.  
  122. .accordion-body p {
  123. margin-bottom: 16px;
  124. }
  125.  
  126. .accordion-body ul {
  127. margin-bottom: 16px;
  128. padding-left: 20px;
  129. }
  130.  
  131. .accordion-body li {
  132. margin-bottom: 8px;
  133. }
  134.  
  135. .code-block {
  136. background: #1a202c;
  137. color: #e2e8f0;
  138. padding: 16px;
  139. border-radius: 8px;
  140. font-family: 'Courier New', monospace;
  141. font-size: 14px;
  142. overflow-x: auto;
  143. margin: 16px 0;
  144. }
  145.  
  146. /* Demo styles */
  147. .demo-section {
  148. margin: 40px 0;
  149. }
  150.  
  151. .demo-title {
  152. text-align: center;
  153. color: white;
  154. font-size: 24px;
  155. font-weight: 600;
  156. margin-bottom: 20px;
  157. }
  158.  
  159. /* Single-open accordion using radio buttons */
  160. .single-accordion {
  161. margin-top: 40px;
  162. }
  163.  
  164. .single-accordion .accordion-radio {
  165. display: none;
  166. }
  167.  
  168. .single-accordion .accordion-radio:checked + .accordion-header {
  169. background: #10b981;
  170. color: white;
  171. }
  172.  
  173. .single-accordion .accordion-radio:checked + .accordion-header .accordion-icon {
  174. transform: rotate(45deg);
  175. }
  176.  
  177. .single-accordion .accordion-radio:checked ~ .accordion-content {
  178. grid-template-rows: 1fr;
  179. }
  180.  
  181. .single-accordion .accordion-header {
  182. background: #f0fdf4;
  183. }
  184.  
  185. .single-accordion .accordion-header:hover {
  186. background: #dcfce7;
  187. }
  188.  
  189. /* Accessibility improvements */
  190. .accordion-header:focus-within {
  191. outline: 2px solid #3b82f6;
  192. outline-offset: 2px;
  193. }
  194.  
  195. /* Demo content styles for visual comparison */
  196. .short-content {
  197. background: #fef3c7;
  198. padding: 16px;
  199. border-radius: 8px;
  200. margin: 16px 0;
  201. border-left: 4px solid #f59e0b;
  202. }
  203.  
  204. .long-content {
  205. background: #dbeafe;
  206. padding: 16px;
  207. border-radius: 8px;
  208. margin: 16px 0;
  209. border-left: 4px solid #3b82f6;
  210. }
  211. </style>
  212. </head>
  213. <body>
  214. <div class="demo-section">
  215. <h1 class="demo-title">Constant Speed Expand/Collapse</h1>
  216. <p style="text-align: center; color: white; opacity: 0.9;">All panels open at the same rate regardless of content height</p>
  217. </div>
  218.  
  219. <!-- Multi-open accordion demonstrating constant speed -->
  220. <div class="container">
  221. <div class="accordion-item">
  222. <input type="checkbox" id="accordion1" class="accordion-checkbox">
  223. <label for="accordion1" class="accordion-header">
  224. <h3 class="accordion-title">Short Content Panel</h3>
  225. <div class="accordion-icon"></div>
  226. </label>
  227. <div class="accordion-content">
  228. <div class="accordion-body-wrapper">
  229. <div class="accordion-body">
  230. <div class="short-content">
  231. <p><strong>This panel has minimal content.</strong></p>
  232. <p>Notice how it opens at the same speed as the longer panels below!</p>
  233. </div>
  234. </div>
  235. </div>
  236. </div>
  237. </div>
  238.  
  239. <div class="accordion-item">
  240. <input type="checkbox" id="accordion2" class="accordion-checkbox">
  241. <label for="accordion2" class="accordion-header">
  242. <h3 class="accordion-title">CSS Grid Solution</h3>
  243. <div class="accordion-icon"></div>
  244. </label>
  245. <div class="accordion-content">
  246. <div class="accordion-body-wrapper">
  247. <div class="accordion-body">
  248. <h3>The Grid Template Rows Technique</h3>
  249. <p>This solution uses CSS Grid's fractional units to achieve constant animation speed:</p>
  250. <div class="code-block">
  251. .accordion-content {
  252. display: grid;
  253. grid-template-rows: 0fr;
  254. transition: grid-template-rows 0.4s ease;
  255. }
  256.  
  257. .accordion-checkbox:checked ~ .accordion-content {
  258. grid-template-rows: 1fr;
  259. }
  260.  
  261. .accordion-body-wrapper {
  262. overflow: hidden;
  263. }
  264. </div>
  265. <p>The <code>fr</code> unit represents a fraction of available space. Transitioning from <code>0fr</code> to <code>1fr</code> creates a proportional animation that adapts to any content height.</p>
  266. <p>This means short content and tall content both animate for the same duration, creating a consistent user experience.</p>
  267. </div>
  268. </div>
  269. </div>
  270. </div>
  271.  
  272. <div class="accordion-item">
  273. <input type="checkbox" id="accordion3" class="accordion-checkbox">
  274. <label for="accordion3" class="accordion-header">
  275. <h3 class="accordion-title">Medium Length Content</h3>
  276. <div class="accordion-icon"></div>
  277. </label>
  278. <div class="accordion-content">
  279. <div class="accordion-body-wrapper">
  280. <div class="accordion-body">
  281. <h3>Why Constant Speed Matters</h3>
  282. <p>When using the max-height technique with a fixed value like 1000px:</p>
  283. <ul>
  284. <li>Short content (100px) reaches full height quickly, then sits idle</li>
  285. <li>Medium content (400px) takes longer to reach full expansion</li>
  286. <li>Tall content (800px) uses almost the full animation duration</li>
  287. </ul>
  288. <p>This creates an inconsistent and jarring user experience where panels seem to animate at different speeds.</p>
  289. <div class="long-content">
  290. <p><strong>The CSS Grid approach solves this by:</strong></p>
  291. <ul>
  292. <li>Using fractional units that scale proportionally</li>
  293. <li>Always using the full animation duration regardless of content height</li>
  294. <li>Creating smooth, predictable animations</li>
  295. <li>Eliminating the need to guess maximum content heights</li>
  296. </ul>
  297. </div>
  298. </div>
  299. </div>
  300. </div>
  301. </div>
  302.  
  303. <div class="accordion-item">
  304. <input type="checkbox" id="accordion4" class="accordion-checkbox">
  305. <label for="accordion4" class="accordion-header">
  306. <h3 class="accordion-title">Very Long Content Panel</h3>
  307. <div class="accordion-icon"></div>
  308. </label>
  309. <div class="accordion-content">
  310. <div class="accordion-body-wrapper">
  311. <div class="accordion-body">
  312. <h3>Extended Content Example</h3>
  313. <p>This panel contains significantly more content to demonstrate how the CSS Grid technique maintains consistent animation timing.</p>
  314.  
  315. <h3>Technical Details</h3>
  316. <p>The grid approach works because:</p>
  317. <ul>
  318. <li><strong>0fr</strong> means "allocate zero fractions of available space" (collapsed)</li>
  319. <li><strong>1fr</strong> means "allocate one fraction of available space" (expanded to fit content)</li>
  320. <li>The transition animates the fractional value, not a fixed pixel value</li>
  321. <li>CSS automatically calculates the proper pixel heights during animation</li>
  322. </ul>
  323.  
  324. <div class="long-content">
  325. <h3>Browser Support</h3>
  326. <p>This technique works in all modern browsers that support CSS Grid (which is virtually all browsers in use today):</p>
  327. <ul>
  328. <li>Chrome 57+ (March 2017)</li>
  329. <li>Firefox 52+ (March 2017)</li>
  330. <li>Safari 10.1+ (March 2017)</li>
  331. <li>Edge 16+ (October 2017)</li>
  332. </ul>
  333. </div>
  334.  
  335. <h3>Performance Benefits</h3>
  336. <p>Unlike JavaScript-based solutions that calculate heights and manually animate values, this pure CSS approach:</p>
  337. <ul>
  338. <li>Runs on the GPU for smooth 60fps animations</li>
  339. <li>Doesn't block the main thread</li>
  340. <li>Works even if JavaScript is disabled</li>
  341. <li>Has no runtime overhead or memory leaks</li>
  342. <li>Maintains smooth scrolling during animations</li>
  343. </ul>
  344.  
  345. <p>Notice how this lengthy panel opens at exactly the same rate as the short panel above, creating a consistent and professional user experience!</p>
  346. </div>
  347. </div>
  348. </div>
  349. </div>
  350. </div>
  351.  
  352. <!-- Single-open version -->
  353. <div class="container single-accordion">
  354. <h2 style="padding: 20px 24px; margin: 0; background: #f0fdf4; font-size: 16px; color: #065f46; border-bottom: 1px solid #e2e8f0;">Single-Open Accordion (Radio Buttons)</h2>
  355.  
  356. <div class="accordion-item">
  357. <input type="radio" name="single-accordion" id="single1" class="accordion-radio">
  358. <label for="single1" class="accordion-header">
  359. <h3 class="accordion-title">Brief Content</h3>
  360. <div class="accordion-icon"></div>
  361. </label>
  362. <div class="accordion-content">
  363. <div class="accordion-body-wrapper">
  364. <div class="accordion-body">
  365. <p>Short content that opens at a consistent speed.</p>
  366. </div>
  367. </div>
  368. </div>
  369. </div>
  370.  
  371. <div class="accordion-item">
  372. <input type="radio" name="single-accordion" id="single2" class="accordion-radio">
  373. <label for="single2" class="accordion-header">
  374. <h3 class="accordion-title">Extensive Documentation</h3>
  375. <div class="accordion-icon"></div>
  376. </label>
  377. <div class="accordion-content">
  378. <div class="accordion-body-wrapper">
  379. <div class="accordion-body">
  380. <h3>Comprehensive Guide</h3>
  381. <p>This section contains much more detailed information to demonstrate the consistent animation timing.</p>
  382. <p>Key advantages of this approach:</p>
  383. <ul>
  384. <li>Pure HTML/CSS implementation</li>
  385. <li>Constant animation speed regardless of content height</li>
  386. <li>No JavaScript dependencies</li>
  387. <li>Excellent browser support</li>
  388. <li>GPU-accelerated animations</li>
  389. <li>Accessible by default</li>
  390. </ul>
  391. <p>The animation duration remains exactly 0.4 seconds whether the content is 50 pixels tall or 500 pixels tall.</p>
  392. </div>
  393. </div>
  394. </div>
  395. </div>
  396. </div>
  397. </body>
  398. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!