BLOG
Siteye Accordion Menü Ekleme
Yazılım     2017-08-09 10:17:45

Aşağıdaki kodları kullanarak sitenize Accordion Menü ekleyebilirsiniz ;


<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>