اضافة قائمة الأكورديون باستخدام كود HTML و CSS و JavaScript

تُستخدم قوائم الأكورديون في تنظيم وعرض المحتوى بطريقة منظمة وجذابة. وتساعد في إظهار المعلومات بشكل مختصر وسهل القراءة للمستخدمين. وفي هذا المقال، سوف نتعلم كيفية إنشاء قائمة الأكورديون باستخدام كود HTML و CSS و JavaScript.

قم بإنشاء الأكورديون باستخدام كود HTML و CSS و JavaScript لموقعك أو المدونة.

مرحبًا بالجميع ، بالعودة إلى مدونة كذا فكرة، سأشارككم اليوم في هذه المقالة حول كيفية إنشاء Accordion باستخدام كود HTML و CSS و JavaScript المتجاوب. الأكورديون هو عنوان وصفي بوظيفة فتح وإغلاق الوصف. في الأساس ، وصف الأكورديون مخفي وعلينا النقر فوق العنوان لإظهار الوصف. كل عنوان أكورديون له وصفه الخاص. يمكن أن تحتوي الأكورديون على مجموعة متنوعة من المحتوى النصي ، مثل الأسئلة الشائعة.

ما هي قائمة الأكورديون؟

إنها قائمة تسمح للمستخدم بالنقر على عنوان لعرض محتوى مخبأ داخله

كيف يمكنني تصميم قائمة الأكورديون باستخدام CSS؟

يمكنك استخدام الكلاسات والأيدي الخاصة بعناصر قائمة الأكوردي

 قم باضافة الأكورديون باستخدام كود HTML و CSS و JavaScript للمدونة. 

فيما يلي كود الاضافة لإنشاء أكورديون باستخدام لغة HTML و CSS وجافا سكريبت لموقعك، وسوف أشارك كود HTML وجافا سكريبت باعتباره الكود الرئيسي ، وستكون CSS للإشارة فقط وتحتاج إلى تحرير CSS. أو تخصيص لتناسب مدونتك.

الخطوة الاولى: إدخال كود CSS قبل علامة </head>

/*-- code by kzafkra.com --*/
<style>/*<![CDATA[*/
  .accordion .accordion-content{margin:10px 0;border-radius:4px;background:#FFF7F0;border:1px solid #FFD6B3;overflow:hidden}
  .accordion-content:nth-child(2){background-color:#F0FAFF;border-color:#CEF}
  .accordion-content:nth-child(3){background-color:#FFF0F3;border-color:#FFCCD6}
  .accordion-content:nth-child(4){background-color:#F0F0FF;border-color:#CCF}
  .accordion-content.open{padding-bottom:10px}
  .accordion-content .a-header{display:flex;min-height:50px;padding:0 15px;cursor:pointer;align-items:center;justify-content:space-between;transition:all .2s linear}
  .accordion-content.open .a-header{min-height:35px}
  .accordion-content .a-header .a-title{font-size:14px;font-weight:500;color:#333}
  .accordion-content .a-header i{font-size:15px;color:#333}
  .accordion-content .a-description{height:0;margin:0!important;font-size:12px;color:#333;font-weight:400;padding:0 15px;transition:all .2s linear}
/*]]>*/</style>

الخطوة الثانية: ثم إدخال كود JavaScript قبل علامة </body>

/*-- code by kzafkra.com --*/
<script>//<![CDATA[
  const accordionContent = document.querySelectorAll(".accordion-content");

  accordionContent.forEach((item, index) => {
    let header = item.querySelector(".a-header");
    header.addEventListener("click", () =>{
      item.classList.toggle("open");

      let description = item.querySelector(".a-description");
      if(item.classList.contains("open")){
        description.style.height = `${description.scrollHeight}px`;
        item.querySelector("i").classList.replace("fa-plus", "fa-minus");
      }else{
        description.style.height = "0px";
        item.querySelector("i").classList.replace("fa-minus", "fa-plus");
      }
      removeOpen(index);
    })
  })

  function removeOpen(index1){
    accordionContent.forEach((item2, index2) => {
      if(index1 != index2){
        item2.classList.remove("open");

        let des = item2.querySelector(".a-description");
        des.style.height = "0px";
        item2.querySelector("i").classList.replace("fa-minus", "fa-plus");
      }
    })
  }
//]]></script>

الخطوة الثالثة: كود HTML المستخدم داخل المقال

/*-- code by kzafkra.com --*/
<div class="accordion">
  <div class="accordion-content">
    <div class="a-header">
      <span class="a-title">What do you mean by Accordion?</span>
      <i class="fa-solid fa-plus"></i>
    </div>

    <p class="a-description">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
    </p>
  </div>
  <div class="accordion-content">
    <div class="a-header">
      <span class="a-title">What do you mean by Accordion?</span>
      <i class="fa-solid fa-plus"></i>
    </div>

    <p class="a-description">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
    </p>
  </div>
  <div class="accordion-content">
    <div class="a-header">
      <span class="a-title">What do you mean by Accordion?</span>
      <i class="fa-solid fa-plus"></i>
    </div>

    <p class="a-description">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto neque, sed inventore illum ut quis ducimus deleniti temporibus maiores? At nisi sed pariatur cupiditate quidem quod adipisci aut, eos quis minima voluptates non veniam ipsam quasi architecto ducimus error eum id ab, suscipit doloribus, ut accusantium consequuntur voluptate! Unde, hic sed rerum officia totam id libero officiis nihil rem sequi porro labore praesentium repudiandae a blanditiis molestias nisi beatae natus! Ea, ut voluptates, natus harum nesciunt odio hic eveniet reprehenderit veritatis, possimus tempora magni soluta eaque quidem neque maxime nostrum sapiente commodi? Earum ex cumque cupiditate dicta, tempora temporibus quaerat.
    </p>
  </div>
  <div class="accordion-content">
    <div class="a-header">
      <span class="a-title">What do you mean by Accordion?</span>
      <i class="fa-solid fa-plus"></i>
    </div>

    <p class="a-description">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
    </p>
  </div>
</div>

الخطوة الرابعة: أضف مكتبة رائعة للخط قبل العلامة </head>

/*-- code by kzafkra.com --*/
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>

 

رابط معاينة الاضافة

الخاتمة

 لقد انتهيت من المشاركة لك إنشاء الأكورديون باستخدام كود HTML و CSS و JavaScript للمدونة . إذا كانت لديك أي مشاكل تتعلق بالكود في المقالة ، فيمكنك مراسلتي وسأساعدك في أقرب وقت ممكن.

تعديل المقال