Use Sesam to create easy collapsing items on your site

1. Install package

npm i sesam-collapse

2. Import package

import {sesamCollapse, sesam} from 'sesam-collapse';

available from version 4.0

import {sesamCollapse, sesam} from 'https://unpkg.com/sesam-collapse';

sesamCollapse.initialize();

1. Install package

Just copy paste this script tag at the end of your dom. If you want to call Sesam functions in other scripts, place this before other scripts.

<script type="module" src="https://unpkg.com/sesam-collapse"></script>

2. Initialize package

Initialize in your javascript-file.

sesamCollapse.initialize();

The only thing Sesam will do, is adding, removing or toggle classes. You have to write the needed css to let something happen on screen.

So sesam can be used in various ways.

• For hamburger menu's
• Custom selection lists (later on, there wil be code snippets available to show how)
• Collapsing text sections
• Just hiding or showing elements
• Add or remove animations
• ...

Possibilities are infinite!

Let the script know which element will be collapsed

data-sesam-target="placeNameHere"

<div data-sesam-target="placeNameHere">
    <p>Some content</p>
</div>

Define which element will trigger the action. Multiple triggers can be defined, just add the same markup.

data-sesam-trigger="placeNameHere"

<button data-sesam-trigger="placeNameHere">
    Show / hide
</button>

Triggers and targets don't have to be placed directly next to each other, but can be placed anywhere in the document.

If you want that another Sesam target is hidden when you click a trigger, just define a group.

Add this to the parent element

<!-- this is the attribute -->
data-sesam-group="groupNameHere"

And define the parent for the children elements

This has to be added to the target element!

<!-- this is the attribute -->
data-sesam-parent="groupNameHere"

This will be available later.

If you use Sesam for creating modals you can activate the backdrop function. This will show a background behind the modal. The backdrop is automatically added when you initialize the script.

Just add data-sesam-backdrop="true"to the target-element.

<div data-sesam-target="placeNameHere" data-sesam-backdrop="true">
    <p>Some content</p>
</div>

<!-- this is the attribute -->
data-sesam-options="anOtherOption:optionValue, backdrop:true"

Now you can write all the needed css to display a backdrop

.sesam-backdrop {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.336);
    
    &.sesam-hidden {
        display: none;
    }
}

If you want that the user isn't able to scroll trough the rest of the page just add this to your target-element.

<div data-sesam-target="placeNameHere" data-sesam-scrollblock="true">
    <p>Some content</p>
</div>

<div data-sesam-target="placeNameHere" data-sesam-options="backdrop:true, scrollBlock:true">
    <p>Some content</p>
</div>

In a future release (6.x.x) all these data-attributes will be replaced with just the data-sesam-options attribute.

sesam({
    target: 'example', //doet dit: document.querySelector(`[data-sesam-target='${example}']`)
    collapse: true, // gaat gewoon kijken wat de huidige state is van een target en die veranderen
    action: 'show', // of 'hide', niet gebruiken in combinatie met collapse argument
    execute: (() => { // voer extra javascript uit
        console.log('this works!')
    })(),
    modal: {
        backdrop: true, // voegt sesam-hidden/sesam-show classe toe aan het backdrop element, 
                        // backdrop element wordt automatisch gemaakt bij het initialiseren
        scrollBlock: true // blokkeert het scrollen door de pagina wanneer deze modal getoont wordt
    }
})