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>Collapsible elements 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>Collapsible elements 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;Collapsible elements 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;Collapsible elements 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>
        </section>

        ${require('./_footer.html')}
        
      </div>
    </main>
    <script src="js/commons.min.js"></script>
  </body>
</html>
Docs: separate pages 2021-10-31 21:33:19 +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>`
Docs: Sidebar styles 2021-11-02 00:20:55 +07:00			`<h1>Accordions</h1>`
			`<h2>Toggle sections of content in pure HTML, without JavaScript.</h2>`
Docs: separate pages 2021-10-31 21:33:19 +07:00			`</hgroup>`
			`<article aria-label="Accordions examples">`
			`<details>`
			`<summary>Collapsible elements 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>Collapsible elements 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><<b>details</b>>`
			`<<b>summary</b>>Collapsible elements 1</<b>summary</b>>`
			`<<b>p</b>>…</<b>p</b>>`
			`</<b>details</b>>`

			`<<b>details</b> <i>open</i>>`
			`<<b>summary</b>>Collapsible elements 2</<b>summary</b>>`
			`<<b>ul</b>>`
			`<<b>li</b>>…</<b>li</b>>`
			`<<b>li</b>>…</<b>li</b>>`
			`</<b>ul</b>>`
			`</<b>details</b>></code></pre>`

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

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

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