Le premier exemple fait varier la hauteur du bloc; les suivants jouent sur les marges: margin-left pour N°2, margin-top pour N°3
Le paragraphe Un alterne entre une classe (open) avec une hauteur de 200 pixels et autre classe (close) avec une hauteur de 2px (simplement pour laisser l'élément visible pour vous. On peut ensuite mettre la hauteur à 0). Son contenu ne dépasse pas des bords par l'instruction overflow: hidden;; c'est-à-dire "ce qui dépasse: caché;" (par les bords).
Une transition dans chaque classe assure un passage fluide de l'une à l'autre. Le déclencheur est un "mouse event", onclick.
Le système de classes est conservé, qui définit deux états différents. On n'a plus qu'à faire des variantes sur ce "moteur". Par exemple ici deux nouvelles classes, "in" et "out", ont une marge gauche de 200px pour "in", et de MOINS -240px pour "out".Transition également pour passage fluide d'une classe à l'autre. Délencheur identique à l'exemple 1.
Déclencheurs identiques aux exemples 1 & 2.
On pourrait créer des effets sans boutons, plus subtils, en remplaçant onclick par mouseover/mouseout par exemple. Mais la généralisation des mobile devices et du tactile nous amène, SI ON VEUT FAIRE UN SITE "RESPONSIVE", à simplifier l'interface en pensant "bouton", "touch", et non plus les diverses opérations de la souris (mouseover, mouseout, mouseup, mousedown).