diff --git a/resources/js/accordeon.js b/resources/js/accordeon.js
new file mode 100644
index 0000000..98dce1b
--- /dev/null
+++ b/resources/js/accordeon.js
@@ -0,0 +1,48 @@
+function openAccordion(detailTag) {
+  const wrapper = detailTag.querySelector('.homegrade-dynamic-accordeon__content-wrapper');
+  const content = detailTag.querySelector('.homegrade-dynamic-accordeon__content');
+
+  detailTag.setAttribute('open', 'true');
+  detailTag.setAttribute('is_opening', '');
+
+  wrapper.style.height = content.offsetHeight + 'px';
+  // remove is opening after css transition
+
+  detailTag.addEventListener('transitionend', () => {
+    detailTag.removeAttribute('is_opening');
+  });
+}
+function closeAccordion(detailTag) {
+  const wrapper = detailTag.querySelector('.homegrade-dynamic-accordeon__content-wrapper');
+  wrapper.style.height = '0px';
+
+  setTimeout(() => {
+    detailTag.removeAttribute('open');
+  }, 300);
+}
+
+function handleAccordeonClick(detailTag) {
+  let isOpen = detailTag.getAttribute('open');
+  let isOpening = detailTag.getAttribute('is_opening');
+  if (isOpen == null && isOpening == null) {
+    openAccordion(detailTag);
+  }
+  if (isOpen == 'true') {
+    closeAccordion(detailTag);
+  }
+}
+
+export default function accordeonInit() {
+  const detailsTags = document.querySelectorAll('details.homegrade-dynamic-accordeon');
+  if (detailsTags.length === 0) return;
+
+  // HANDLING CLICK
+  Array.from(detailsTags).forEach((detailTag) => {
+    closeAccordion(detailTag);
+
+    detailTag.addEventListener('click', (event) => {
+      event.preventDefault();
+      handleAccordeonClick(detailTag);
+    });
+  });
+}