أحدث البرامج التعليمية وتطوير الشبكة
 

W3.CSS الأكورديون

❮ السابق التالي الفصل ❯

أكورديون

يستخدم الاكورديون لعرض (وإخفاء) المحتوى الذي يتم تقسيمها إلى أقسام.

انقر على أزرار "فتح الباب" أدناه لمعرفة كيف يعمل:

أبجد هوز دولور الجلوس امات، consectetur adipisicing إيليت، حوار لا tempor eiusmod التحرير incididunt labore آخرون غير مؤلمة ماجنا aliqua. التحرير ENIM إعلان قطرة veniam، quis nostrud exercitation ullamco رقة العمل احترازيا التحرير aliquip السابق عصام commodo consequat.

رابط 1 رابط 2 رابط 3

الأكورديون مع الصور:

Trolltunga، النرويج

وتعرف الطبقة W3-الأكورديون الأكورديون، والطبقة W3-الأكورديون المحتوى تحدد جزئيا إلى ظهور:

مثال

<div class="w3-accordion w3-light-grey">
  <button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align">
    Open Section 1
  </button>
  <div id="Demo1" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
  <button onclick="myFunction('Demo2')" class="w3-btn-block w3-left-align">
    Open Section 2
  </button>
  <div id="Demo2" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
</div>

<script>
function myFunction(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else {
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>

انها محاولة لنفسك »

كل من العنصر الذي يستخدم لفتح الأكورديون والمحتوى الأكورديون يمكن أن يكون أي عنصر HTML.

الأكورديون مقابل منسدلة

وتبين القائمة أدناه الفرق بين الأكورديون والمنسدلة:

الأكورديون

رابط 1 رابط 2 رابط 3

أبجد هوز دولور الجلوس امات، consectetur adipisicing إيليت، حوار لا tempor eiusmod التحرير incididunt labore آخرون غير مؤلمة ماجنا aliqua. التحرير ENIM إعلان قطرة veniam، quis nostrud exercitation ullamco رقة العمل احترازيا التحرير aliquip السابق عصام commodo consequat.


  • محتوى واسع 100٪ (تمتد على كامل عرض العنصر الأصلي)
  • عندما فتحت، فإنه يدفع محتوى الصفحة لأسفل، إن وجدت (موقع: نسبي)
  • غالبا ما تستخدم ل"فتح" أقسام متعددة

القوائم المنسدلة

رابط 1 رابط 2 رابط 3
  • المحتوى هو الحد الأدنى 160px واسعة وأكثر إذا لزم الأمر
  • عندما فتحت، فإنه يضع على محتوى الصفحة (الموقف: المطلق)
  • غالبا ما تستخدم لمقطع واحد "فتح"

أزرار الأكورديون

يمكنك استخدام أي عنصر HTML لفتح المحتوى الأكورديون. نحن نفضل زر مع فئة BTN W3-كتلة، لأنها تمتد على كامل عرض العنصر الأم، تماما مثل محتوى الأكورديون (عرض 100٪). تذكر أن تتركز أزرار في W3.CSS افتراضيا. استخدام فئة W3-اليسار محاذاة إذا كنت تريد لهم ترك الانحياز بدلا من ذلك. ومع ذلك، لم يكن لديك لمتابعة نهجنا - سوف الأكورديون تبدو جيدة في كلتا الحالتين:

أبجد هوز ...

أبجد هوز ...

تركزت محتوى كذلك!

مثال

<div class="w3-accordion w3-light-grey">
  <button onclick="myFunc('Demo1')" class="w3-btn">
    Normal button
  </button>
  <div id="Demo1" class="w3-accordion-content">
    <p>Lorem ipsum...</p>
  </div>
  <button onclick="myFunc('Demo2')" class="w3-btn-block w3-left-align w3-green">
    Left aligned & full-width
  </button>
  <div id="Demo2" class="w3-accordion-content">
    <p>Lorem ipsum...</p>
  </div>
  <button onclick="myFunc('Demo3')" class="w3-btn-block w3-red">
  Centered & full-width
  </button>
  <div id="Demo3" class="w3-accordion-content w3-center">
    <p>Centered content as well!</p>
  </div>
</div>

انها محاولة لنفسك »

أزرار الأكورديون النشطة

استخدام جافا سكريبت لتسليط الضوء على الأكورديون أن تكون مفتوحة (النقر على):

بعض النصوص ..

بعض النصوص الأخرى ..

مثال

// Add the w3-red class to all opened accordions
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
  x.className += " w3-show";
  x.previousElementSibling.className += " w3-red";
} else {
  x.className = x.className.replace("w3-show", "");
  x.previousElementSibling.className =
  x.previousElementSibling.className.replace("w3-red", "");
}

انها محاولة لنفسك »

الأكورديون العرض

افتراضيا، عرض الأكورديون هو 100٪. لتجاوز هذا تغيير خاصية عرض CSS الحاوية W3-الأكورديون:

بعض النصوص ..

بعض النصوص ..

بعض النصوص ..

بعض النصوص ..

مثال

<div class="w3-accordion w3-light-grey" style="width:50%">
  <button onclick="myFunction('Demo1')" class="w3-btn-block">
    50%
  </button>
  <div id="Demo1" class="w3-accordion-content">
    <p>Some text..</p>
  </div>
</div>

انها محاولة لنفسك »

الأكورديون المحتوى

الأكورديون مع الروابط:
رابط 1 رابط 2 رابط 3

مثال

<div class="w3-accordion w3-light-grey">
  <button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align">
    Accordion
  </button>
  <div id="Demo1" class="w3-accordion-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

انها محاولة لنفسك »

الأكورديون بمثابة بطاقة مع القوائم:
  • جيل
  • حواء
  • آدم

مثال

<div class="w3-accordion w3-card-4">
  <button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align">
    Accordion
  </button>
  <div id="Demo1" class="w3-accordion-content">
    <ul class="w3-ul">
      <li>Jill</li>
      <li>Eve</li>
      <li>Adam</li>
    </ul>
  </div>
</div>

انها محاولة لنفسك »

الأكورديون داخل Sidenav(ملاحظة: سوف تتعلم المزيد عن تنقلات الجانب في وقت لاحق):

مثال

<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:200px;">
  <a href="#">Link</a>
  <div class="w3-accordion">
    <a onclick="myAccFunc()" href="#">Accordion</a>
    <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <div class="w3-dropdown-click">
    <a onclick="myDropFunc()" href="#">Dropdown</a>
    <div id="demoDrop" class="w3-dropdown-content w3-white w3-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <a href="#">Link</a>
  <a href="#">Link</a>
</nav>

انها محاولة لنفسك »

الأكورديون المتحركة

استخدام أي من الفئات W3-animate- لتتلاشى، والتكبير أو الشريحة في محتوى الأكورديون:

رابط 1 رابط 2 رابط 3

مثال

<div id="Demo1" class="w3-accordion-content w3-animate-zoom">

انها محاولة لنفسك »


❮ السابق التالي الفصل ❯