طريقة توليد نموذج الاكورديون بسهولة على بلوجر

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

طريقة التركيب

1. اداة توليد Accordion

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

   
   
       <div class=accordion-container>
   <h2>أكورديون</h2>
   <div class=acc-g>
   	<h4><b>1</b>أضف المحتوى</h4>
   	<h3>العنوان</h3>
   	<input class='a-title normal-title'></input>
   <br>
   <h3>المحتوى</h3>
   <textarea class='a-content normal-content'></textarea>
   <br>
   <span class=accordion-add>إضافة</span>
   </div>
   <div class=acc-d><h4><b>2</b>قم بالتعديل أو الحذف</h4></div>
   <div class=acc-b>
   <h3>قم بنسخ الكود بعد توليده</h3>
   <textarea class=accordion-generated readonly=readonly></textarea>
   <span class=accordion-generate>توليد الكود</span>
   </div>
   <i class=clear></i>
   </div>
   	<script>
    $(".accordion-add").click(function () { var b = $(".a-title").val(); var a = $(".a-content").val(); var c = "<div class='a-item'><input placeholder='العنوان' type='text' class='a-item-title' value='" + b + "' readonly='readonly'><textarea placeholder='المحتوى' class='a-item-content' readonly='readonly'>" + a + "</textarea><span class='a-edit'>تعديل</span><span class='a-delete'>حذف</span></div>"; $(".a-content,.a-title").val(""); $(".acc-d").append(c); }); $(".acc-d").on("click", ".a-delete", function () { $(this).parent().remove(); }); $(".acc-d").on("click", ".a-edit", function () { $(this).siblings("input,textarea").removeAttr("readonly").addClass("a-active"); $(this).after("<span class='a-save'>حفظ</span>"); $(this).remove(); }); $(".acc-d").on("click", ".a-save", function () { $(this).siblings("input,textarea").attr("readonly", true).removeClass("a-active"); $(this).after("<span class='a-edit'>تعديل</span>"); $(this).remove(); }); $(".accordion-generate").click(function () { var e = $(".a-item"); var d = '<!-- Accordion Start -->\n'; for (var c = 0; c < e.length; c++) { var b = $(e[c]).find(".a-item-title").val(); var a = $(e[c]).find(".a-item-content").val(); if (c === 0) { d += "<button class='collapsible'>" + b + "</button>\n<div class='content'><p>" + a + "</p></div><br/> \n"; } else { d += "<button class='collapsible'>" + b + "</button>\n<div class='content'><p>" + a + "</p></div><br/> \n"; } } d += "<!-- Accordion End -->"; $(".accordion-generated").html(d); }); $(".accordion-generated,.buttons-code,.slide-generated,.code-generated").click(function () { $(this).select(); $(this).scrollTop(10000); });
   </script>
   <style>
     .code-generate { background-color: #2484BC; display: block; margin: 10px auto; padding: 10px 20px; border-radius: 3px; color: #fff; font-size: 18px; width: 120px; text-align: center; cursor: pointer; } .slide-generate:hover, .code-generate:hover { background-color: #242135; } .normal-title { display: inline-block; width: 90%; height: auto; margin: 10px auto; padding: 14px; background-color: #fff; color: #000; border: 1px solid #000;} .normal-content,.accordion-generated{ background-color: #fff; border-radius: 10px; color: #000; width: 100%; height: 150px; resize: none; border: 1px solid #000; padding: 20px; border: 1px solid #000; } .accordion-generate ,.accordion-add{ background-color: #2484BC; display: block; margin: 10px auto; padding: 10px 20px; border-radius: 3px; color: #fff; font-weight: bold; font-size: 18px; width: 120px; text-align: center; cursor: pointer; } h1{font-size:30px;font-weight:bold;text-align:center;margin-bottom:20px;border-bottom:1px solid #EEE;padding-bottom:20px}h2{text-align:center;color:#000;border:2px solid #eee;border-right:6px solid #2484BC;border-left:6px solid #2484BC;padding:10px 15px;background:#f2f2f2;margin:10px 0;border-radius:5px;font-family:changa;font-size:24px}h3{display:inline-block;vertical-align:middle;margin:0 10px;font-size:23px;color:#182848;font-family:GESSTwoLight}h4 b{font-family:CURSIVE;border-radius:100%;background-color:#2484BC;width:40px;height:40px;color:#FFF;display:inline-block;vertical-align:2px;margin-left:15px;font-weight:normal;text-align:center;font-size:26px}h4{font-size:30px;display:block;color:#000;;margin:30px 0}.a-item span,.s-item span{display:inline-block;margin-left:10px;color:#FFF;font-weight:bold;background-color:#2484BC;padding:5px 20px;border-radius:2px;margin-top:5px;cursor:pointer}.a-item span:hover,.s-item span:hover{background-color:#242135}.a-item{margin-bottom:10px;padding:20px;border-radius:5px;border:1px solid #eee;text-align:center}.a-item-title{display:block;width:100%;padding:10px;color:#999;font-size:18px;font-weight:bold;border-bottom:1px solid #EEE}.acc-d .a-item-content{width:100%;height:40px;margin-top:5px;padding:10px;overflow:hidden;white-space:nowrap;resize:none;border-radius:3px;color:#000;line-height:1.5}.s-item{padding:30px;border:1px solid #EEE;margin-bottom:20px}.a-active{background-color:#FFF;color:#242135;border:1px solid #2484BC}textarea.a-item-content.a-active{ display: inline-block; width: 100%; height: 140px; margin: 10px auto; padding: 14px; background: #fff; color: #000; border: 1px solid #000; }input.a-item-title.a-active{ display: inline-block; width: 90%; height: auto; margin: 10px auto; padding: 14px; background: #fff; color: #000; border: 1px solid #000; }
   </style>
   
   

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

   • Html

     بعد توليد الكود من صفحة اداة توليد الاكورديون خذ هذا الكود الذي تم توليده وضعه في منشورك.

   • Css

     انسخ هذا الكود فهو css للإضافة ضعه فوق وسم </head> على مدونتك فهو مهم لتنسيق الإضافة.

     
     
           <style type="text/css">
     .collapsible{color:#333;font-family:sans-serif;cursor:pointer;padding:10px;border-radius:5px;width:100%;border:0;text-align:right;outline:0;font-size:16px;font-weight:600;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
     .collapsible:hover{background-color:#858585;color:#fff}
     .collapsible:after{content:'\002B';color:#000;font-weight:bold;float:left;font-size:20px;margin-right:5px}.active:after{content:"\2212"}
     .content{padding:0 3px;font-family:sans-serif;font-weight:400;max-height:0;margin:5px auto;overflow:hidden;transition:max-height .2s ease-out;background-color:#f1f1f1}
     </style>
     
     

   • Javascript

     انسخ كود Javascript هذا و ضعه فوق وسم </body> على مدونتك

     
               <script>
     var coll = document.getElementsByClassName("collapsible");
     var i;
     for (i = 0; i < coll.length; i++) {
       coll[i].addEventListener("click", function() {
         this.classList.toggle("active");
         var content = this.nextElementSibling;
         if (content.style.maxHeight){
           content.style.maxHeight = null;
         } else {
           content.style.maxHeight = content.scrollHeight + "px";
         } 
       });
     }
     </script>
     

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

شرح كود الكورديون

الهيكل العام:

• الأزرار (Buttons): يتم استخدام عناصر <button> مع الكلاس collapsible لإنشاء عناوين الأكورديون. كل زر يمثل عنوانًا لقسم معين.
• المحتوى (Content): يتم استخدام عناصر <div> مع الكلاس content لوضع المحتوى الذي سيتم عرضه عند النقر على الزر.

التنسيقات (CSS):

• تصميم الأزرار (collapsible):
  • يتم تنسيق الأزرار باستخدام padding، border-radius، box-shadow، وغيرها من الخصائص لجعلها تبدو كأزرار تفاعلية.
  • يتم إضافة رمز + (\002B) باستخدام :after للإشارة إلى أن الزر قابل للتوسيع.
  • عند تحويم الماوس فوق الزر (hover)، يتغير لون الخلفية والنص ليعطي إشارة تفاعلية.
  • عند تفعيل الزر (عند النقر عليه)، يتم تغيير الرمز من + إلى - (\2212) باستخدام الكلاس active.
• تصميم المحتوى (content):
  • يتم إخفاء المحتوى في البداية باستخدام max-height: 0 وoverflow: hidden.
  • عند تفعيل الزر، يتم توسيع المحتوى باستخدام max-height ليعرض المحتوى بالكامل.

الجافاسكريبت (JavaScript):

• الوظيفة الأساسية:
  • يتم استخدام document.getElementsByClassName("collapsible") للحصول على جميع الأزرار التي تحتوي على الكلاس collapsible.
  • يتم إضافة حدث click لكل زر باستخدام addEventListener.
  • عند النقر على الزر:
    • يتم تبديل الكلاس active على الزر لتغيير الرمز من + إلى - والعكس.
    • يتم التحقق من قيمة max-height للعنصر التالي (المحتوى):
      • إذا كانت max-height موجودة (أي المحتوى مفتوح)، يتم إغلاقه عن طريق تعيين max-height إلى null.
      • إذا كانت max-height غير موجودة (أي المحتوى مغلق)، يتم فتحه عن طريق تعيين max-height إلى ارتفاع المحتوى (scrollHeight).

كيفية العمل:

• عند تحميل الصفحة:
  • يتم إخفاء جميع المحتويات (content) باستخدام max-height: 0.
• عند النقر على زر (collapsible):
  • يتم فتح المحتوى المرتبط بهذا الزر عن طريق تعيين max-height إلى ارتفاع المحتوى (scrollHeight).
  • يتم تغيير الرمز من + إلى - للإشارة إلى أن المحتوى مفتوح.
• عند النقر على الزر مرة أخرى:
  • يتم إغلاق المحتوى عن طريق تعيين max-height إلى null.
  • يتم تغيير الرمز من - إلى +.

مثال عملي:

• الزر الأول: "1. إيقاف الإخطارات لجهات اتصال فردية"
  • عند النقر عليه، يتم عرض النص الموجود داخل <div class='content'>.
  • عند النقر عليه مرة أخرى، يتم إخفاء النص.
• الزر الثاني: "2. تغيير أرقام الهاتف"
  • يعمل بنفس الطريقة كالزر الأول.
• بقية الأزرار: تعمل بنفس الطريقة.

تحسينات مقترحة:

• إضافة انتقالات سلسة: يمكن تحسين تجربة المستخدم بإضافة انتقالات سلسة (transitions) لتغيير max-height بشكل تدريجي.
• تخصيص التصميم: يمكن تغيير الألوان والخطوط لتتناسب مع تصميم الموقع.
• دعم الأجهزة المحمولة: التأكد من أن الأكورديون يعمل بشكل جيد على الأجهزة المحمولة.

الاستخدام:

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

ملاحظة:

• الكود يعتمد على JavaScript لعملية التوسيع والطي، لذلك يجب التأكد من تفعيل JavaScript في المتصفح.