Buongiorno a tutti, sono nuovo del forum.
Premetto che non ho molta esperienza con HTML e PHP.
Non riesco a venire a capo di un problema.
Sto creando un form in stile accordion menu (preso da www.w3school.com), le varie sottocategorie conterrano dei textbox da compilare.
Ho racchiuso tutto all'interno di un form.
Il problema è che cliccando sui menu mi parte l'invio dei dati.
La pagina l'ho salvata con estensione .php

codice HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    .accordion {
        background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
    }

    .active, .accordion:hover {
        background-color: #ccc;
    }

    .accordion:after {
        content: '\002B';
        color: #777;
        font-weight: bold;
        float: right;
        margin-left: 5px;
    }

    .active:after {
        content: "\2212";
    }

    .panel {
        padding: 0 18px;
        background-color: white;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
    }
</style>
</head>
<body>

    <h2>Accordion with symbols</h2>
    <p>In this example we have added a "plus" sign to each button.  When the user clicks on the button, the "plus" sign is replaced with a  "minus" sign.</p>
    
    <form method="post" action="invia.php">
        <button class="accordion">Section 1</button>
        <div class="panel">
          <p>Lorem ipsum dolor sit amet, consectetu.</p>
        </div>

        <button class="accordion">Section 2</button>
        <div class="panel">
          <p>Lorem ipsum dolor sit amet.</p>
        </div>

        <button class="accordion">Section 3</button>
        <div class="panel">
          <p>Lorem ipsum dolor sit amet, con.</p>
        </div>

        <script>
            var acc = document.getElementsByClassName("accordion");
            var i;

            for (i = 0; i < acc.length; i++) {
              acc[i].addEventListener("click", function() {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.maxHeight){
                  panel.style.maxHeight = null;
                } else {
                  panel.style.maxHeight = panel.scrollHeight + "px";
                } 
              });
            }
        </script>
        
        <br>
        <input type="submit" name="invia" value="InviaDati">
    </form>
 
</body>
</html>