plus-minus

Web component that provides toggling plus/minus buttons, useful for expand/collapse functionality.

Is designed from the ground up to be SSR/SSG compatible.

Installation

Via node_modules / ES modules / import maps

<script type=importmap>
<script type="importmap">
    {
        "imports": {
            "blow-dry/": "/node_modules/blow-dry/",
            "imp-h/": "/node_modules/imp-h/",
            "mount-observer/": "/node_modules/mount-observer/",
            "trans-render/": "/node_modules/trans-render/",
            "xtal-element/": "/node_modules/xtal-element/",
            "plus-minus/": "/node_modules/plus-minus"
        }
    }
</script>
</script>
<plus-minus imp-h="plus-minus/root.html"></plus-minus>
<plus-minus aria-controls=i-am-here></plus-minus>
<section id=i-am-here>
    hello
</section>

Via CDN:

<plus-minus imp-h="plus-minus/root.html"></plus-minus>
<plus-minus aria-controls=i-am-here></plus-minus>
<section id=i-am-here>
    hello
</section>
<script type=importmap>
    {
        "imports": {
            "plus-minus/": "https://cdn.jsdelivr.net/npm/[email protected]/",
            "trans-render/": "https://esm.sh/[email protected]/"
        }
    }
</script>
<script type=module src=https://esm.sh/[email protected]/emc.js crossorigin=anonymous></script>
<script type=module src=https://esm.sh/[email protected]/index.js crossorigin=anonymous></script>

SSR/SSG

Simply embed root.html in the HTML stream for the first instance, and just the plus-minus tag or subsequent instances. Or if you prefer, embed root.html for each instance of the web component on the server (performance may vary with each approach)