290 lines
18 KiB
HTML
290 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<link rel="canonical" href="https://heydon.github.io/inclusive-pattern-library/patterns/writing/expandable-sections/">
|
|
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
|
<link rel="stylesheet" href="/css/prism.css" />
|
|
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
|
<title>
|
|
|
|
Expandable sections | Infusion
|
|
|
|
</title>
|
|
</head>
|
|
<body>
|
|
<svg style="display: none">
|
|
<symbol id="bookmark">
|
|
<g transform="translate(2266 3206.2)">
|
|
<path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
|
|
</g>
|
|
</symbol>
|
|
|
|
<symbol id="w3c">
|
|
<text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
|
|
<text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
|
|
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
|
|
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
|
|
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
|
|
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
|
|
</symbol>
|
|
|
|
<symbol id="tag">
|
|
<g transform="translate(0 -875.2)">
|
|
<path style="fill-rule:evenodd;stroke-width:0;fill:#111111" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
|
|
</g>
|
|
</symbol>
|
|
|
|
<symbol id="balloon">
|
|
<g transform="translate(0 -875.2)">
|
|
<g>
|
|
<path style="fill:#1a1a1a" d="m68.156 882.83-.88753 1.4269c-4.9564 7.9666-6.3764 17.321-5.6731 37.378.36584 10.437 1.1246 23.51 1.6874 29.062.38895 3.8372 3.8278 32.454 4.6105 38.459 4.6694-.24176 9.2946.2879 14.377 1.481 1.2359-3.2937 5.2496-13.088 8.886-21.623 6.249-14.668 8.4128-21.264 10.253-31.252 1.2464-6.7626 1.6341-12.156 1.4204-19.764-.36325-12.93-2.1234-19.487-6.9377-25.843-2.0833-2.7507-6.9865-7.6112-7.9127-7.8436-.79716-.20019-6.6946-1.0922-6.7755-1.0248-.02213.0182-5.0006-.41858-7.5248-.22808l-2.149-.22808h-3.3738z"/>
|
|
<path style="fill:#1a1a1a" d="m61.915 883.28-3.2484.4497c-1.7863.24724-3.5182.53481-3.8494.63994-2.4751.33811-4.7267.86957-6.7777 1.5696-.28598 0-1.0254.20146-2.3695.58589-5.0418 1.4418-6.6374 2.2604-8.2567 4.2364-6.281 7.6657-11.457 18.43-12.932 26.891-1.4667 8.4111.71353 22.583 5.0764 32.996 3.8064 9.0852 13.569 25.149 22.801 37.517 1.3741 1.841 2.1708 2.9286 2.4712 3.5792 3.5437-1.1699 6.8496-1.9336 10.082-2.3263-1.3569-5.7831-4.6968-21.86-6.8361-33.002-.92884-4.8368-2.4692-14.322-3.2452-19.991-.68557-5.0083-.77707-6.9534-.74159-15.791.04316-10.803.41822-16.162 1.5026-21.503 1.4593-5.9026 3.3494-11.077 6.3247-15.852z"/>
|
|
<path style="fill:#1a1a1a" d="m94.499 885.78c-.10214-.0109-.13691 0-.0907.0409.16033.13489 1.329 1.0675 2.5976 2.0723 6.7003 5.307 11.273 14.568 12.658 25.638.52519 4.1949.24765 14.361-.5059 18.523-2.4775 13.684-9.7807 32.345-20.944 53.519l-3.0559 5.7971c2.8082.76579 5.7915 1.727 8.9926 2.8441 11.562-11.691 18.349-19.678 24.129-28.394 7.8992-11.913 11.132-20.234 12.24-31.518.98442-10.02-1.5579-20.876-6.7799-28.959-.2758-.4269-.57803-.86856-.89617-1.3166-3.247-6.13-9.752-12.053-21.264-16.131-2.3687-.86369-6.3657-2.0433-7.0802-2.1166z"/>
|
|
<path style="fill:#1a1a1a" d="m32.52 892.22c-.20090-.13016-1.4606.81389-3.9132 2.7457-11.486 9.0476-17.632 24.186-16.078 39.61.79699 7.9138 2.4066 13.505 5.9184 20.562 5.8577 11.77 14.749 23.219 30.087 38.74.05838.059.12188.1244.18052.1838 1.3166-.5556 2.5965-1.0618 3.8429-1.5199-.66408-.32448-1.4608-1.3297-3.8116-4.4602-5.0951-6.785-8.7512-11.962-13.051-18.486-5.1379-7.7948-5.0097-7.5894-8.0586-13.054-6.2097-11.13-8.2674-17.725-8.6014-27.563-.21552-6.3494.13041-9.2733 1.775-14.987 2.1832-7.5849 3.9273-10.986 9.2693-18.07 1.7839-2.3656 2.6418-3.57 2.4409-3.7003z"/>
|
|
<path style="fill:#1a1a1a" d="m69.133 992.37c-6.2405.0309-12.635.76718-19.554 2.5706 4.6956 4.7759 9.935 10.258 12.05 12.625l4.1272 4.6202h11.493l3.964-4.4516c2.0962-2.3541 7.4804-7.9845 12.201-12.768-8.378-1.4975-16.207-2.6353-24.281-2.5955z"/>
|
|
<rect style="stroke-width:0;fill:#1a1a1a" ry="2.0328" height="27.746" width="22.766" y="1017.7" x="60.201"/>
|
|
</g>
|
|
</g>
|
|
</symbol>
|
|
</svg>
|
|
|
|
<div class="wrapper">
|
|
<header class="intro-and-nav" role="banner">
|
|
<div>
|
|
<div class="intro">
|
|
<a class="logo" href="/" aria-label="Infusion pattern library home page">
|
|
<img src="https://heydon.github.io/inclusive-pattern-library/images/logo.png" alt="">
|
|
</a>
|
|
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
|
</div>
|
|
<nav class="patterns" role="navigation">
|
|
|
|
|
|
<ul>
|
|
|
|
<li class="pattern">
|
|
<a href="/inclusive-pattern-library/patterns/installation/" >
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span>Installation</span>
|
|
</a>
|
|
</li>
|
|
</li>
|
|
|
|
<li class="pattern">
|
|
<a href="/inclusive-pattern-library/patterns/library-setup/" >
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span>Library setup</span>
|
|
</a>
|
|
</li>
|
|
</li>
|
|
|
|
<li class="pattern">
|
|
<a href="/inclusive-pattern-library/patterns/serving/" >
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span>Serving</span>
|
|
</a>
|
|
</li>
|
|
</li>
|
|
|
|
|
|
<li>
|
|
<h3>Writing</h3>
|
|
<ul>
|
|
|
|
<li class="pattern">
|
|
<a href="/inclusive-pattern-library/patterns/writing/library-structure/" >
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span>Library structure</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="pattern">
|
|
<a href="/inclusive-pattern-library/patterns/writing/markdown-and-metadata/" >
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span>Markdown & metadata</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="pattern">
|
|
<a href="/inclusive-pattern-library/patterns/writing/expandable-sections/" aria-current="page">
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span>Expandable sections</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="pattern">
|
|
<a href="/inclusive-pattern-library/patterns/writing/including-images/" >
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span>Including images</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="pattern">
|
|
<a href="/inclusive-pattern-library/patterns/writing/notes-and-warnings/" >
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span>Notes & warnings</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="pattern">
|
|
<a href="/inclusive-pattern-library/patterns/writing/references/" >
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span>References</span>
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<h3>Exhibiting code</h3>
|
|
<ul>
|
|
|
|
<li class="pattern">
|
|
<a href="/inclusive-pattern-library/patterns/code/code-blocks/" >
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span>Code blocks</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="pattern">
|
|
<a href="/inclusive-pattern-library/patterns/code/codepen-embedding/" >
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span>CodePen embedding</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="pattern">
|
|
<a href="/inclusive-pattern-library/patterns/code/writing-inline-demos/" >
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
|
<span>Writing inline demos</span>
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<div class="main-and-footer">
|
|
<div>
|
|
|
|
<main id="main">
|
|
<h1>Expandable sections</h1>
|
|
|
|
<p>In some cases, where there is a lot of content, it’s helpful to collapse certain sections. That way, readers get an overview of what’s in the content and can choose where to focus in. <strong>Infusion</strong> provides a shortcode method for creating expandable sections which generates accessible markup using <code>aria-expanded</code>.</p>
|
|
|
|
<p>The <code>expandable</code> shortcode takes three parameters:</p>
|
|
|
|
<ul>
|
|
<li><strong>label</strong> — This is the label for the the section heading.</li>
|
|
<li><strong>level</strong> — This is the heading level (e.g. <code>2</code> or <code><h2></code>) that will contain the label. If you omit a level parameter, no heading is used; it’s just a button</li>
|
|
<li><strong>open</strong> — Include this and give it a value of “true” or “yes” to make the section expanded on page load</li>
|
|
</ul>
|
|
|
|
<p>Here’s what the code might look like for a simple expandable section containing markdown:</p>
|
|
|
|
<pre class=" "><code data-codeblock-shortcode>
|
|
{{% expandable label="A section of dummy text" level="2" %}}
|
|
Here is some markdown including [a link](https://twitter.com/heydonworks). Donec erat est, feugiat a est sed, aliquet pharetra ipsum. Vivamus in arcu leo. Praesent feugiat, purus a molestie ultrices, libero massa iaculis ante, sit amet accumsan leo eros vel ligula.
|
|
{{% /expandable %}}
|
|
</code></pre>
|
|
|
|
|
|
<p>Let’s look at what that outputs as:</p>
|
|
|
|
<div class="expandable-section">
|
|
|
|
<h2>
|
|
|
|
<button aria-expanded="false" data-expands="expandable-PHA+SGVyZSBpcyBzb21l">
|
|
<span class="expandable-label">A section of dummy text</span>
|
|
<svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
|
|
<g transform="translate(0 -981.5)">
|
|
<rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
|
|
<rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>
|
|
</g>
|
|
</svg>
|
|
</button>
|
|
|
|
</h2>
|
|
|
|
<div id="expandable-PHA+SGVyZSBpcyBzb21l" hidden>
|
|
<p>Here is some markdown including <a href="https://twitter.com/heydonworks">a link</a>. Donec erat est, feugiat a est sed, aliquet pharetra ipsum. Vivamus in arcu leo. Praesent feugiat, purus a molestie ultrices, libero massa iaculis ante, sit amet accumsan leo eros vel ligula.</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<p>Successive collapsible sections fit snugly together. The second of the following two has <code>open="true"</code>.</p>
|
|
|
|
<div class="expandable-section">
|
|
|
|
<h2>
|
|
|
|
<button aria-expanded="false" data-expands="expandable-PHA+TWF1cmlzIGVnZXQg">
|
|
<span class="expandable-label">A section of dummy text</span>
|
|
<svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
|
|
<g transform="translate(0 -981.5)">
|
|
<rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
|
|
<rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>
|
|
</g>
|
|
</svg>
|
|
</button>
|
|
|
|
</h2>
|
|
|
|
<div id="expandable-PHA+TWF1cmlzIGVnZXQg" hidden>
|
|
<p>Mauris eget elit ut neque venenatis placerat id nec libero. Nunc accumsan cursus elit nec iaculis. Proin id rutrum magna, a aliquet sem. Sed et tortor id sem eleifend porta vitae eget elit. Cras sodales porta malesuada. Suspendisse at odio ac tortor.</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="expandable-section">
|
|
|
|
<h2>
|
|
|
|
<button aria-expanded="true" data-expands="expandable-PHA+VXQgdnVscHV0YXRl">
|
|
<span class="expandable-label">Another dummy section</span>
|
|
<svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
|
|
<g transform="translate(0 -981.5)">
|
|
<rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
|
|
<rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>
|
|
</g>
|
|
</svg>
|
|
</button>
|
|
|
|
</h2>
|
|
|
|
<div id="expandable-PHA+VXQgdnVscHV0YXRl" >
|
|
<p>Ut vulputate enim ut lorem iaculis, vel faucibus metus iaculis. Aliquam erat volutpat. Aliquam luctus orci vel consectetur dignissim. Nullam et efficitur lorem, et ornare est. Sed tristique porttitor justo, quis malesuada velit. Nullam et elit finibus, sollicitudin velit placerat, ultricies dui.</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<p>Unfortunately, it is not currently possible to include shortcodes inside other shortcodes, using the “<code>%</code>” notation (which is designated for markdown content). If you use the angle brackets notation (illustrated below) it is possible, but markdown will no longer be permitted. You will have to code HTML inside such a section manually.</p>
|
|
|
|
</main>
|
|
|
|
<footer role="contentinfo">
|
|
By Heydon Pickering
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/js/prism.js"></script>
|
|
|
|
<script src="/js/dom-scripts.js"></script>
|
|
</body>
|
|
</html>
|