W3.CSS Trekklaviere
Klik op die "Open Section"-knoppies hieronder om te sien hoe trekklaviere werk:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion with Images:
French Alps
Trekklavier
'n Trekklavier word gebruik om HTML-inhoud te wys (en te versteek).
Gebruik die w3-hide- klas om die trekklavierinhoud te versteek.
Gebruik enige soort knoppie om die inhoud oop en toe te maak:
Voorbeeld
<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>
Beide die element wat gebruik word om die trekklavier oop te maak en die trekklavier se inhoud kan enige HTML-element wees.
Trekklavier vs. Dropdown
Hierdie tabel toon die verskil tussen 'n trekklavier en 'n aftreklys:
| Trekklavier | Aftreklys |
|---|---|
| Inhoud druk die bladsy-inhoud af | Inhoud lê oor bestaande bladsy-inhoud |
| Inhoud is dikwels 100% wyd | Inhoud is 160 px breed (verstek) |
| Dikwels gebruik om verskeie afdelings oop te maak | Dikwels gebruik om een afdeling oop te maak |
Trekklaviere
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Aftrekkies
Trekklavier-knoppies
Jy kan enige HTML-element gebruik om die trekklavier-inhoud oop te maak. Ons verkies 'n knoppie met 'n w3-blokklas , om oor die hele breedte van die bladsy te strek (100% breedte).
Onthou dat knoppies in W3.CSS by verstek gesentreer is. Gebruik die w3-left-align- klas as jy hulle eerder links-belyn wil hê. Jy hoef egter nie ons benadering te volg nie – ’n trekklavier sal in elk geval goed lyk:
Lorem ipsum...
Lorem ipsum...
Centered content as well!
Voorbeeld
<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>
Aktiewe trekklavierknoppies
Gebruik JavaScript om trekklaviere uit te lig wat oop is (geklik):
Some text..
Some other text..
Voorbeeld
// 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", "");
}
Trekklavier Breedte
By verstek is die breedte van die blok 100%. Om dit te ignoreer, verander die CSS-wydte-eienskap van die trekklavierhouer:
Some text..
Some text..
Some text..
Some text..
Voorbeeld
<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>
Trekklavier inhoud
Trekklavier met skakels:
Voorbeeld
<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>
Trekklavier as 'n lys:
- Jill
- Eva
- Adam
Voorbeeld
<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>
Trekklavier in 'n sybalk (Jy sal later meer oor sybalke leer):
Voorbeeld
<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>
Geanimeerde trekklaviere
Gebruik enige van die w3-animate- klasse om die trekklavierinhoud te vervaag, in te zoem of in te skuif:
Voorbeeld
<div id="Demo1" class="w3-hide
w3-animate-zoom">