<style>

button.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;

}

button.accordion.active, button.accordion:hover {

    background-color: #ddd; 

}

div.panel {

    padding: 0 18px;

    display: none;

    background-color: white;

}

</style>

<button class="accordion">Başlık 1</button>

<div class="panel">

  <p>Bu alana içerik gelecektir. Bu alana içerik gelecektir. Bu alana içerik gelecektir. Bu alana içerik gelecektir. Bu alana içerik gelecektir. Bu alana içerik gelecektir. Bu alana içerik gelecektir. Bu alana içerik gelecektir. Bu alana içerik gelecektir. </p>

</div>

<button class="accordion">Başlık 2</button>

<div class="panel">

    <p>Bu alana içerik gelecektir. Bu alana içerik gelecektir. Bu alana içerik gelecektir. Bu alana içerik gelecektir. Bu alana içerik gelecektir. Bu alana içerik gelecektir. Bu alana içerik gelecektir. Bu alana içerik gelecektir. Bu alana içerik gelecektir. </p>

</div>

<button class="accordion">Başlık 3</button>

<div class="panel">

    <p>Bu alana içerik gelecektir. Bu alana içerik gelecektir. Bu alana içerik gelecektir. Bu alana içerik gelecektir. Bu alana içerik gelecektir. Bu alana içerik gelecektir. Bu alana içerik gelecektir. Bu alana içerik gelecektir. Bu alana içerik gelecektir. </p>

</div>

<script>

var acc = document.getElementsByClassName("accordion");

var i;

for (i = 0; i < acc.length; i++) {

    acc[i].onclick = function(){

        this.classList.toggle("active");

        var panel = this.nextElementSibling;

        if (panel.style.display === "block") {

            panel.style.display = "none";

        } else {

            panel.style.display = "block";

        }

    }

}

</script>