W3.CSS Akordeonları
Akordeonların nasıl çalıştığını görmek için aşağıdaki "Bölümü Aç" düğmelerine tıklayın:
Ağrının kendisi önemlidir, ancak ağrı, yağlanma süreciyle artar, ancak onu kesmesi için zaman veriyorum, böylece harika işler ve acı çekeyim. Asgari düzeye gelmek amacıyla, sonuçlarından yararlanmak dışında hangimiz herhangi bir istihdam yapmalıdır.
Resimlerle Akordeon:
Fransız Alpleri
Akordeon
HTML içeriğini göstermek (ve gizlemek) için bir akordeon kullanılır.
Akordeon içeriğini gizlemek için w3-hide sınıfını kullanın.
İçeriği açmak ve kapatmak için herhangi bir düğmeyi kullanın:
Örnek
<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>
Hem akordeonu açmak için kullanılan öğe hem de akordeonun içeriği herhangi bir HTML öğesi olabilir.
Akordeon ve Açılan Menü
Bu tablo, bir akordeon ve bir açılır liste arasındaki farkı gösterir:
| Akordeon | Yıkılmak |
|---|---|
| İçerik, sayfa içeriğini aşağı iter | İçerik, mevcut sayfa içeriğinin üzerine yerleştirilir |
| İçerik genellikle %100 geniştir | İçerik 160 piksel genişliğindedir (varsayılan) |
| Genellikle birden çok bölümü açmak için kullanılır | Genellikle bir bölümü açmak için kullanılır |
akordeonlar
Ağrının kendisi önemlidir, ancak ağrı, yağlanma süreciyle artar, ancak onu kesmesi için zaman veriyorum, böylece harika işler ve acı çekeyim. Asgari düzeye gelmek amacıyla, sonuçlarından yararlanmak dışında hangimiz herhangi bir istihdam yapmalıdır.
açılır menüler
Akordeon Düğmeler
Akordeon içeriğini açmak için herhangi bir HTML öğesini kullanabilirsiniz. Sayfanın tüm genişliğini (%100 genişlik) yaymak için w3-block sınıfına sahip bir düğmeyi tercih ediyoruz .
W3.CSS'deki düğmelerin varsayılan olarak ortalandığını unutmayın. Bunun yerine sola hizalanmalarını istiyorsanız w3-left-align sınıfını kullanın . Ancak, bizim yaklaşımımızı takip etmek zorunda değilsiniz - bir akordeon her iki şekilde de iyi görünecek:
Lorem Ipsum...
Lorem Ipsum...
Ayrıca ortalanmış içerik!
Örnek
<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>
Aktif Akordeon Düğmeleri
Açık olan (tıklanan) akordeonları vurgulamak için JavaScript'i kullanın:
Bazı metin..
Başka bir metin..
Örnek
// 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", "");
}
Akordeon Genişliği
Varsayılan olarak, bloğun genişliği %100'dür. Bunu geçersiz kılmak için akordeon kabının CSS genişlik özelliğini değiştirin:
Bazı metin..
Bazı metin..
Bazı metin..
Bazı metin..
Örnek
<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>
Akordeon İçeriği
Bağlantıları olan akordeon:
Örnek
<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>
Liste Olarak Akordeon:
- Jill
- Havva
- Adem
Örnek
<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>
Kenar Çubuğu içinde akordeon (Daha sonra kenar çubukları hakkında daha fazla bilgi edineceksiniz):
Örnek
<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>
Hareketli Akordeonlar
Akordeon içeriğini soldurmak, yakınlaştırmak veya kaydırmak için w3-animate- sınıflarından herhangi birini kullanın:
Örnek
<div id="Demo1" class="w3-hide
w3-animate-zoom">