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

هي عبارة عن أداة يمكنك اضافتها على مدونتك تقوم بإدخال البيانات مثل العنوان و المحتوى طبعا يمكنك اضافة عدد لا محدود من الاكورديون في الأخير تضغط على زر

   

إضافة Accordion هى نوع من الأزرار عند النقر فوق هذا الزر يظهر المحتوى فيه ومرة أخرى عند النقر فوق الزر يختفي المحتوى.

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

كيف أقوم بهذه العملية

1. انسخ هذا الكود كاملا أذهب الى الصفحات انشئ صفحة جديدة او قديمة لا مشكلة اختر وضع 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. انسخ هذا الكود فهو 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>



3. انسخ كود 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 في مقال ما أذهب الى تلك الصفحة التي انشأتها ثم إملأ مكان العنوان بالعنوان و مكان المحتوى بالمحتوى ثم إضغط على زر إضافة. طبعا اذا اخطأت في كلمة او جملة إضغط على زر تعديل و حفظ عندما تنتهي من اضافة العناوين و المتحوى إضغط على زر توليد الكود هذا الكود فهو html يتم وضعه في التدوينة في آي مكان طبعا.

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

wesam developer

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا