Utilities

1. Collaps
2. Scroll-To
3. Show/Hide

Collaps

By adding the .collapseBlock class to an element, the next element will be hidden automatically and it will be displayed with a collapse animation when the element is clicked. If you want to collapse another element than the next, just add the id of the element to collapse in the data-block attribute of the element on which we click.

fr :: En ajoutant la classe .collapseBlock à un élément, l’élément suivant sera masqué automatiquement et il s’affichera avec une animation de collapse au clic sur l’élément. Si on désire collapser un autre élément que le suivant, il suffit d’ajouter le id de l’élément à collapser dans l’attribut data-block de l’élément sur lequel on clique.

<a class="collapseBlock" ><i class="icon-arrowhead"></i> En savoir plus</a>
<div class="relatedToContent">
  <p>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.</p>
</div>

Scroll-To

broken

Please see working versions on nfb.ca (authorization requierd)

fr :: Il faut ajouter l’attribut data-scrollToAnchor="true" au lien et mettre l’ancre dans l’attribut href du lien.

<a href="#l-generalContainer" data-scrollToAnchor="true" >Retour au haut de la page</a>

Show/Hide

broken

Please see working versions on nfb.ca (authorization requierd)

fr :: Masquer ou afficher un élément au clic (via l’ID de l’élément à afficher ou à masquer) Ajouter le sélecteur de l’élément que vous voulez afficher dans l’attribut data-showElement et le sélecteur de l’élément que vous voulez masquer dans l’attribut data-hideElement. Il est possible de mettre uniquement 1 des 2 attributs si on veut seulement masquer ou afficher quelquechose.

<a href="" id="showAllo" data-showElement="#allo" data-hideElement="#showAllo">Cliquer pour masquer l'élément courant et afficher 'allo'</a>
<div id="allo" class="hidden">Allo</div>

fr :: Vous pouvez masquer l’élément sur lequel on clique en mettant +this dans l’attribut data-hideElement.

<div id="divParent">
  <a href="" class="showAllo" data-showElement="#divParent .allo" data-hideElement="+this" >Cliquer pour masquer l'élément courant et afficher 'allo'</a>
  <div class="hidden allo">Allo</div>
</div>

Table of contents

• Colour Switcher