Simple Vanilla JavaScript Expand and Collapse (async). Summary and Details paired elements 1:1

SimpleExpand.js

var oSimpleExpand = (function( doc ){ // Simple expand / collapse
    var aSum, aDet; // Summary and Details paired elements 1:1
    return {
        "rebind": function(){
            aSum = [].slice.call( doc.querySelectorAll("[data-expand-summary]") );
            aDet = [].slice.call( doc.querySelectorAll("[data-expand-details]") );
            aSum.forEach( function( aE ){
                var aDecl = aE.dataset.expandSummary.split("|");
                if(  aDecl.length > 0 ){
                    aE.aDecl = aDecl;
                    aE.eDet = aDet.filter( function( eDet ){ // match
                        if( eDet.dataset.expandDetails == aDecl[0] ){ return true; }
                    })[0];
                    aE.removeEventListener( "click", oSimpleExpand.click );
                    aE.addEventListener( "click", oSimpleExpand.click );                    
                }
            });
        },
        "click": function( ev ){ // hide or show
            var eDet = this.eDet;
            var aDecl = this.aDecl;
            if( eDet.classList.contains("hide") ){
                eDet.classList.remove("hide");
                if( aDecl[1] ) this.classList.add( aDecl[1] );
                if( aDecl[2] ) { // swap temp
                    aDecl[3] = this.innerHTML;
                    this.innerHTML = aDecl[2];
                }
            }else{
                eDet.classList.add("hide");
                if( aDecl[1] ) this.classList.remove( aDecl[1] );
                if( aDecl[3] ) this.innerHTML = aDecl[3]; // undo
            }
            ev.preventDefault();
        }
    }
})( document );

Ands its declarative.

Simplified Vue.js version:

**@click.prevent="doSimpleExpand('navBtnContent_1')"

doSimpleExpand( nameContent ){ // Expand or Collapse on existence in array if( this.vueSimpleExpand.includes( nameContent ) ){ // Collapse this.vueSimpleExpand = this.vueSimpleExpand .filter( item => (item !== nameContent) ); }else{ this.vueSimpleExpand.push( nameContent ); // Expand } }

Please and some A11Y attributes | aria-controls, aria-expanded, aria-haspopup, and ...