أداة الاكورديون تعد من الأدوات أو الاضافات التي تزين مدونتك , فقد نراها أحيانا في مواقع الهبوط بحيث تضع كـ أسئلة شائعة , مميزات , الخ...
ففي هذا المقال سوف أشرح لك كيفية تركيبها واستخدامها في مدونتك بالاضافة الأادة تم بنائها ب html و css بدلا من Jquery والتي قد تأثر على سرعة مدونتك .
شرح طريقة التركيب :
أولا ستذهب الى بلوجر ثم المظهر ثم تعديل
.accordian_znthec{padding:0;display:block;margin:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}.accordian_znthec input{display:none}.accordian_znthec label{margin:4px auto;display:block;padding:0 10px;height:50px;overflow:hidden;cursor:pointer}.accordian_znthec label p{background:-o-linear-gradient(42deg,#969cfd,#3d5afe)!important;background:linear-gradient(48deg,#969cfd,#3d5afe)!important;color:#fff;padding:10px;display:block;border-radius:3px;width:100%;height:45px;-webkit-box-shadow:0 2px 4px rgb(0 0 0 / 18%);box-shadow:0 2px 4px rgb(0 0 0 / 18%);font-size:15px;margin:3px!important}.accordian_znthec label p:before{content:'\f07e';font-family:FontAwesome!important;margin-left:5px;vertical-align:-2px}.accordian_znthec label span{color:#000;width:98%;font-size:15px;margin:5px auto;text-align:right;padding:5px;max-height:0;overflow:hidden;display:block;-webkit-transition:all 1s;-o-transition:all 1s;transition:all 1s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:3px}.accordian_znthec input:checked ~ label{height:auto;overflow:hidden}.accordian_znthec input:checked ~ label p:before{content:'\f07d';font-family:FontAwesome!important;margin-left:5px;vertical-align:-2px}.accordian_znthec input:checked ~ label span{max-height:200vh}لون الأداة , قم بالبحث و تغيير هذا اللون linear-gradient(48deg,#969cfd,#3d5afe)
بعدا لصقك للكود السابق قم بعمل
<div class='accordian_znthec'>
<input type='radio' name='tab_zn' id='tab_zn' />
<label for='tab_zn'>
<p>هذا النص هو مثال لنص يمكن أن يستبدل</p>
<span>
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى
</span>
</label>
</div>
<div class='accordian_znthec'>
<input type='radio' name='tab_zn' id='tab_zn1' />
<label for='tab_zn1'>
<p>هذا النص هو مثال لنص يمكن أن يستبدل</p>
<span>
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى
</span>
</label>
</div>
<div class='accordian_znthec'>
<input type='radio' name='tab_zn' id='tab_zn2' />
<label for='tab_zn2'>
<p>هذا النص هو مثال لنص يمكن أن يستبدل</p>
<span>
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى
</span>
</label>
</div>
بعد تركيبك للأكواد السابقة ستلاحظ كل <input id='tab_zn1' /> و <label for='tab_zn1'> بمعنى كل
لاضافة أكورديون جديدة :
<input type='radio' name='tab_zn' id='tab_zn' />
<label for='tab_zn'>
<p>هذا النص هو مثال لنص يمكن أن يستبدل</p>
<span>
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى
</span>
</label>
</div>
