ساخت منو آکاردئون در وب سایت

Accordion ها زمانی استفاده می شوند که بخواهید حجم زیادی از محتوا را پنهان یا آشکار کنید.

ساخت یک منو Accordion ساده

قدم اول : کد HTML را اضافه کنید.
مثال :

Section 1

                 
Lorem ipsum...


Section 2

                 
Lorem ipsum...


Section 3

                 
Lorem ipsum...

قدم دوم :  کد CSS را اضافه کنید. Accordion را نگارش کنید.
مثال :

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}

قدم سوم :  حال برای عمل کردن منو کد جاوا اسکریپت را اضافه کرده و آن را امتحان کنید.

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

var i;



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

  acc[i].addEventListener("click", function() {

    /* Toggle between adding and removing the "active" class,

    to highlight the button that controls the panel */

    this.classList.toggle("active");



    /* Toggle between hiding and showing the active panel */

    var panel = this.nextElementSibling;

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

      panel.style.display = "none";

    } else {

      panel.style.display = "block";

    }

  });

}

منو آکاردئون متحرک (Slide Down)

برای ایجاد یک Accordion متحرک در کلاس" panel" برای ویژگی"max-height" از maxheight:0, overflow:hidden,”transition” استفاده کنید. سپس از کد جاوا اسکریپت برای slide down نمودن محتوا با تنظیم max-height بر اساس ارتفاع در صفحه نمایش های مختلف، استفاده کنید.
سپس برای ساخت منو آکاردئون متحرک از دستور جاوا اسکرپیت زیر استفاده می کنیم و مقداری را بعنوان حداکثر ارتفاع برای باز شدن هر بخش از منو مشخص می کنیم. این ارتفاع باید متناسب با ارتفاع پنل بر روی اسکرین های مختلف تعیین شود.

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

    }

  });

}

اضافه کردن Icon به منو آکاردئون

به هر دکمه یک آیکون اضافه کنید تا مشخص شود محتوای تاشو ( کشویی) باز یا بسته است.

.accordion:after {

  content: '\02795'; /* Unicode character for "plus" sign (+) */

  font-size: 13px;

  color: #777;

  float: right;

  margin-left: 5px;

}



.active:after {

  content: "\2796"; /* Unicode character for "minus" sign (-) */

}