M E D Y A T Ö R

Siteye Accordion Menü Ekleme

  • 09

    AĞUSTOS

    2017

  • 4480
    Görüntülenme

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>