Accordion Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
        .accordion-header {
            display: flex;
        }

        .accordion-btn,
        .accordion-tab {
            padding: 20px;
            border: 1px solid crimson;
        }

        .accordion-tab {
            display: none;
        }

        .accordion-tab-active {
            display: block;
        }
    </style>
</head>

<body>
    <div class="accordion">
        <div class="accordion-header">
            <div class="accordion-btn accordion-btn-active" data-accordion-selector=".accordion-tab-1"
                data-obj-properties='{"attr1":1,"attr2":3,"attr3":3}'>
                Tabella 1
            </div>
            <div class="accordion-btn" data-accordion-selector=".accordion-tab-2"
                data-obj-properties='{"attr1":1,"attr2":4,"attr3":3}'>
                Tabella 2
            </div>
            <div class="accordion-btn" data-accordion-selector=".accordion-tab-3"
                data-obj-properties='{"attr1":1,"attr2":2,"attr3":5}'>
                Tabella 3
            </div>
            <div class="accordion-btn" data-accordion-selector=".accordion-tab-4"
                data-obj-properties='{"attr1":1,"attr2":6,"attr3":3}'>
                Tabella 4
            </div>
        </div>
        <div class="accordion-body">
            <div class="accordion-tab accordion-tab-1 accordion-tab-active">
                Lorem 1
            </div>
            <div class="accordion-tab accordion-tab-2">Lorem 2</div>
            <div class="accordion-tab accordion-tab-3">Lorem 3</div>
            <div class="accordion-tab accordion-tab-4">Lorem 4</div>
        </div>
    </div>

    <strong>Current DATA:</strong> <span id="dprop"></span>

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const accordionBtns =
                document.querySelectorAll(".accordion-btn");

            Object.values(accordionBtns).map((btn, idx, ary) => {
                btn.addEventListener("click", (e) => {
                    e.preventDefault();

                    const _this = e.target;

                    // Chiudo tutto e resetto tutto
                    Object.values(
                        document.querySelectorAll(".accordion-tab")
                    ).map((tab) => {
                        tab.classList.remove("accordion-tab-active");
                    });
                    ary.map((b) => {
                        b.classList.remove("accordion-btn-active");
                    });

                    // attivo la classe corrispondente
                    _this.classList.add("accordion-btn-active");
                    document
                        .querySelector(_this.dataset.accordionSelector)
                        .classList.add("accordion-tab-active");

                    document.querySelector("#dprop").innerHTML =
                        _this.dataset.objProperties;

                    console.log(
                        "TEST",
                        JSON.parse(_this.dataset.objProperties)
                    );
                });
            });
        });
    </script>
</body>

</html>