Akordeon
Bir akordeon göstermek için kullanılır (and hide) bölümlere ayrılmıştır içeriği.
Tıklayın "Open Section" nasıl çalıştığını görmek için aşağıdaki düğmeleri:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod incididunt ut tempor do sed Labore et dolore magna aliqua. Ut enim reklam damla veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Görüntüler ile Akordeon:
Trolltunga, Norveç
W3-akordeon sınıfı, bir akordeon tanımlar ve w3-akordiyon içerik sınıfı görüntülenecek parçası tanımlar:
Örnek
<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>Hem akordeon ve akordeonun içeriğini açmak için kullanılan eleman herhangi bir HTML öğesi olabilir.
Dropdown vs Akordeon
Aşağıdaki liste, bir akordeon ve açılır arasındaki farkı gösterir:
Akordeonlar
Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod incididunt ut tempor do sed Labore et dolore magna aliqua. Ut enim reklam damla veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- İçerik% 100 genişliğinde (spans the entire width of the parent element)
- Açılınca, o sayfa içeriğini aşağı iter varsa (position:relative)
- Genellikle kullanılan "open" çoklu bölümleri
Açılır menülerde
- Gerekirse İçerik 160px asgari geniş ve daha fazlası
- Açılınca, o sayfa içeriğinin üzerine bırakır (position:absolute)
- Genellikle kullanılan "open" bir bölüm
akordeon Düğmeler
Sen akordeon içeriği açmak için herhangi bir HTML öğesi kullanabilirsiniz. Sadece akordeon içerik gibi, üst elemanın tüm genişliği boyunca, çünkü bir w3-btn blok sınıfı ile bir düğme tercih (100% width) . W3.CSS düğmeleri varsayılan olarak ortalanır unutmayın. Onları yerine sola hizalı isterseniz w3-sol-align sınıfını kullanın. Ancak, bizim yaklaşımı takip etmek gerekmez - akordeon iyi her iki şekilde görünecektir:
ipsum Lorem ...
ipsum Lorem ...
hem içerik Merkezli!
Örnek
<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>Aktif Akordeon Düğmeler
Açık olan akordeon vurgulamak için JavaScript kullanın (clicked on) :
Bazı metin ..
Diğer bazı 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, bir akordeon genişliği 100%. Bu geçersiz kılmak için, w3-akordeon kabının CSS genişliği özelliğini değiştirmek:
Bazı metin ..
Bazı metin ..
Bazı metin ..
Bazı metin ..
Örnek
<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>akordeon İçerik
bağlantıları ile Akordeon:
Örnek
<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>listeleri sayesinde Kart olarak Akordeon:
- Jill
- Havva
- Adem
Örnek
<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>Bir Sidenav içindeki Akordeon ( Note: you will learn more about side navigations later) :
Örnek
<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>Hareketli Akordeonlar
Akordeon içeriğinde, zoom veya slayt solmaya w3-animate- sınıfların herhangi birini kullanın: