@adobe/coral-spectrum

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Coral.Accordion</title> <script>document.addEventListener('click', function(event) {if (event.target.nodeName === 'A' || event.matchedTarget && event.matchedTarget.nodeName === 'A') {event.preventDefault();}});</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css"> <style>.hljs{background:#fff;font-size:12px;border-radius:4px;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;}</style> <script> document.addEventListener('DOMContentLoaded', function() { const markup = document.body.querySelectorAll('.markup'); for (var i = 0; i < markup.length; i++) { const code = markup[i].innerHTML; const id = 'markup-code-' + i; markup[i].insertAdjacentHTML('afterend', '<div style="margin:10px 0">' + '<a onclick="this.nextElementSibling.hidden = !this.nextElementSibling.hidden" class="coral-Link" href="#">Toggle markup</a>' + '<pre hidden>' + '<code id="'+ id +'" class="html">' + '</code>' + '</pre>' + '</div>'); document.getElementById(id).textContent = code; } window.hljs.initHighlightingOnLoad(); }); </script> <link rel="stylesheet" href="../css/coral.css"> <script> document.addEventListener('DOMContentLoaded', function() { const script = document.createElement('script'); script.src = '../js/coral.js'; script.dataset.coralIcons = '../resources/'; document.head.appendChild(script); }); </script> <script> document.addEventListener('DOMContentLoaded', function() { const markup = document.body.querySelectorAll('h2 ~ .markup'); for (var i = 0; i < markup.length; i++) { const h2 = markup[i].previousElementSibling; const id = h2.id || 'markup-heading-' + i; h2.id = id; const accordion = markup[i].querySelector('coral-accordion'); if (accordion) { accordion.setAttribute('aria-labelledby', id); } } }); </script> </head> <body class="coral--lightest"> <main class="u-coral-margin"> <div style="position:absolute;top:16px;right:16px;"> <strong style="padding-right:8px"><span class="u-coral-hiddenS">Theme:</span></strong> <a href="#" class="coral-Link theme" onclick="document.body.className='coral--light'">Light</a> | <a href="#" class="coral-Link theme" onclick="document.body.className='coral--lightest'">Lightest</a> | <a href="#" class="coral-Link theme" onclick="document.body.className='coral--dark'">Dark</a> | <a href="#" class="coral-Link theme" onclick="document.body.className='coral--darkest'">Darkest</a> <strong style="padding:0 8px 0 16px"><span class="u-coral-hiddenS">Scale:</span></strong> <a href="#" class="coral-Link scale" onclick="document.body.classList.remove('coral--large')">Medium</a> | <a href="#" class="coral-Link scale" onclick="document.body.classList.add('coral--large')">Large</a> </div> <h1 class="coral-Heading--XXL">Accordion</h1> <h2 class="coral-Heading--M">Usage notes</h2> <hr class="coral-Divider--L"> <p class="coral-Body--M u-coral-padding-vertical"> Accordions are used to display blocks of titled content that can be opened and closed with a sliding animation. </p> <h2 class="coral--Heading--S">Default</h2> <div class="markup"> <coral-accordion> <coral-accordion-item selected> <coral-accordion-item-label>First with <a class="coral-Link" coral-interactive>link</a></coral-accordion-item-label> This is the first bit o'content </coral-accordion-item> <coral-accordion-item> <coral-accordion-item-label>Second</coral-accordion-item-label> This is the second bit o'content </coral-accordion-item> <coral-accordion-item> <coral-accordion-item-label>Third</coral-accordion-item-label> This is the third bit o'content </coral-accordion-item> </coral-accordion> </div> <h2 class="coral--Heading--S">Multiple</h2> <div class="markup"> <coral-accordion multiple> <coral-accordion-item selected> <coral-accordion-item-label>First <span class="u-coral-screenReaderOnly">(Multiple)</span></coral-accordion-item-label> Chocolate cake jelly cupcake dessert. Chocolate bar lemon drops croissant candy canes caramels jelly beans lemon drops pie wypas. Faworki donut macaroon jujubes brownie cupcake topping macaroon gummies. Halvah gummi bears brownie chupa chups. Fruitcake lemon drops gingerbread cake apple pie. Pastry carrot cake pie. Brownie oat cake gummies. Bonbon soufflé jujubes soufflé biscuit. <a class="coral-Link" href="#">Chocolate cake</a> halvah chocolate cake candy canes powder chocolate croissant. Lollipop fruitcake muffin chocolate cake apple pie bear claw cookie tootsie roll. Chupa chups dessert icing gummies cake jelly pie sesame snaps. Wafer halvah cake sweet. </coral-accordion-item> <coral-accordion-item selected> <coral-accordion-item-label>Second <span class="u-coral-screenReaderOnly">(Multiple)</span></coral-accordion-item-label> Chocolate cake jelly cupcake dessert. Chocolate bar lemon drops croissant candy canes caramels jelly beans lemon drops pie wypas. Faworki donut macaroon jujubes brownie cupcake topping macaroon gummies. Halvah gummi bears brownie chupa chups. Fruitcake lemon drops gingerbread cake apple pie. Pastry carrot cake pie. Brownie oat cake gummies. Bonbon soufflé jujubes soufflé biscuit. <a class="coral-Link" href="#">Chocolate cake</a> halvah chocolate cake candy canes powder chocolate croissant. Lollipop fruitcake muffin chocolate cake apple pie bear claw cookie tootsie roll. Chupa chups dessert icing gummies cake jelly pie sesame snaps. Wafer halvah cake sweet. </coral-accordion-item> </coral-accordion> </div> <h2 class="coral--Heading--S">Disabled</h2> <div class="markup"> <coral-accordion> <coral-accordion-item disabled> <coral-accordion-item-label>First <span class="u-coral-screenReaderOnly">(Disabled)</span></coral-accordion-item-label> Chocolate cake jelly cupcake dessert. Chocolate bar lemon drops croissant candy canes caramels jelly beans lemon drops pie wypas. Faworki donut macaroon jujubes brownie cupcake topping macaroon gummies. Halvah gummi bears brownie chupa chups. Fruitcake lemon drops gingerbread cake apple pie. Pastry carrot cake pie. Brownie oat cake gummies. Bonbon soufflé jujubes soufflé biscuit. <a class="coral-Link" href="#">Chocolate cake</a> halvah chocolate cake candy canes powder chocolate croissant. Lollipop fruitcake muffin chocolate cake apple pie bear claw cookie tootsie roll. Chupa chups dessert icing gummies cake jelly pie sesame snaps. Wafer halvah cake sweet. </coral-accordion-item> <coral-accordion-item disabled selected> <coral-accordion-item-label>Second <span class="u-coral-screenReaderOnly">(Disabled)</span></coral-accordion-item-label> Chocolate cake jelly cupcake dessert. Chocolate bar lemon drops croissant candy canes caramels jelly beans lemon drops pie wypas. Faworki donut macaroon jujubes brownie cupcake topping macaroon gummies. Halvah gummi bears brownie chupa chups. Fruitcake lemon drops gingerbread cake apple pie. Pastry carrot cake pie. Brownie oat cake gummies. Bonbon soufflé jujubes soufflé biscuit. <a class="coral-Link" href="#">Chocolate cake</a> halvah chocolate cake candy canes powder chocolate croissant. Lollipop fruitcake muffin chocolate cake apple pie bear claw cookie tootsie roll. Chupa chups dessert icing gummies cake jelly pie sesame snaps. Wafer halvah cake sweet. </coral-accordion-item> </coral-accordion> </div> <h2 class="coral--Heading--S">Nested</h2> <div class="markup"> <coral-accordion multiple> <coral-accordion-item selected> <coral-accordion-item-label>First <span class="u-coral-screenReaderOnly">(Nested)</span></coral-accordion-item-label> <coral-accordion-item-content>This is the first bit o'content</coral-accordion-item-content> </coral-accordion-item> <coral-accordion-item selected> <coral-accordion-item-label>Second <span class="u-coral-screenReaderOnly">(Nested)</span></coral-accordion-item-label> <coral-accordion-item-content>This is the second bit o'content</coral-accordion-item-content> </coral-accordion-item> <coral-accordion-item selected> <coral-accordion-item-label>Third <span class="u-coral-screenReaderOnly">(Nested)</span></coral-accordion-item-label> <coral-accordion-item-content> <coral-accordion level="4"> <coral-accordion-item> <coral-accordion-item-label>First <span class="u-coral-screenReaderOnly">(Nested - Level 2)</span></coral-accordion-item-label> <span tabindex="0">This is the first bit o'content</span> </coral-accordion-item> <coral-accordion-item selected> <coral-accordion-item-label>Second <span class="u-coral-screenReaderOnly">(Nested - Level 2)</span></coral-accordion-item-label> <span tabindex="0">This is the second bit o'content</span> </coral-accordion-item> <coral-accordion-item> <coral-accordion-item-label>Third <span class="u-coral-screenReaderOnly">(Nested - Level 2)</span></coral-accordion-item-label> <span tabindex="0">This is the third bit o'content</span> </coral-accordion-item> </coral-accordion> </coral-accordion-item-content> </coral-accordion-item> </coral-accordion> </div> <h2 class="coral--Heading--S">From JavaScript</h2> <div class="markup"> <div id="from-javascript"></div> <script> window.addEventListener('load', function() { var accordion = new Coral.Accordion(); accordion.setAttribute('aria-labelledby', document.getElementById('from-javascript').parentElement.previousElementSibling.id); accordion.items.add({ label: { innerHTML: 'First <span class="u-coral-screenReaderOnly">(From JavaScript)</span>' }, content: { innerHTML: 'This is the first bit o\'content' } }); accordion.items.add({ label: { innerHTML: 'Second <span class="u-coral-screenReaderOnly">(From JavaScript)</span>' }, content: { innerHTML: 'This is the second bit o\'content', } }); accordion.items.add({ label: { innerHTML: 'Third <span class="u-coral-screenReaderOnly">(From JavaScript)</span>' }, content: { innerHTML: 'This is the third bit o\'content, with no subtitle' } }); document.getElementById('from-javascript').appendChild(accordion); }); </script> </div> </main> </body> </html>