Acordeon
Un acordeon este folosit pentru a arăta (and hide) , conținut care este rupt în secțiuni.
Faceți clic pe "Open Section" butoanele de mai jos pentru a vedea cum funcționează:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do TEMPOR eiusmod ut incididunt Labore et dolore magna aliqua. Ut enim anunț veniam minim, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Acordeon cu imagini:
Trolltunga, Norvegia
Clasa W3-acordeon definește un acordeon, iar clasa W3-acordeon-conținut definește partea care urmează să fie afișate:
Exemplu
<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>Atât elementul care este folosit pentru a deschide acordeonul și conținutul acordeonul poate fi orice element HTML.
Acordeon vs. Dropdown
Lista de mai jos arată diferența dintre un acordeon și un drop-down:
acordeoane
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do TEMPOR eiusmod ut incididunt Labore et dolore magna aliqua. Ut enim anunț veniam minim, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Conținutul este 100% larg (spans the entire width of the parent element) se (spans the entire width of the parent element)
- Când a deschis, acesta împinge în jos conținutul paginii, dacă este cazul (position:relative)
- Adesea folosit pentru a "open" mai multe secțiuni
Butoane Acordeon
Puteți utiliza orice element HTML pentru a deschide conținutul acordeon. Noi preferăm un buton cu o clasă de BTN-W3-bloc, deoarece se întinde pe întreaga lățime a elementului său părinte, la fel ca și conținutul de acordeon (100% width) . Amintiți-vă că butoanele din W3.CSS sunt centrate în mod implicit. Utilizați clasa W3-stânga-align dacă doriți să le aliniat la stânga în loc. Cu toate acestea, nu trebuie să urmeze abordarea noastră - un acordeon va arata bine, fie un fel:
Lorem ipsum ...
Lorem ipsum ...
Centrat de conținut, de asemenea!
Exemplu
<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>Butoane Acordeon active
Utilizați JavaScript pentru a evidenția acordeoane care sunt deschise (clicked on) :
Unele text ..
Alt text ..
Exemplu
// 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", "");
}Acordeon Lățime
Implicit, lățimea unui acordeon este de 100%. Pentru a trece peste acest lucru, modificați proprietatea CSS lățimea containerului W3-acordeon:
Unele text ..
Unele text ..
Unele text ..
Unele text ..
Exemplu
<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>Acordeon Conținut
Acordeon cu link-uri:
Exemplu
<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>Acordeon ca un card cu liste:
- Jill
- ajun
- Adam
Exemplu
<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>Acordeon în interiorul unui Sidenav ( Note: you will learn more about side navigations later) :
Exemplu
<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>animate Acordeoane
Utilizați oricare dintre clasele W3-animate- să se estompeze, mări sau diapozitiv în conținutul acordeon: