msc-details

A Web Component that enhances HTML <details /> with smooth height transition animations.

<msc-details /> is a lightweight, dependency-free Web Component designed to elevate the interactive experience of native HTML <details /> and <summary /> elements. By leveraging modern CSS height interpolation techniques, it brings smooth, bouncy height expand and collapse transitions to your accordions while preserving full native accessibility (A11y) and semantics.

Basic Usage

<msc-details /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-details />'s html structure and everything will be all set.

• Required Script

  <script
    type="module"
    src="https://unpkg.com/msc-details/mjs/wc-msc-details.js">        
  </script>

• Structure

  Put <msc-details /> into HTML document. It will have different functions and looks with attribute mutation.

  <msc-details>
    <details slot="details">
      <summary>
        Summary here
      </summary>
      Content here
    </details>
  </msc-details>

JavaScript Instantiation

<msc-details /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module">
import { MscDetails } from 'https://unpkg.com/msc-details/mjs/wc-msc-details.js';

const detailsTemplate = document.querySelector('.my-details-template');

// use DOM api
const nodeA = document.createElement('msc-details');
nodeA.appendChild(detailsTemplate.content.cloneNode(true));
document.body.appendChild(nodeA);

// new instance with Class
const nodeB = new MscDetails();
nodeB.appendChild(detailsTemplate.content.cloneNode(true));
document.body.appendChild(nodeB);
</script>

Style Customization

Developers could apply styles to decorate <msc-details />'s looking.

<style>
msc-details {
  --msc-details-transition-duration: .5s;
}
</style>

Reference

• <msc-details /> demo
• <details> HTML details disclosure element
• Animate to height: auto; (and other intrinsic sizing keywords) in CSS