اسلایدر اكوردئون واکنشگرا

کلاسهای آکاردئون در W3.CSS

W3.CSS کلاس های آکاردئون زیر را فراهم کرده است:

کلاس	تعریف
w3-accordion	یک آکاردئون ،برای مخفی کردن یا نمایش داده محتوای از قبل تعریف شده استفاده می شود.
w3-accordion-content	محتوایی که در یک آکاردئون نمایش داده میشود.

آکاردئون

یک آکاردئون برای نمایش(مخفی کردن)محتوا که به قسمتهای مختلف شکسته میشود،استفاده می شود.

کلاس w3-accordion یک آکاردئون تعریف می کند، و کلاس w3-accordion-content محتوایی که قرار است نمایش داده شود را تعریف میکند:

مثال

<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 میتوانند باشند.

منوهای کشویی و آکاردئون ها

لیست زیر تفاوت های منوی کشویی و آکاردئون را نمایش میدهد:

آکاردئون ها

محتوا 100% پهنا دارد(کل عرض عنصر والد را در برمیگیرد.)
زمانی که آن را باز میکنیم ،محتوای صفحه پایین میرود (position:relative)
اغلب برای بازکردن قسمت های مختلف استفاده میشود.

منوهای کشویی

محتوا حداقل 160px ودر صورت لزوم بیشتر عرض دارد.
زمانی که ما آن را باز میکنید ،آن روی عناصر دیگر صفحه قرار میگیرد (position:absolute)
معمولا برای باز کردن یک قسمت استفاده میشود.

دکمه های آکاردئون

شما میتوانید از عنصر HTML برای بازکردن محتوای آکاردئون استفاده کنید.ما یک دکمه با کلاس w3-btn-block را ترجیح میدهیم.زیرا آن کل عرض عنصر والد را مانند محتوای آکاردئون دربرمیگیرد.به یادداشته باشید که دکمه ها درW3.CSS به صورت پیش فرض وسط چین هستند. با استفاده از کلاس w3-left-align میتوانیدآن را چپ چین کنید. اگرچه شما مجبور نیستید روش ما را انتخاب کنید(در هر صورت یک آکاردئون خوب به نظر میرسد)

مثال

<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>

خودتان امتحان کنيد »

دکمه های فعال آکاردئون

از JavaScript برای روشنتر کردن رنگ آکاردئون های باز شده (کلیک شده) ،استفاده میشود:

مثال

// 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% است. برای تغییراین مقدار ،مقدار خصوصیت width در css مربوط به container کلاس w3-accordion راعوض کنید:

مثال

خودتان امتحان کنيد »

محتوای آکاردئون

مثال

<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>

خودتان امتحان کنيد »

آکاردئون های درون یک منوی کناری (نکته :شما در مورد منوهای کناری بعدا بیشتر می آموزید)

مثال

<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>

خودتان امتحان کنيد »