Help: Accordions: verschil tussen versies
Uit MediaWikiGids
k |
|||
| (Een tussenliggende versie door dezelfde gebruiker niet weergegeven) | |||
| Regel 4: | Regel 4: | ||
Je kunt met ingekorte code accordions creëren: | Je kunt met ingekorte code accordions creëren: | ||
| + | PS: Eigenlijk is het correcte Nederlandse woord: accordeon, maar dat werkt verwarrening in de hand met de engelse codes. | ||
==== Markup==== | ==== Markup==== | ||
<nowiki><div class="panel-group" id="accordion"></nowiki> | <nowiki><div class="panel-group" id="accordion"></nowiki> | ||
| − | <nowiki><accordion parent="accordion" heading=" | + | <nowiki><accordion parent="accordion" heading="SECTIE1"></nowiki> |
<nowiki>Lorem ipsum...</nowiki> | <nowiki>Lorem ipsum...</nowiki> | ||
<nowiki></accordion></nowiki> | <nowiki></accordion></nowiki> | ||
| − | <nowiki><accordion parent="accordion" heading=" | + | <nowiki><accordion parent="accordion" heading="SECTIE2"></nowiki> |
<nowiki>Lorem ipsum...</nowiki> | <nowiki>Lorem ipsum...</nowiki> | ||
<nowiki></accordion></nowiki> | <nowiki></accordion></nowiki> | ||
| Regel 18: | Regel 19: | ||
| − | ==== | + | ====Resultaat==== |
<div class="panel-group" id="accordion"> | <div class="panel-group" id="accordion"> | ||
| − | <accordion parent="accordion" heading=" | + | <accordion parent="accordion" heading="SECTIE1">Lorem ipsum...</accordion> |
| − | <accordion parent="accordion" heading=" | + | <accordion parent="accordion" heading="SECTIE2">Lorem ipsum...</accordion> |
</div> | </div> | ||
| Regel 34: | Regel 35: | ||
<div class="panel-heading"> | <div class="panel-heading"> | ||
<h4 class="panel-title"> | <h4 class="panel-title"> | ||
| − | <a href="#accordion1" data-parent="#accordion" data-toggle=" | + | <a href="#accordion1" data-parent="#accordion" data-toggle="samenvouwen"> |
SECTION1 | SECTION1 | ||
</a> | </a> | ||
| Regel 48: | Regel 49: | ||
<div class="panel-heading"> | <div class="panel-heading"> | ||
<h4 class="panel-title"> | <h4 class="panel-title"> | ||
| − | <a href="#accordion2" data-parent="#accordion" data-toggle=" | + | <a href="#accordion2" data-parent="#accordion" data-toggle="samenvouwen"> |
| − | + | SECTIE2 | |
</a> | </a> | ||
</h4> | </h4> | ||
Huidige versie van 20 mrt 2017 om 18:27
Standaard Accordions
Je kunt met ingekorte code accordions creëren: PS: Eigenlijk is het correcte Nederlandse woord: accordeon, maar dat werkt verwarrening in de hand met de engelse codes.
Markup
<div class="panel-group" id="accordion"> <accordion parent="accordion" heading="SECTIE1"> Lorem ipsum... </accordion> <accordion parent="accordion" heading="SECTIE2"> Lorem ipsum... </accordion> </div>
Resultaat
HTML
<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#accordion1" data-parent="#accordion" data-toggle="samenvouwen">
SECTION1
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="accordion1">
<div class="panel-body">
Lorem ipsum...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#accordion2" data-parent="#accordion" data-toggle="samenvouwen">
SECTIE2
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="accordion2">
<div class="panel-body">
Lorem ipsum...
</div>
</div>
</div>
</div>