Fernando Tabamo Jr - Portfolio

Example #

.n-collapse class is just a wrapping element which is not advisable to put padding on it and will remain as is. put .show class to display it by default.

<button
    class="n-btn"
    data-collapse="#collapse-live"
    type="button"
    aria-expanded="true">
    Button with data-collapse
</button>
<a 
    class="n-btn" 
    href="#collapse-live"
    role="button" 
    aria-expanded="true">
    Anchor with href
</a>
<div id="collapse-live" class="n-collapse show">
    <div class="n-collapse-content">
        <p>lorem ipsum...</p>
        <button
            class="n-btn"
            data-collapse="#collapse-live"
            type="button"
            aria-expanded="true">
            close
        </button>
    </div>
</div>

Anchor with href

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

No shadow #

to remove the default collapse shadow, just add attribute data-shadow="false".

<div class="n-card">
    <div class="n-card-header" data-collapse="#collapse-sl" aria-expanded="false">
        Card
    </div>
    <div class="n-collapse" data-shadow="false" id="collapse-sl">
        <div class="n-collapse-content">
            <div class="n-card-body">
            <p>lorem ipsum...</p> 
            </div>
        </div> 
    </div>
</div>

Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Accordion #

by adding attribute data-parent="#collapse-parent" on each .n-collpase to implement accordion collapse.

<div id="collapse-parent">
    <div class="n-card">
        <div class="n-card-header" data-collapse="#collapse-1" aria-expanded="false">
            Card 1
        </div>
        <div id="collapse-1" class="n-collapse" data-shadow="false" data-parent="#collapse-parent">
            <div class="n-collapse-content">
                <div class="n-card-body">
                <p>lorem ipsum...</p> 
                </div>
            </div> 
        </div>
    </div>
    <div class="n-card">
        <div class="n-card-header" data-collapse="#collapse-2" aria-expanded="false">
            Card 2
        </div>
        <div id="collapse-2" class="n-collapse" data-shadow="false" data-parent="#collapse-parent">
            <div class="n-collapse-content">
                <div class="n-card-body">
                <p>lorem ipsum...</p> 
                </div>
            </div> 
        </div>
    </div>
    <div class="n-card">
        <div class="n-card-header" data-collapse="#collapse-3" aria-expanded="false">
            Card 3
        </div> 
        <div id="collapse-3" class="n-collapse" data-shadow="false" data-parent="#collapse-parent">
            <div class="n-collapse-content">
                <div class="n-card-body">
                <p>lorem ipsum...</p> 
                </div>
            </div> 
        </div>
    </div> 
</div>

Card 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Card 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Card 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Javascript #

to make it working you need a little script.

document.addEventListener("DOMContentLoaded", (event) => {
    // apply the collapse script to all .n-collapse element
    const elements = document.querySelectorAll('.n-collapse')
    elements.forEach((el) => {
        const instance = N.collapse.getInstance(el)
    });
})

Methods #

Method Method	Return Return	Description Description
Instance.show	void	to show the collapse programmatically.
Instance.close	void	to close the collapse programmatically.
Instance.destroy	void	it is use to destroy and kill the collapse instance.

Events #

All collapse events are fired at the .n-collapse element.

Event Event	Description Description
show.n.collapse	This event fires immediately when the show instance method is called.
shown.n.collapse	This event fires when the collapse is completely shown (CSS transition is complete).
hide.n.collapse	This event fires immediately when the close instance method is called.
hidden.n.collapse	This event fires when the collapse is completely hidden (CSS transition is complete).

const collapse = document.querySelector('#my-collapse')
collapse.addEventListener('show.n.collapse'. (event) => {
    // do something here...
})

DARK THEME

Collapse

Warning!