add accordion for latest version

[snehlata08]

There is one accordion plugin but with the version 21.10 its not working. How can we create an accordion in grapesjs something like this?

[artf]

Maybe more details about the plugin and what is not working could help.

[snehlata08]

I want to create this plugin which acts as accordion and this is my code
`
(function (editor) {
if (!editor) {
console.error('GrapesJS instance not provided.');
return;
}

const bm = editor.BlockManager;
const domc = editor.DomComponents;

// Accordion Item component
domc.addType('accordion-item', {
model: {
defaults: {
tagName: 'div',
draggable: '[data-gjs-type=accordion]', // Can only be dropped inside an accordion
droppable: '[data-gjs-type=accordion-content]', // Can only drop inside an accordion content
attributes: { 'data-gjs-type': 'accordion-item' },
components: [
{
type: 'default',
tagName: 'div',
attributes: { class: 'accordion-header' },
components: [
{
type: 'text',
tagName: 'span',
components: 'Header',
},
],
},
{
type: 'accordion-content',
tagName: 'div',
attributes: { class: 'accordion-content' },
components: 'Content',
},
],
},
},
view: {
events: {
'click .accordion-header': 'onHeaderClick',
},

  onHeaderClick(e) {
    const header = e.target.closest('.accordion-header');
    const item = header.closest('[data-gjs-type=accordion-item]');
    const content = item.querySelector('.accordion-content');
    const isActive = item.classList.contains('active');

    // Toggle active class
    item.classList.toggle('active', !isActive);
    content.style.display = isActive ? 'none' : 'block';
  },
},

});

// Accordion Content component
domc.addType('accordion-content', {
model: {
defaults: {
draggable: false, // Cannot be dragged
droppable: true, // Can drop other components inside
attributes: { 'data-gjs-type': 'accordion-content' },
},
},
});

// Accordion component
domc.addType('accordion', {
model: {
defaults: {
tagName: 'div',
attributes: { 'data-gjs-type': 'accordion' },
components: [
{
type: 'accordion-item',
},
{
type: 'accordion-item',
},
],
},
},
view: {
init() {
this.listenTo(this.model, 'change:components', this.render);
},
},
});

// Add accordion block
bm.add('accordion', {
label: 'Accordion',
category: 'Basic',
content: {
type: 'accordion',
},
});

// Add custom CSS
const css = .accordion-header { cursor: pointer; padding: 10px; background: #eee; border: 1px solid #ddd; margin-bottom: 5px; } .accordion-content { display: none; padding: 10px; border: 1px solid #ddd; border-top: none; } .accordion-item.active .accordion-content { display: block; };

// Add the CSS to the editor
editor.addComponents(<style>${css}</style>);
})(grapesjs);

`

But when i run this i get error that

Cannot read properties of undefined (reading 'addType')
at grapesjs-accordion.js:11:8

How can i resolve this