أكورديون W3.CSS

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Link 1 Link 2 Link 3

Accordion with Images:

French Alps

الأكورديون

يتم استخدام الأكورديون لإظهار (وإخفاء) محتوى HTML.

استخدم فئة إخفاء w3 لإخفاء محتوى الأكورديون.

استخدم أي نوع من الأزرار لفتح وإغلاق المحتوى:

مثال

<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">
Open Section 1</button>

<div id="Demo1" class="w3-container w3-hide">
<p>Some text..</p>
</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.

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

يوضح هذا الجدول الفرق بين الأكورديون والقائمة المنسدلة:

الأكورديون	اسقاط
المحتوى يدفع محتوى الصفحة لأسفل	يكمن المحتوى على محتوى الصفحة الموجود
غالبًا ما يكون المحتوى عريضًا بنسبة 100٪	عرض المحتوى 160 بكسل (افتراضي)
كثيرا ما تستخدم لفتح أقسام متعددة	كثيرا ما تستخدم لفتح قسم واحد

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

Link 1 Link 2 Link 3

هبوط قطرة

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

يمكنك استخدام أي عنصر HTML لفتح محتوى الأكورديون. نحن نفضل زرًا به فئة w3-block لتمتد بعرض الصفحة بالكامل (عرض 100٪).

تذكر أن الأزرار في W3.CSS تتم توسيطها افتراضيًا. استخدم فئة w3-left-align إذا كنت تريد محاذاة إلى اليسار بدلاً من ذلك. ومع ذلك ، لا يتعين عليك اتباع نهجنا - سيبدو الأكورديون جيدًا في كلتا الحالتين:

Lorem ipsum...

Centered content as well!

مثال

<button onclick="myFunc('Demo1')" class="w3-button">
Normal button</button>

<div id="Demo1" class="w3-hide">
<p>Lorem ipsum...</p>
</div>

<button onclick="myFunc('Demo2')" class="w3-button w3-block w3-left-align w3-green">
Left aligned and full-width</button>

<div id="Demo2" class="w3-hide">
<p>Lorem ipsum...</p>
</div>

<button onclick="myFunc('Demo3')" class="w3-btn w3-block w3-red">
Centered and full-width</button>

<div id="Demo3" class="w3-hide w3-center">
<p>Centered content as well!</p>
</div>

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

استخدم JavaScript لتمييز الأكورديونات المفتوحة (تم النقر عليها):

Some text..

Some other text..

مثال

// 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 لحاوية الأكورديون:

Some text..

مثال

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

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

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

مثال

<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">
Accordion</button>

<div id="Demo1" class="w3-hide">
<a href="#" class="w3-button w3-block w3-left-align">Link 1</a>
<a href="#" class="w3-button w3-block w3-left-align">Link 2</a>
<a href="#" class="w3-button w3-block w3-left-align">Link 3</a>
</div>

الأكورديون كقائمة:

جيل
حواء
آدم

مثال

<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">
Accordion</button>

<div id="Demo1" class="w3-hide">
<ul class="w3-ul">
    <li>Jill</li>
    <li>Eve</li>
    <li>Adam</li>
</ul>
</div>

الأكورديون داخل الشريط الجانبي (سوف تتعلم المزيد عن الأكورديون لاحقًا):

مثال

<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:200px;">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button" onclick="myAccFunc()">Accordion</a>
<div id="demoAcc" class="w3-hide">
    <a href="#" class="w3-bar-item w3-button">Link</a>
    <a href="#" class="w3-bar-item w3-button">Link</a>
</div>
<div class="w3-dropdown-click">
    <a href="#" class="w3-bar-item w3-button" onclick="myDropFunc()">Dropdown</a>
    <div id="demoDrop" class="w3-dropdown-content">
      <a href="#" class="w3-bar-item w3-button">Link</a>
      <a href="#" class="w3-bar-item w3-button">Link</a>
    </div>
</div>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

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

استخدم أيًا من فئات w3-animate- للتلاشي أو التكبير والتصغير أو الانزلاق في محتوى الأكورديون:

Link 1 Link 2 Link 3

مثال

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

W3.CSS

ألوان W3.CSS

بناء الويب

أمثلة

مراجع

أكورديون W3.CSS

الأكورديون

مثال

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

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

هبوط قطرة

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

مثال

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

مثال

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

مثال

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

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

مثال

الأكورديون كقائمة:

مثال

الأكورديون داخل الشريط الجانبي (سوف تتعلم المزيد عن الأكورديون لاحقًا):

مثال

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

مثال