picocss/docs/src/accordions.html

<!doctype html>
<html lang="en">
  <head>
    ${require('./_head.html') 
      title="Accordions" 
      description="Toggle sections of content in pure HTML, without JavaScript."
      canonical="accordions.html"
    }
  </head>

  <body>
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
      ${require('./_sidebar.html') active="accordions-link"}
      
      <div role="document">
        <section id="accordions">
          <hgroup>
            <h1>Accordions</h1>
            <h2>Toggle sections of content in pure HTML, without JavaScript.</h2>
          </hgroup>
          <article aria-label="Accordions examples">
            <details>
              <summary>Accordion 1</summary>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.</p>
            </details>
            <details open>
              <summary>Accordion 2</summary>
              <ul>
                <li>Vestibulum id elit quis massa interdum sodales.</li>
                <li>Nunc quis eros vel odio pretium tincidunt nec quis neque.</li>
                <li>Quisque sed eros non eros ornare elementum.</li>
                <li>Cras sed libero aliquet, porta dolor quis, dapibus ipsum.</li>
              </ul>
            </details>
            <footer class="code">

<pre><code>&lt;<b>details</b>&gt;
  &lt;<b>summary</b>&gt;Accordion 1&lt;/<b>summary</b>&gt;
  &lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
&lt;/<b>details</b>&gt;

&lt;<b>details</b> <i>open</i>&gt;
  &lt;<b>summary</b>&gt;Accordion 2&lt;/<b>summary</b>&gt;
  &lt;<b>ul</b>&gt;
    &lt;<b>li</b>&gt;…&lt;/<b>li</b>&gt;
    &lt;<b>li</b>&gt;…&lt;/<b>li</b>&gt;
  &lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;</code></pre>

            </footer>
          </article>
          <p><code><i>role</i>=<u>"button"</u></code> can be used to turn <code>&lt;<b>summary</b>&gt;</code> into a button.</p>
          <article aria-label="Accordions buttons examples">
            <details>
              <summary role="button">Accordion 1</summary>
              <p>Aenean vestibulum nunc at libero congue, eu pretium nulla viverra. Fusce sed ex at est egestas vehicula. Integer sit amet lectus mi. Duis ut viverra mauris, at laoreet enim.</p>
            </details>
            <details>
              <summary role="button" class="secondary">Accordion 2</summary>
              <p>Quisque porta dictum ipsum nec vestibulum. Suspendisse non mi ac tellus scelerisque egestas. Sed vel nisi laoreet, rhoncus urna quis, luctus risus. Donec vitae molestie felis.</p>
            </details>
            <details>
              <summary role="button" class="contrast">Accordion 3</summary>
              <p>Praesent quam ipsum, condimentum non augue at, porttitor interdum tellus. Curabitur ultrices consectetur leo, a placerat mauris malesuada et. In quis varius risus.</p>
            </details>
            <footer class="code">

<pre><code><em>&lt;!-- Primary --&gt;</em>
&lt;<b>details</b>&gt;
  &lt;<b>summary</b> <i>role</i>=<u>"button"</u>&gt;Accordion 1&lt;/<b>summary</b>&gt;
  &lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
&lt;/<b>details</b>&gt;

<em>&lt;!-- Secondary --&gt;</em>
&lt;<b>details</b>&gt;
  &lt;<b>summary</b> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>&gt;Accordion 2&lt;/<b>summary</b>&gt;
  &lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
&lt;/<b>details</b>&gt;

<em>&lt;!-- Contrast --&gt;</em>
&lt;<b>details</b>&gt;
  &lt;<b>summary</b> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>&gt;Accordion 3&lt;/<b>summary</b>&gt;
  &lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
&lt;/<b>details</b>&gt;

            </footer>
          </article>
        </section>

        ${require('./_footer.html')}
        
      </div>
    </main>
    <script src="js/commons.min.js"></script>
  </body>
</html>
Revert "Merge branch 'master' into dev" This reverts commit 6a6d67dbab230a058b494f6a468ed5f4423f1c4c, reversing changes made to ba4bd765d8fb28466d816c098b03476754c13fc3. 2021-12-19 09:50:55 +07:00			`<!doctype html>`
			`<html lang="en">`
			`<head>`
			`${require('./_head.html')`
			`title="Accordions"`
			`description="Toggle sections of content in pure HTML, without JavaScript."`
			`canonical="accordions.html"`
			`}`
			`</head>`

			`<body>`
			`${require('./_nav.html')}`

			`<main class="container" id="docs">`
			`${require('./_sidebar.html') active="accordions-link"}`

			`<div role="document">`
			`<section id="accordions">`
			`<hgroup>`
			`<h1>Accordions</h1>`
			`<h2>Toggle sections of content in pure HTML, without JavaScript.</h2>`
			`</hgroup>`
			`<article aria-label="Accordions examples">`
			`<details>`
Accordion: Allow role button 2022-01-23 12:45:00 +07:00			`<summary>Accordion 1</summary>`
Revert "Merge branch 'master' into dev" This reverts commit 6a6d67dbab230a058b494f6a468ed5f4423f1c4c, reversing changes made to ba4bd765d8fb28466d816c098b03476754c13fc3. 2021-12-19 09:50:55 +07:00			`<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.</p>`
			`</details>`
			`<details open>`
Accordion: Allow role button 2022-01-23 12:45:00 +07:00			`<summary>Accordion 2</summary>`
Revert "Merge branch 'master' into dev" This reverts commit 6a6d67dbab230a058b494f6a468ed5f4423f1c4c, reversing changes made to ba4bd765d8fb28466d816c098b03476754c13fc3. 2021-12-19 09:50:55 +07:00			`<ul>`
			`<li>Vestibulum id elit quis massa interdum sodales.</li>`
			`<li>Nunc quis eros vel odio pretium tincidunt nec quis neque.</li>`
			`<li>Quisque sed eros non eros ornare elementum.</li>`
			`<li>Cras sed libero aliquet, porta dolor quis, dapibus ipsum.</li>`
			`</ul>`
			`</details>`
			`<footer class="code">`

			`<pre><code><<b>details</b>>`
Accordion: Allow role button 2022-01-23 12:45:00 +07:00			`<<b>summary</b>>Accordion 1</<b>summary</b>>`
Revert "Merge branch 'master' into dev" This reverts commit 6a6d67dbab230a058b494f6a468ed5f4423f1c4c, reversing changes made to ba4bd765d8fb28466d816c098b03476754c13fc3. 2021-12-19 09:50:55 +07:00			`<<b>p</b>>…</<b>p</b>>`
			`</<b>details</b>>`

			`<<b>details</b> <i>open</i>>`
Accordion: Allow role button 2022-01-23 12:45:00 +07:00			`<<b>summary</b>>Accordion 2</<b>summary</b>>`
Revert "Merge branch 'master' into dev" This reverts commit 6a6d67dbab230a058b494f6a468ed5f4423f1c4c, reversing changes made to ba4bd765d8fb28466d816c098b03476754c13fc3. 2021-12-19 09:50:55 +07:00			`<<b>ul</b>>`
			`<<b>li</b>>…</<b>li</b>>`
			`<<b>li</b>>…</<b>li</b>>`
			`</<b>ul</b>>`
			`</<b>details</b>></code></pre>`

Accordion: Allow role button 2022-01-23 12:45:00 +07:00			`</footer>`
			`</article>`
			`<p><code><i>role</i>=<u>"button"</u></code> can be used to turn <code><<b>summary</b>></code> into a button.</p>`
			`<article aria-label="Accordions buttons examples">`
			`<details>`
			`<summary role="button">Accordion 1</summary>`
			`<p>Aenean vestibulum nunc at libero congue, eu pretium nulla viverra. Fusce sed ex at est egestas vehicula. Integer sit amet lectus mi. Duis ut viverra mauris, at laoreet enim.</p>`
			`</details>`
			`<details>`
			`<summary role="button" class="secondary">Accordion 2</summary>`
			`<p>Quisque porta dictum ipsum nec vestibulum. Suspendisse non mi ac tellus scelerisque egestas. Sed vel nisi laoreet, rhoncus urna quis, luctus risus. Donec vitae molestie felis.</p>`
			`</details>`
			`<details>`
			`<summary role="button" class="contrast">Accordion 3</summary>`
			`<p>Praesent quam ipsum, condimentum non augue at, porttitor interdum tellus. Curabitur ultrices consectetur leo, a placerat mauris malesuada et. In quis varius risus.</p>`
			`</details>`
			`<footer class="code">`

			`<pre><code><em><!-- Primary --></em>`
			`<<b>details</b>>`
			`<<b>summary</b> <i>role</i>=<u>"button"</u>>Accordion 1</<b>summary</b>>`
			`<<b>p</b>>…</<b>p</b>>`
			`</<b>details</b>>`

			`<em><!-- Secondary --></em>`
			`<<b>details</b>>`
			`<<b>summary</b> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>>Accordion 2</<b>summary</b>>`
			`<<b>p</b>>…</<b>p</b>>`
			`</<b>details</b>>`

			`<em><!-- Contrast --></em>`
			`<<b>details</b>>`
			`<<b>summary</b> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>>Accordion 3</<b>summary</b>>`
			`<<b>p</b>>…</<b>p</b>>`
			`</<b>details</b>>`

Revert "Merge branch 'master' into dev" This reverts commit 6a6d67dbab230a058b494f6a468ed5f4423f1c4c, reversing changes made to ba4bd765d8fb28466d816c098b03476754c13fc3. 2021-12-19 09:50:55 +07:00			`</footer>`
			`</article>`
			`</section>`

			`${require('./_footer.html')}`

			`</div>`
			`</main>`
			`<script src="js/commons.min.js"></script>`
			`</body>`
			`</html>`