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

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>