hs0ucy/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
.js-drawer-isopen, .js-drawer-isclose {
  background: yellow;
  height: auto;
  overflow: hidden;
}
.js-drawer-isopen {
  max-height: 100em;
  transition: max-height 0.5s ease-in-out;
}
.js-drawer-isclose {
  max-height: 0;
  transition: max-height 0.35s ease-in-out;
}

</style>
</head>
<body>
  <button id="btn1">Boutton 1</button>
  <button id="btn2">Boutton 2</button>
  <button id="btn3">Boutton 3</button>

  <section class="a ab abc" id="tirr1">Tirroir 1</section>
  <section class="d de def" id="tirr2">Tirroir 2</section>
  <section class="g gh ghi" id="tirr3">Tirroir 3</section>
<script id="jsbin-javascript">
'use strict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var Drawer = function Drawer(handle, drawer, user_options) {
  var _this = this;

  _classCallCheck(this, Drawer);

  this.drawer = drawer;
  this.handle = handle;
  this.default_options = {
    open: false,
    openOnlyOne: false,
    openClass: 'js-drawer-isopen',
    closeClass: 'js-drawer-isclose'
  };

  // Merge `user_options` & `default_options` into a new object
  this.options = Object.assign({}, this.default_options, user_options);

  // Check if `handle` and `drawer` are existing `HTMLElement`
  this.isHTMLElement = !!(this.handle && this.handle.nodeType === 1) && !!(this.drawer && this.drawer.nodeType === 1);

  // Check if `handle` and `drawer` are existing `NodeList`
  this.isNodeList = handle instanceof NodeList && drawer instanceof NodeList && handle.length === drawer.length;

  this.init = function () {
    var drawer = _this.drawer;
    var handle = _this.handle;

    if (_this.isHTMLElement) {
      _this.openClose(_this.handle, _this.drawer);
    } else if (_this.isNodeList) {
      (function () {
        var handles = Array.from(_this.handle);
        var drawers = Array.from(_this.drawer);
        var drawerset = [handles, drawers];
        var that = _this;

        drawers.forEach(function (drawer, index) {
          that.openClose(handles[index], drawers[index], drawerset);
        });
      })();
    }

    return null;
  };

  this.openClose = function (currHandle, currDrawer, drawerset) {
    var isOpen = _this.options.openClass;
    var isClose = _this.options.closeClass;
    var _toggle = function _toggle(thatEvt) {
      var handles = drawerset ? drawerset[0] : null;
      var drawers = drawerset ? drawerset[1] : null;

      thatEvt.preventDefault();
      thatEvt.stopPropagation();

      if (currDrawer.dataset.jsDrawerIsopen === 'false') {
        var drawerIsOpen = new CustomEvent('drawerIsOpen', {});

        currDrawer.dispatchEvent(drawerIsOpen);

        currDrawer.dataset.jsDrawerIsopen = 'true';

        thatEvt.target.dataset.jsDrawerHasopened = 'true';
      } else if (currDrawer.dataset.jsDrawerIsopen === 'true') {
        currDrawer.dataset.jsDrawerIsopen = 'false';

        thatEvt.target.dataset.jsDrawerHasopened = 'false';
      }

      if (_this.options.openOnlyOne) {
        drawers.filter(function (d) {
          return d !== currDrawer;
        }).forEach(function (d, index) {
          d.dataset.jsDrawerIsopen = 'false';
        });

        handles.filter(function (h) {
          return h !== currHandle;
        }).forEach(function (h, index) {
          h.dataset.jsDrawerHasopened = 'false';
        });
      }

      currDrawer.addEventListener('drawerIsOpen', function (e) {
        console.log(e);
      });
    };

    // Closed by default
    if (_this.options.open) {
      currDrawer.dataset.jsDrawerIsopen = 'true';
      currHandle.dataset.jsDrawerHasopened = 'true';
    } else {
      currDrawer.dataset.jsDrawerIsopen = 'false';
      currHandle.dataset.jsDrawerHasopened = 'false';
    }

    // Onclick toggle between open and close
    return currHandle.addEventListener('click', _toggle);
  };
};

var test = new Drawer(document.querySelectorAll('button'), document.querySelectorAll('section'), { openOnlyOne: true });
test.init();

//const test2 = new Drawer(document.querySelector('#btn1'), document.querySelector('#tirr1'));
//test2.init();
</script>


<script id="jsbin-source-css" type="text/css">.js-drawer {
  // Accordion Slide{Up|Down}
  &-isopen,
  &-isclose {
    background: yellow;
    height: auto;
    overflow: hidden;
  }

  &-isopen {
    max-height: 100em;
    transition: max-height 0.5s ease-in-out;
  }

  &-isclose {
    max-height: 0;
    transition: max-height 0.35s ease-in-out;
  }
}</script>

<script id="jsbin-source-javascript" type="text/javascript">class Drawer {
    constructor(handle, drawer, user_options) {
        this.drawer = drawer;
        this.handle = handle;
        this.default_options = {
            open: false,
            openOnlyOne: false,
            openClass: 'js-drawer-isopen',
            closeClass: 'js-drawer-isclose',
        };

        // Merge `user_options` & `default_options` into a new object
        this.options = Object.assign({}, this.default_options, user_options);

        // Check if `handle` and `drawer` are existing `HTMLElement`
        this.isHTMLElement = !!(this.handle && this.handle.nodeType === 1) &&
                             !!(this.drawer && this.drawer.nodeType === 1);

        // Check if `handle` and `drawer` are existing `NodeList`
        this.isNodeList = (handle instanceof NodeList &&
                           drawer instanceof NodeList) &&
                          (handle.length === drawer.length);

        this.init = () => {
            const drawer = this.drawer;
            const handle = this.handle;

            if (this.isHTMLElement) {
                this.openClose(this.handle, this.drawer);
            } else if (this.isNodeList) {
                const handles = Array.from(this.handle);
                const drawers = Array.from(this.drawer);
                const drawerset = [handles, drawers];
                const that = this;

                drawers.forEach((drawer, index) => {
                    that.openClose(handles[index], drawers[index], drawerset);
                });
            }

            return null;
        };

        this.openClose = (currHandle, currDrawer, drawerset) => {
            const isOpen = this.options.openClass;
            const isClose = this.options.closeClass;
            const _toggle = thatEvt => {
                const handles = (drawerset ? drawerset[0] : null);
                const drawers = (drawerset ? drawerset[1] : null);

                thatEvt.preventDefault();
                thatEvt.stopPropagation();

                if (currDrawer.dataset.jsDrawerIsopen === 'false') {
                  const drawerIsOpen = new CustomEvent('drawerIsOpen', {});

                  currDrawer.dispatchEvent(drawerIsOpen);

                  currDrawer.dataset.jsDrawerIsopen = 'true';

                  thatEvt.target.dataset.jsDrawerHasopened = 'true';
                } else if (currDrawer.dataset.jsDrawerIsopen === 'true') {
                  currDrawer.dataset.jsDrawerIsopen = 'false';

                  thatEvt.target.dataset.jsDrawerHasopened = 'false';
                }

                if (this.options.openOnlyOne) {
                  drawers.filter(d => d !== currDrawer).forEach((d, index) => {
                    d.dataset.jsDrawerIsopen = 'false';
                  });

                  handles.filter(h => h !== currHandle).forEach((h, index) => {
                    h.dataset.jsDrawerHasopened = 'false';
                  });
                }

                currDrawer.addEventListener('drawerIsOpen', function(e) {
                  console.log(e);
                });
            };

            // Closed by default
            if (this.options.open) {
              currDrawer.dataset.jsDrawerIsopen = 'true';
              currHandle.dataset.jsDrawerHasopened = 'true';
            } else {
              currDrawer.dataset.jsDrawerIsopen = 'false';
              currHandle.dataset.jsDrawerHasopened = 'false';
            }

            // Onclick toggle between open and close
            return currHandle.addEventListener('click', _toggle);
        };
    }
}

const test = new Drawer(document.querySelectorAll('button'), document.querySelectorAll('section'), {openOnlyOne: true,});
test.init();

//const test2 = new Drawer(document.querySelector('#btn1'), document.querySelector('#tirr1'));
//test2.init();
</script></body>
</html>

## jsbin.zilatec.css
.js-drawer-isopen, .js-drawer-isclose {
  background: yellow;
  height: auto;
  overflow: hidden;
}
.js-drawer-isopen {
  max-height: 100em;
  transition: max-height 0.5s ease-in-out;
}
.js-drawer-isclose {
  max-height: 0;
  transition: max-height 0.35s ease-in-out;
}

## jsbin.zilatec.js
'use strict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var Drawer = function Drawer(handle, drawer, user_options) {
  var _this = this;

  _classCallCheck(this, Drawer);

  this.drawer = drawer;
  this.handle = handle;
  this.default_options = {
    open: false,
    openOnlyOne: false,
    openClass: 'js-drawer-isopen',
    closeClass: 'js-drawer-isclose'
  };

  // Merge `user_options` & `default_options` into a new object
  this.options = Object.assign({}, this.default_options, user_options);

  // Check if `handle` and `drawer` are existing `HTMLElement`
  this.isHTMLElement = !!(this.handle && this.handle.nodeType === 1) && !!(this.drawer && this.drawer.nodeType === 1);

  // Check if `handle` and `drawer` are existing `NodeList`
  this.isNodeList = handle instanceof NodeList && drawer instanceof NodeList && handle.length === drawer.length;

  this.init = function () {
    var drawer = _this.drawer;
    var handle = _this.handle;

    if (_this.isHTMLElement) {
      _this.openClose(_this.handle, _this.drawer);
    } else if (_this.isNodeList) {
      (function () {
        var handles = Array.from(_this.handle);
        var drawers = Array.from(_this.drawer);
        var drawerset = [handles, drawers];
        var that = _this;

        drawers.forEach(function (drawer, index) {
          that.openClose(handles[index], drawers[index], drawerset);
        });
      })();
    }

    return null;
  };

  this.openClose = function (currHandle, currDrawer, drawerset) {
    var isOpen = _this.options.openClass;
    var isClose = _this.options.closeClass;
    var _toggle = function _toggle(thatEvt) {
      var handles = drawerset ? drawerset[0] : null;
      var drawers = drawerset ? drawerset[1] : null;

      thatEvt.preventDefault();
      thatEvt.stopPropagation();

      if (currDrawer.dataset.jsDrawerIsopen === 'false') {
        var drawerIsOpen = new CustomEvent('drawerIsOpen', {});

        currDrawer.dispatchEvent(drawerIsOpen);

        currDrawer.dataset.jsDrawerIsopen = 'true';

        thatEvt.target.dataset.jsDrawerHasopened = 'true';
      } else if (currDrawer.dataset.jsDrawerIsopen === 'true') {
        currDrawer.dataset.jsDrawerIsopen = 'false';

        thatEvt.target.dataset.jsDrawerHasopened = 'false';
      }

      if (_this.options.openOnlyOne) {
        drawers.filter(function (d) {
          return d !== currDrawer;
        }).forEach(function (d, index) {
          d.dataset.jsDrawerIsopen = 'false';
        });

        handles.filter(function (h) {
          return h !== currHandle;
        }).forEach(function (h, index) {
          h.dataset.jsDrawerHasopened = 'false';
        });
      }

      currDrawer.addEventListener('drawerIsOpen', function (e) {
        console.log(e);
      });
    };

    // Closed by default
    if (_this.options.open) {
      currDrawer.dataset.jsDrawerIsopen = 'true';
      currHandle.dataset.jsDrawerHasopened = 'true';
    } else {
      currDrawer.dataset.jsDrawerIsopen = 'false';
      currHandle.dataset.jsDrawerHasopened = 'false';
    }

    // Onclick toggle between open and close
    return currHandle.addEventListener('click', _toggle);
  };
};

var test = new Drawer(document.querySelectorAll('button'), document.querySelectorAll('section'), { openOnlyOne: true });
test.init();

//const test2 = new Drawer(document.querySelector('#btn1'), document.querySelector('#tirr1'));
//test2.init();
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.js-drawer-isopen, .js-drawer-isclose {
	background: yellow;
	height: auto;
	overflow: hidden;
	}
	.js-drawer-isopen {
	max-height: 100em;
	transition: max-height 0.5s ease-in-out;
	}
	.js-drawer-isclose {
	max-height: 0;
	transition: max-height 0.35s ease-in-out;
	}

	</style>
	</head>
	<body>
	<button id="btn1">Boutton 1</button>
	<button id="btn2">Boutton 2</button>
	<button id="btn3">Boutton 3</button>

	<section class="a ab abc" id="tirr1">Tirroir 1</section>
	<section class="d de def" id="tirr2">Tirroir 2</section>
	<section class="g gh ghi" id="tirr3">Tirroir 3</section>
	<script id="jsbin-javascript">
	'use strict';

	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

	var Drawer = function Drawer(handle, drawer, user_options) {
	var _this = this;

	_classCallCheck(this, Drawer);

	this.drawer = drawer;
	this.handle = handle;
	this.default_options = {
	open: false,
	openOnlyOne: false,
	openClass: 'js-drawer-isopen',
	closeClass: 'js-drawer-isclose'
	};

	// Merge `user_options` & `default_options` into a new object
	this.options = Object.assign({}, this.default_options, user_options);

	// Check if `handle` and `drawer` are existing `HTMLElement`
	this.isHTMLElement = !!(this.handle && this.handle.nodeType === 1) && !!(this.drawer && this.drawer.nodeType === 1);

	// Check if `handle` and `drawer` are existing `NodeList`
	this.isNodeList = handle instanceof NodeList && drawer instanceof NodeList && handle.length === drawer.length;

	this.init = function () {
	var drawer = _this.drawer;
	var handle = _this.handle;

	if (_this.isHTMLElement) {
	_this.openClose(_this.handle, _this.drawer);
	} else if (_this.isNodeList) {
	(function () {
	var handles = Array.from(_this.handle);
	var drawers = Array.from(_this.drawer);
	var drawerset = [handles, drawers];
	var that = _this;

	drawers.forEach(function (drawer, index) {
	that.openClose(handles[index], drawers[index], drawerset);
	});
	})();
	}

	return null;
	};

	this.openClose = function (currHandle, currDrawer, drawerset) {
	var isOpen = _this.options.openClass;
	var isClose = _this.options.closeClass;
	var _toggle = function _toggle(thatEvt) {
	var handles = drawerset ? drawerset[0] : null;
	var drawers = drawerset ? drawerset[1] : null;

	thatEvt.preventDefault();
	thatEvt.stopPropagation();

	if (currDrawer.dataset.jsDrawerIsopen === 'false') {
	var drawerIsOpen = new CustomEvent('drawerIsOpen', {});

	currDrawer.dispatchEvent(drawerIsOpen);

	currDrawer.dataset.jsDrawerIsopen = 'true';

	thatEvt.target.dataset.jsDrawerHasopened = 'true';
	} else if (currDrawer.dataset.jsDrawerIsopen === 'true') {
	currDrawer.dataset.jsDrawerIsopen = 'false';

	thatEvt.target.dataset.jsDrawerHasopened = 'false';
	}

	if (_this.options.openOnlyOne) {
	drawers.filter(function (d) {
	return d !== currDrawer;
	}).forEach(function (d, index) {
	d.dataset.jsDrawerIsopen = 'false';
	});

	handles.filter(function (h) {
	return h !== currHandle;
	}).forEach(function (h, index) {
	h.dataset.jsDrawerHasopened = 'false';
	});
	}

	currDrawer.addEventListener('drawerIsOpen', function (e) {
	console.log(e);
	});
	};

	// Closed by default
	if (_this.options.open) {
	currDrawer.dataset.jsDrawerIsopen = 'true';
	currHandle.dataset.jsDrawerHasopened = 'true';
	} else {
	currDrawer.dataset.jsDrawerIsopen = 'false';
	currHandle.dataset.jsDrawerHasopened = 'false';
	}

	// Onclick toggle between open and close
	return currHandle.addEventListener('click', _toggle);
	};
	};

	var test = new Drawer(document.querySelectorAll('button'), document.querySelectorAll('section'), { openOnlyOne: true });
	test.init();

	//const test2 = new Drawer(document.querySelector('#btn1'), document.querySelector('#tirr1'));
	//test2.init();
	</script>


	<script id="jsbin-source-css" type="text/css">.js-drawer {
	// Accordion Slide{Up\|Down}
	&-isopen,
	&-isclose {
	background: yellow;
	height: auto;
	overflow: hidden;
	}

	&-isopen {
	max-height: 100em;
	transition: max-height 0.5s ease-in-out;
	}

	&-isclose {
	max-height: 0;
	transition: max-height 0.35s ease-in-out;
	}
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">class Drawer {
	constructor(handle, drawer, user_options) {
	this.drawer = drawer;
	this.handle = handle;
	this.default_options = {
	open: false,
	openOnlyOne: false,
	openClass: 'js-drawer-isopen',
	closeClass: 'js-drawer-isclose',
	};

	// Merge `user_options` & `default_options` into a new object
	this.options = Object.assign({}, this.default_options, user_options);

	// Check if `handle` and `drawer` are existing `HTMLElement`
	this.isHTMLElement = !!(this.handle && this.handle.nodeType === 1) &&
	!!(this.drawer && this.drawer.nodeType === 1);

	// Check if `handle` and `drawer` are existing `NodeList`
	this.isNodeList = (handle instanceof NodeList &&
	drawer instanceof NodeList) &&
	(handle.length === drawer.length);

	this.init = () => {
	const drawer = this.drawer;
	const handle = this.handle;

	if (this.isHTMLElement) {
	this.openClose(this.handle, this.drawer);
	} else if (this.isNodeList) {
	const handles = Array.from(this.handle);
	const drawers = Array.from(this.drawer);
	const drawerset = [handles, drawers];
	const that = this;

	drawers.forEach((drawer, index) => {
	that.openClose(handles[index], drawers[index], drawerset);
	});
	}

	return null;
	};

	this.openClose = (currHandle, currDrawer, drawerset) => {
	const isOpen = this.options.openClass;
	const isClose = this.options.closeClass;
	const _toggle = thatEvt => {
	const handles = (drawerset ? drawerset[0] : null);
	const drawers = (drawerset ? drawerset[1] : null);

	thatEvt.preventDefault();
	thatEvt.stopPropagation();

	if (currDrawer.dataset.jsDrawerIsopen === 'false') {
	const drawerIsOpen = new CustomEvent('drawerIsOpen', {});

	currDrawer.dispatchEvent(drawerIsOpen);

	currDrawer.dataset.jsDrawerIsopen = 'true';

	thatEvt.target.dataset.jsDrawerHasopened = 'true';
	} else if (currDrawer.dataset.jsDrawerIsopen === 'true') {
	currDrawer.dataset.jsDrawerIsopen = 'false';

	thatEvt.target.dataset.jsDrawerHasopened = 'false';
	}

	if (this.options.openOnlyOne) {
	drawers.filter(d => d !== currDrawer).forEach((d, index) => {
	d.dataset.jsDrawerIsopen = 'false';
	});

	handles.filter(h => h !== currHandle).forEach((h, index) => {
	h.dataset.jsDrawerHasopened = 'false';
	});
	}

	currDrawer.addEventListener('drawerIsOpen', function(e) {
	console.log(e);
	});
	};

	// Closed by default
	if (this.options.open) {
	currDrawer.dataset.jsDrawerIsopen = 'true';
	currHandle.dataset.jsDrawerHasopened = 'true';
	} else {
	currDrawer.dataset.jsDrawerIsopen = 'false';
	currHandle.dataset.jsDrawerHasopened = 'false';
	}

	// Onclick toggle between open and close
	return currHandle.addEventListener('click', _toggle);
	};
	}
	}

	const test = new Drawer(document.querySelectorAll('button'), document.querySelectorAll('section'), {openOnlyOne: true,});
	test.init();

	//const test2 = new Drawer(document.querySelector('#btn1'), document.querySelector('#tirr1'));
	//test2.init();
	</script></body>
	</html>