آموزش ساخت آکاردئون با استفاده از HTML و CSS و JS

مسیح دیندار
مدیریت
عضو شده: 2021-04-12 14:23:35
2021-05-23 12:22:26

آکاردئون (Accordion) یکی از عناصر طراحی سایت هست که می توان داده های بسیار طولانی را به صورت طبقه بندی و دسته بندی شده در سایت در اختیار کاربران قرار داد. طرحی که می توانیم از آن برای نمایش بخش هایی مانند پرسش و پاسخ، لینک های دانلود و یا پیش نمایش و نمایش ویدیوپلیرها در سایت استفاده کنیم.

آکاردئون ها حالت های گوناگونی دارند که حالت های افقی، عمودی و درون خطی از نمونه های آن است اما حالت عمودی و نمایش محتوا زیر هر قسمت، از حالت مرسوم آن است.

برای ایجاد چنین طرحی، ما باید از سه زبان CSS و JS و HTML استفاده کنیم.

قدم اول: کدهای HTML

برای شروع، ابتدا باید کدهای HTML مربوط به آکاردیون را در قسمتی از قالب که قصد داریم آکاردئون را در آنجا نمایش دهیم، قرار دهیم. برای مثال اگر قصد دارید لینک های دانلود را درون آن قرار دهید، کدها را در فایل single.php قرار دهید (در وردپرس)

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

 

قدم دوم: کدهای JS

مرحله بعدی قرار دادن کدهای جاوااسکریپت برای عملکرد کلیدهای اکاردئون است که با کلیک روی بخش ها، محتوای زیرمجموعه آن نمایش یا مخفی خواهد شد. این کد را باید در فایل فوتر سایتتان قرار دهید. قبل از بسته شدن تگ </body>

<script>
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.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

 

قدم سوم: کدهای CSS

قدم آخر، استفاده از کدهای CSS برای بهتر کردن ظاهر آکاردئون است. شما می توانید هر ایده ای که دارید در خصوص زیباتر کردن این آکاردئون ها بکار بگیرید و کدهای استایل خلاقانه تری استفاده کنید. اما اگر می خواهید مانند تصویر پیش نمایش بالا شود، این کد را در یکی از فایل های CSS قالبتان قرار دهید:

.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;
}
.active, .accordion:hover {
  background-color: #ccc; 
}
.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

 

اکنون آکاردئون شما آماده است و اگر مراحل را درست رفته باشید، چیزی مانند تصویر بالا خواهید داشت. اگر نیاز به حالت ها و استایل های دیگری دارید، می توانید از این لینک سایر استایل ها را مشاهده و استفاده نمایید.