Accordion Block

class AccordionBlock {
    /**
     * Create and initialise objects of this class
     * @param {object} block
     */
    constructor(block) {
        this.block = block;
        this.items = block.querySelectorAll('.qa-item');
        this.init();
    }

    init() {
        this.items.forEach(item => {
            const trigger = item.querySelector('.qa-item-trigger');
            const content = item.querySelector('.qa-item-content');

            trigger.addEventListener('click', () => {
                // Toggle
                const isOpen = item.classList.contains('is-open');
                this.closeAll();

                if (!isOpen) {
                    item.classList.add('is-open');
                    content.style.maxHeight = content.scrollHeight + 50 + 'px';
                }
            });
        });
    }

    closeAll() {
        this.items.forEach(item => {
            item.classList.remove('is-open');
            const content = item.querySelector('.qa-item-content');
            content.style.maxHeight = '0px';
        });
    }
}

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.block-accordion-block').forEach(
        block => new AccordionBlock(block)
    );
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/accordion-block",
    "title": "Accordion Block",
    "description": "Accordion Block",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-accordion.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": true,
            "text": false,
            "gradients": false
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "style": "file:../../assets/css/accordion-block/block-accordion.css"
}