Add option-group feature

assets/css/metabox.scss

@@ -1885,4 +1885,76 @@
     border-top: 8px solid transparent;
     border-bottom: 8px solid transparent;
   }
-}
+}
+
+/*--------------------------------------------------------------*/
+/* Option-Group Accordion
+/*--------------------------------------------------------------*/
+.dilaz-mb-opt-group-accordion {
+  margin: 0;
+  padding: 20px;
+
+  .dilaz-mb-opt-group-accordion-item {
+    border: 1px solid #d5d5d5;
+    margin-bottom: 8px;
+    border-radius: 5px;
+    overflow: hidden;
+
+    .dilaz-mb-opt-group-accordion-header {
+      background-color: #f0f0f0;
+      color: #65686d;
+      padding: 0;
+      cursor: pointer;
+      font-weight: bold;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 50px;
+
+      &.open {
+        border-bottom: 1px solid #d5d5d5;
+      }
+
+      .drag-handle {
+        cursor: grab;
+        margin-right: 10px;
+        height: 50px;
+        width: 50px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-right: 1px solid #d5d5d5;
+      }
+
+      .toggle-handle {
+        display: flex;
+
+        svg {
+          width: 22px;
+          height: 22px;
+          transition: transform 0.3s ease;
+          margin-right: 12px
+        }
+      }
+
+      .rotate {
+        transform: rotate(180deg);
+      }
+    }
+
+    .dilaz-mb-opt-group-accordion-content {
+      display: none;
+      background: #fff;
+    }
+  }
+
+  .ui-sortable-placeholder {
+    border: 2px dashed #aaa !important;
+    background: #f9f9f9 !important;
+    visibility: visible !important;
+    margin-bottom: 8px !important;
+    border-radius: 5px !important;
+    height: 48px !important;
+    display: flex !important;
+  }
+}

assets/js/metabox.js

@@ -834,6 +834,48 @@ var DilazMetaboxScript = new function() {
 		});
 	}
 
+	/**
+	 * option-group field
+	 */
+	$t.optionGroupField = function () {
+
+	  // Accordion functionality
+	  $doc.on('click', '.dilaz-mb-opt-group-accordion-header', function(event) {
+
+      if ($(event.target).hasClass("drag-handle")) return; // Ignore clikcs on drag handle
+
+	    let content = $(this).siblings('.dilaz-mb-opt-group-accordion-content');
+      let icon = $(this).find(".toggle-handle svg");
+
+      content.slideToggle();
+      icon.toggleClass("rotate")
+      $(this).toggleClass("open")
+
+	  });
+
+	  document.querySelectorAll('.dilaz-mb-opt-group-accordion').forEach(container => {
+      let items = Array.from(container.getElementsByClassName('dilaz-mb-opt-group-accordion-item'));
+
+      // Sort items based on data-sort-index
+      items.sort((a, b) => {
+        let indexA = parseInt(a.querySelector('input.dilaz-mb-input').dataset.sortIndex, 10);
+        let indexB = parseInt(b.querySelector('input.dilaz-mb-input').dataset.sortIndex, 10);
+        return indexA - indexB;
+      });
+
+      // Append items back in sorted order
+      items.forEach(item => container.appendChild(item));
+
+      // Make accordion sortable
+      $(container).sortable({
+        handle: '.drag-handle',
+        axis: 'y',
+        placeholder: 'sortable-placeholder'
+      }).disableSelection();
+    });
+
+	}
+
 	/**
 	 * check if color is HEX, RGB, RGBA, HSL, HSLA
 	 *
@@ -979,6 +1021,7 @@ var DilazMetaboxScript = new function() {
 		$t.repeatableField();
 		$t.addRepeatableField();
 		$t.removeRepeatableField();
+		$t.optionGroupField();
 
 	};
 }