Testé fonctionnel UIkit v3.6.19. Documentation officielle.
L’astuce consiste à initialiser le composant toggle d’UIkit sur une classe (.is-toggle dans mon exemple) relative à un ID (#filter---CustomizationTechniques dans mon exemple) placé dans le DOM sur un élément parent/englobant:
|
1 2 3 4 5 6 7 8 9 10 |
<div id="filter---CustomizationTechniques" class="uk-form-controls"> [...] <div class="is-toggle" hidden> [...] </div> <a class="" href="#" uk-toggle="target: #filter---CustomizationTechniques .is-toggle"> <span class="is-toggle">Voir plus</span> <span class="is-toggle" hidden>Voir moins</span> </a> </div> |
Code complet:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="uk-margin"> <div class="uk-form-label">Technique de personnalisation</div> <div id="filter---CustomizationTechniques" class="uk-form-controls"> <label><input class="uk-checkbox" type="checkbox"> Tampographie</label><br> <label><input class="uk-checkbox" type="checkbox"> Sérigraphie</label><br> <label><input class="uk-checkbox" type="checkbox"> Transfert sérigraphique</label><br> <label><input class="uk-checkbox" type="checkbox"> Transfert numérique</label><br> <label><input class="uk-checkbox" type="checkbox"> Impression numérique directe</label><br> <div class="is-toggle" hidden> <label><input class="uk-checkbox" type="checkbox"> Broderie</label><br> <label><input class="uk-checkbox" type="checkbox"> Ecussons brodés</label><br> <label><input class="uk-checkbox" type="checkbox"> Sublimation</label><br> <label><input class="uk-checkbox" type="checkbox"> Gravure laser</label><br> <label><input class="uk-checkbox" type="checkbox"> Doming</label><br> <label><input class="uk-checkbox" type="checkbox"> Autocollants</label><br> <label><input class="uk-checkbox" type="checkbox"> Laser sur polaire et microfibre</label> </div> <a class="" href="#" uk-toggle="target: #filter---CustomizationTechniques .is-toggle"> <span class="is-toggle">Voir plus</span> <span class="is-toggle" hidden>Voir moins</span> </a> </div> </div> |