W3.CSS akkordeonlar
Oddiy akkordeon
Akkordeonlar kontent bo‘limlarini ko‘rsatadi va yashiradi.
Ular ko‘p ma’lumotni kichik joyda tartibli joylashtirish kerak bo‘lganda qulay.
Akkordeon kontentini ochish va yopish uchun tugmadan foydalaning.
w3-hide klassi kontentni yashiradi.
JavaScript w3-show klassini qo‘shadi yoki olib tashlaydi:
Some text...
Misol
<button onclick="myFunction('Demo1')" class="w3-button w3-block">
Open the Section
</button>
<div id="Demo1" class="w3-container w3-hide">
<p>Some text...</p>
</div>
<script>
function myFunction(id) {
document.getElementById(id).classList.toggle("w3-show");
}
</script>
Akkordeon va dropdown
Akkordeonlar ham, dropdown’lar ham yashirin kontentni ko‘rsatadi, lekin ular turlicha ishlaydi:
| Akkordeon | Dropdown |
|---|---|
| Kontent sahifaning bir qismiga aylanadi | Kontent sahifa ustida paydo bo‘ladi |
| Ko‘pincha mavjud kenglikni to‘liq egallaydi | Ko‘pincha kichikroq menyu sifatida paydo bo‘ladi |
| Kontent bo‘limlari uchun qulay | Menyular va tanlovlar uchun qulay |
Akkordeon tugmalari
Akkordeon tugmalari ko‘pincha w3-block yordamida ota elementining butun kengligini (100% kenglik) egallaydigan qilib sozlanadi.
Tugma matnini chapga tekislash uchun w3-left-align klassidan foydalaning:
Some text...
Misol
<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align w3-green">
Open Section
</button>
<div id="Demo1" class="w3-hide w3-container">
<p>Some text...</p>
</div>
Akkordeon kontenti
Akkordeon kontenti havolalar, tugmalar, rasmlar, ro‘yxatlar yoki istalgan boshqa HTML kontentini o‘z ichiga olishi mumkin.
Misol
<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">Menu</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>
Faol akkordeon tugmalari
Akkordeon ochiq bo‘lganda tugma uslubini o‘zgartirishingiz mumkin:
Some text...
Misol
function myFunction(button, id) {
const element = document.getElementById(id);
element.classList.toggle("w3-show");
button.classList.toggle("w3-black");
button.classList.toggle("w3-red");
}
Akkordeon kengligi
Standart holatda blok kengligi 100% bo‘ladi. Buni o‘zgartirish uchun akkordeon konteynerining CSS width xususiyatini o‘zgartiring:
Some text..
Some text..
Some text..
Some text..
Misol
<div class="w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')" class="w3-button w3-block">
50%
</button>
<div id="Demo1" class="w3-hide">
<p>Some text..</p>
</div>
</div>
Ro‘yxatli akkordeon
- Jill
- Eve
- Adam
Misol
<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>
Yon paneldagi akkordeon
Akkordeonlarni yon panellar ichida ham ishlatish mumkin (yon panellar haqida keyinroq batafsil bilib olasiz).
Animatsiyali akkordeonlar
Akkordeon kontentini asta paydo qilish (fade), kattalashtirish (zoom) yoki siljitib chiqarish (slide) uchun istalgan w3-animate klassidan foydalaning:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!