Collapsify By Terra
  • nameSpace (string) = collapsify: the data attributes keyword.
  • dropdownElement (HTMLElement): the select element to use for tablets/mobiles.
  • isAnimation (boolean) = true: include animated transitions between content.
  • animationSpeed (number) = 400: transitions speed.
  • cssEasing (string) = ease-in-out: type of animation.
  • closeOthers (boolean) = true: define if the rest of the contents would close or not when you click on one of them.
  • isTab (boolean) = true: set to true if it includes tabs.
  • onSlideStart (function): callback to execute once transition starts.
  • onSlideEnd (function): callback to execute once transition ends.

Simple Collapse

It can start as expanded or collapsed. You just need to add/remove '--is-active' class and toggle aria attributes.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea deleniti nisi maxime sequi corporis labore repellat impedit, id vel, esse ad, culpa praesentium? Nobis quam fugiat natus, at nisi cumque. 

                        
              
    var SimpleExample = new Collapsify()

Data attributes (ID):
Trigger elements -> data-{nameSpace}-control
Content elements -> data-{nameSpace}-content
- nameSpace default value: 'collapsify'

Simple Collapse 2

Same look and feel but different triggers, collapse but now with nameSpace attribute set as 'different'.

            
              
    var different = new Collapsify({
        nameSpace:'different',
    })

Data attributes (ID):
Trigger elements -> data-{nameSpace}-control
Content elements -> data-{nameSpace}-content
- nameSpace value: 'different'

Nested Collapse

Here it is shown another collapse, but now one of the contents has its own nested triggerButton-content.

            
              
    var nested = new Collapsify({
        nameSpace: "nested",
        closeOthers: false,
    });

'closeOthers' argument will define if the rest of the contents would close or not when you click on one of them.

Accordion

It works as a classic accordion component. The same 'closeOthers' attribute functionality applies here too.

Second content : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit repellat optio ab fugiat pariatur eius dolores omnis ullam nostrum ad vitae praesentium ex veniam veritatis consequatur, quidem consectetur nemo? Voluptatibus. 

          
            
    var accordion = new Collapsify({
        nameSpace: "accordion",
    });

Data attributes (ID):
Trigger elements -> data-{nameSpace}-control
Content elements -> data-{nameSpace}-content
- nameSpace value: 'accordion'

Tabs - Initial active tab

                
                  
    var tab = new Collapsify({
    nameSpace: "tab",
    isTab: true,
    dropdownElement: HTMLElement,
    });

Common tabs functionality. Two new attributes to take into consideration:
- isTab: boolean
- dropdownElement: HTMLSelectElement for tablets/mobiles devices.

Tabs 2 - No initial active tabs

                
                  
    var tab = new Collapsify({
    nameSpace: "tabTwo",
    isTab: true,
    dropdownElement: HTMLElement,
    });

Another tabs example but this time with no initial active elements.

Tabs 3 - with Tiny Slider

                
                  
    var tab = new Collapsify({
    nameSpace: "tabThird",
    closeOthers: true,
    isTab: true,
    dropdownElement: document.querySelector(".js--select-item-c"),
    onSlideStart: (isOpen, contentID) => {
    ...
    },
    onSlideEnd: (isOpen, contentID) => {
    ...
    }
    });

This example shows how you can use this library with other js libraries, it is important to use both 'onSlideStart' and 'onSliderEnd' callbacks in order to initialize/destroy.