أفضل موقع لكتابة سيرة ذاتية بقوالب متنوعة - Resumegenius

هل تبحث عن كيفية إضافة أداة قائمة أكورديون الى مدونتك؟ أو تبحث عن أداة قائمة منسدلة تحوي أسئلة بها اجابات مختبئة. إذا كان جوابك بنعم فأنت في المكان الصحيح ، ففي هاته المقالة سنشرح كيفية إضافة قائمة أكورديون الى مدونه بلوجر بشكل احترافي وبشكلين رائعين.

سنقوم بدراسة الاكورديون وكيفية إضافة قائمة أكورديون احترافية ، ولماذا قائمة أكورديون مهمة للبعض.

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

تعتبر قائمة اكورديون (Accordion Lists) أحد الطرق الشائعة والفعالة لتنظيم المحتوى في مواقع الويب. تُستخدم هذه القوائم لعرض عناصر متعددة في مساحة محدودة، حيث يتم عرض عنصر واحد فقط في الوقت نفسه، وتظهر باقي العناصر عند الضغط على عنوان أو رمز. توفر تبويبات اكورديون طريقة سهلة للمستخدمين للوصول إلى المحتوى الذي يهمهم وكذلك توفير مساحة على الصفحة.

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

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

فوائد إضافة أداة قائمة أكورديون الى مدونتك

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

• توفير المساحة: يعد إضافة قائمة أكورديون حلاً مثالياً للمواقع التي تحتوي على معلومات كثيرة وقوائم طويلة. بدلاً من عرض كل القائمة في صفحة واحدة، يتم تقسيم المحتوى إلى عناصر قابلة للتوسيع والطي. هذا يتيح للمستخدمين فتح الأقسام التي يهتمون بها فقط، وبالتالي يوفر المساحة ويجعل التنقل في الموقع سهلاً.

• تحسين تجربة المستخدم: بواسطة قائمة الأكورديون، يصبح التصفح أكثر تفصيلاً ومنظماً. المستخدمون سيتمكنون من الوصول إلى المحتوى المطلوب بسهولة وسلاسة، حيث لن يكونوا مضطرين للتمرير عبر صفحات طويلة أو الانتقال بين عدة صفحات للعثور على المعلومات المحددة. بالإضافة إلى ذلك، فإن قوائم الأكورديون تساعد في تقليل عدد النقرات اللازمة للعودة إلى الصفحة الرئيسية أو القسم الرئيسي، مما يوفر وقت المستخدم وجهد الملاحة.

• توفير وقت التحميل: قوائم الأكورديون تساعد في تخفيض وقت التحميل للصفحة. عندما يتم طي أجزاء القائمة التي لا تعتبر هامة في الوقت الحالي، يتم تحميل المحتوى المرئي فقط. هذا يساهم في تحسين سرعة التحميل وتجربة التصفح العامة للمستخدم.

• تحقيق التنظيم والبساطة: يمكن استخدام قوائم الأكورديون لتنظيم المحتوى وتقسيمه إلى فئات مختلفة أو أقسام متعددة. يزيد ذلك من تجربة المستخدم بشكل عام، حيث يجدون المعلومات بطريقة منظمة وسهلة الوصول. يمكن أيضًا إضافة رموز أيقونة أو صور للقسم الرئيسي للمساعدة في توجيه وتحسين التنقل وقابلية الاستيعاب.

كيفية إضافة أداة قائمة أكورديون الى موقعك

إذا كنت ترغب في إضافة قائمة أكورديون إلى موقعك، يمكنك اتباع الخطوات التالية :

تركيب كود javascript قائمة اكورديون

1. إبحث عن </body> داخل أكواد موقعك.
2. ضع الكود التالي فوق </body> وقم بالحفظ.

<script>//<![CDATA[  
const accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(header => {
  let isClicked = false; 

  header.addEventListener('click', () => {
    if (!isClicked) {
      isClicked = true; 
      const item = header.parentNode;
      const content = item.querySelector('.accordion-content');

      item.classList.add('active');
      content.style.display = 'block';
    } else {
      isClicked = false; 
      const item = header.parentNode;
      const content = item.querySelector('.accordion-content');

      item.classList.remove('active');
      content.style.display = 'none';
    }
  });
});
   //]]>
</script>

تركيب كود CSS قائمة اكورديون

1. إبحث عن </b:skin> داخل أكواد موقعك.
2. ضع الكود التالي فوق </b:skin> وقم بالحفظ.

/* accordion by:https://www.wlmok-web.com */.accordion-item { border: 1px solid #ddd; border-top: 0; } .accordion-item:first-child { border-top: 1px solid #ddd; } .accordion-item p { margin: 0; } .accordion-header { padding: 15px 10px; display: flex; align-items: center; cursor: pointer; } .accordion-header::after { content: ''; display: block; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg>') center no-repeat; width: 15px; height: 15px; margin-right: auto; margin-left: 10px; transition: 0.3s; } .accordion-header p { color: #2e2e2e; font-weight: 600; } .accordion-content { padding: 15px 10px; border-top: 1px solid #ddd; display: none; } .accordion-item.active .accordion-content { display: block; } .accordion-header.opened::after { transform: rotate(180deg); }.accordion-Questions { color: #fff;background: #000000;border-radius: 10px 10px 0 0;padding: 5px 10px;font-size: 1.5rem;margin: 0em 0;}

تركيب كود html قائمة اكورديون

يمكن تركيب الكود داخل محرر الأكواد الخاص بالمشاركة التي تريد نشرها. كما أنه يوجد للكود التالي شكلان ولكل شكل كود خاص به، يمكنك تحميل وتجربة اي كود تحتاجه.

معاينة الشكل الأول

الكود الخاص بالشكل الأول:

<div class="accordion-Questions"><span>أسئلة شائعة</span></div>
<div class="accordion">
  
  <div class="accordion-item">
    <div class="accordion-header">السؤال رقم 1</div>
    <div class="accordion-content">
      <p>قم بالإجابة عن السؤال الذي تم طرحه في  الأعلى.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">السؤال رقم 2</div>
    <div class="accordion-content">
      <p>قم بالإجابة عن السؤال الذي تم طرحه في  الأعلى.
</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">السؤال رقم 3</div>
    <div class="accordion-content">
      <p>قم بالإجابة عن السؤال الذي تم طرحه في  الأعلى.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">السؤال رقم 4</div>
    <div class="accordion-content">
      <p>قم بالإجابة عن السؤال الذي تم طرحه في  الأعلى.</p>
    </div>
  </div>
</div>

معاينة الشكل الثاني

الكود الخاص بالشكل الثاني:

<div class="accordion">
  
  <div class="accordion-item">
    <div class="accordion-header">السؤال رقم 1</div>
    <div class="accordion-content">
      <p>قم بالإجابة عن السؤال الذي تم طرحه في  الأعلى.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">السؤال رقم 2</div>
    <div class="accordion-content">
      <p>قم بالإجابة عن السؤال الذي تم طرحه في  الأعلى.
</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">السؤال رقم 3</div>
    <div class="accordion-content">
      <p>قم بالإجابة عن السؤال الذي تم طرحه في  الأعلى.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">السؤال رقم 4</div>
    <div class="accordion-content">
      <p>قم بالإجابة عن السؤال الذي تم طرحه في  الأعلى.</p>
    </div>
  </div>
</div>

بعد تركيبك للأكواد بشكل صحيح يتبقى عليك التعديل على الفقرات التي تريد وضعها في الأكورديون ، وبهاذا نكون إنتهينا من درس اليوم حول اضافه قائمه الاكورديون الى مدونه بلوجر.

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

تعديل المقال