simplycollapsible-js

collapsible-js

A package to help make HTML elements collapsible

Usage

Install the package.

npm install simplycollapsible-js

In your html class the outer container as 'collapsible' and the inner contents as 'collaspible-content'.

<div id="collapsible" class="collapsible">
        Collapsible
        <div class="collapsible-content">
            <form class="form-upload">
            <input class="input-file" type="file" multiple>
            <input type="submit">
            </form>
        </div>
        
    </div>

Include this css with your personal adjustments:

/* Collapse CSS */
    .collapsible
    {
        cursor: pointer;
        position:'absolute';
        background-color: lightblue;/* adjust as needed */
        height: 20px;/* adjust as needed */
        width: 100px;/* adjust as needed */
    }
    .collapsible:hover
    {
        background-color: rgb(41, 40, 40) /* adjust as needed */
    }
    /* Collapse content CSS */
    .collapsible-content
    {
        overflow:hidden;
        max-height: 0px ;
        /* adjust as needed */
        -webkit-transition: max-height 2s ease-out;
        -moz-transition: max-height 2s ease-out;
        transition: max-height 2s ease-out;
    }
    .title 
    {
        /* All the formatting of the collapse title */
    }

Import and use the package.

import { makeCollapsible } from 'simplycollapsible-js'
//get all elements classed collapsible
var collapsibleArr = document.querySelectorAll('.collapsible')

//for each elements - call the makeCollapsible function
collapsibleArr.forEach((col) => makeCollapsible(col as HTMLElement))

And that's it.

And for a sideways collapse it's the same process just adjusting the css:

<div id="collapsible" class="collapsible-sideways">
        <div class="title">Collapsible</title>
        <div class="collapsible-content-sideways">
            <form class="form-upload">
            <input class="input-file" type="file" multiple>
            <input type="submit">
            </form>
        </div>
        
    </div>

for sideways css, it's mostly the same, just adjust the width and height as you need and the class names

.collapsible-sideways
{
    margin-left: 30px;
    cursor: pointer;
    position: relative;
    margin-bottom:400px;
    background-color: lightblue;/* adjust as needed */
    height: 400px;/* adjust as needed */
    width: 100px;/* adjust as needed */
    z-index: 1;
}

.collapsible-sideways:hover
{
    background-color: blue; /* adjust as needed */
}

/* Collapse content CSS */
.collapsible-content-sideways
{
    position:relative;
    background-color: lightblue;
    overflow:hidden;
    margin-top: -270px;
    margin-left: 95px;
    max-width: 0px;
    height: 300px;

    /* adjust as needed */
    -webkit-transition: max-width 2s ease-out;
    -moz-transition: max-width 2s ease-out;
    transition: max-width 2s ease-out;
    z-index: 3;
}

.content-background
{
    background-color:white;
    margin-top: 25px;
    margin-left: 20px;
    max-width: 250px;
    height: 250px;
}

/* Optional */
.title
{
    display:inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    padding:10px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    position: relative;
    margin-top: 30px;
    margin-left: 20px;
    /* left:130px; */
    z-index: 2;
    pointer-events:none
}

There is also a makeCollapsibleSideways method which works similarly. Just change max-height to max-width in the css...

/* Collapse CSS */
.collapsible
{
    cursor: pointer;
    position:'absolute';
    background-color: lightblue;/* adjust as needed */
    height: 20px;/* adjust as needed */
    width: 100px;/* adjust as needed */
}
.collapsible:hover
{
    background-color: rgb(41, 40, 40) /* adjust as needed */
}
/* Collapse content CSS */
.collapsible-content
{
    overflow:hidden;
    max-height: 0px ;
    /* adjust as needed */
    -webkit-transition: max-width 2s ease-out;
    -moz-transition: max-width 2s ease-out;
    transition: max-width 2s ease-out;
}

.title
{
    display:inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    padding:10px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    position: relative;
    margin-top: 30px;
    margin-left: 20px;
    /* left:130px; */
    z-index: 2;
    pointer-events:none
}

..and use the makeCollapsibleSideways function with a maxWidth added (just a slight difference in how it works)

import { makeCollapsibleSideways } from 'simplycollapsible-js'

//get all elements classed collapsible
var collapsibleArr = document.querySelectorAll('.collapsible')

//for each elements - call the makeCollapsible function
var maxWidth = 300
collapsibleArr.forEach((col) => makeCollapsibleSideways(col as HTMLElement,maxWidth))

And that it :). It should just make the items collapsible and you can adjust the css as needed.

EXPERIMENTAL: CSS can be replaced with other css or overriden by supplying your own css like this (recommended for simplicity) - but I have come across errors with this method so, use the other method if this fails in a given senario

import customCss1 from './asset-location/custom1.css'
import customCss2 from './asset-location/custom1.css'
import { addCssStyling } from 'simplycollapsible-js'

const css = [customCss1,customCss2]
addCssStyling(css)