Depuis quelques temps, je fais la chasse aux frameworks Javascript inutiles. Par exemple, je m’interdis d’utiliser jQuery. En effet, il est généralement possible d’écrire du code équivalent avec l’API ECMAScript standard. C’est ce que certains appellent du Vanilla JS.

Sommaire

Introduction

Dernièrement, j’ai dû implémenter une fonctionnalité qui permettait d’afficher ou cacher des informations via un toggle button. L’idée est d’avoir un petit « (+) » cliquable en plein milieu d’un texte qui sur un clic affiche plus de détail. Ce détail peut être à nouveau masqué en cliquant sur un « -« . Ceci est plutôt simple à implémenter en Javascript (même sans framework).

Mais pourquoi utiliser du Javascript quand du CSS suffit ?

Solution

Pour cela, il faut utiliser une checkbox qui fera office de toggle button, personnaliser son affichage avec un label et enfin gérer l’affichage du détail avec des sélecteurs CSS de voisins généraux.

Patron HTML

<p>
  Première partie du texte toujours visible.
  <input type="checkbox" id="see-more-1" class="seemore">
  <label for="see-more-1" class="seemore"></label>
  <span class="hide">Détail masqué et affichable</span>
  Seconde partie du texte toujours visible.
</p>

Sélecteur CSS

/* par défaut, le détail est masqué */
span.hide { display: none; }

/* personnalisation du label */
label.seemore::before { content: "(+)"; }
label.seemore:hover { cursor: pointer; }

/* la checkbox est cachée en la déplaçant hors de l'écran pour ne pas être interprétée par les lecteurs */
input[type='checkbox'].seemore {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* quand la checkbox est cochée, le détail est rendu visible et on le termine par une parenthèse fermante */
input.seemore:checked~span.hide { display: inline; }
input.seemore:checked~span.hide::after { content: ")"; }

/* quand la checkbox est cochée, le "+" devient un "-" */
input.seemore:checked~label.seemore::before { content: "(- : "; }

Et rien de plus !

Démo

Conclusion

Comme souvent, il est préférable de connaitre les fondamentaux avant de se lancer dans des développements complexes. Ici, nous voyons qu’en connaissant quelques utilisations à peine avancées des sélecteurs CSS, nous nous épargnions l’intégration d’un framework ou le développement d’un composant. Soit un gain en performance et en maintenance !

https://blog.lecacheur.com/wp-content/uploads/2019/09/CSS3_logo_and_wordmark.svg_.pnghttps://blog.lecacheur.com/wp-content/uploads/2019/09/CSS3_logo_and_wordmark.svg_-150x150.pngSeBDéveloppementcss,javascriptDepuis quelques temps, je fais la chasse aux frameworks Javascript inutiles. Par exemple, je m'interdis d'utiliser jQuery. En effet, il est généralement possible d'écrire du code équivalent avec l'API ECMAScript standard. C'est ce que certains appellent du Vanilla JS. Introduction Dernièrement, j'ai dû implémenter une fonctionnalité qui permettait d'afficher ou cacher...Un blog, c'est un blog !