Un effet accordéon sur les lignes

Comme pour les autres styles personnalisées applicables aux lignes, vous retrouverez cet effet dans le menu déroulant "Style", situé en bas à gauche de l'outil de création de pages.

Sur une page produit de votre boutique, vous pouvez appliquer le style "Accordéon" à plusieurs lignes contenant chacune d'elles des informations complémentaires sur votre article, comme l'illustre l'exemple ci-dessous :

Dans cet exemple, deux lignes ont été ajoutées, ayant respectivement pour titre "Détails du produit" puis "Matière et entretien". Le style "Accordéon" a ensuite été appliqué à chacune d'elles. Cliquer sur le titre d'une ligne aura pour effet d'en afficher le contenu ou de le masquer s'il est visible. Deux lignes ne peuvent être affichées simultanément, l'affichage d'une ligne cachera automatiquement le contenu de toutes les lignes sur lesquelles le style "Accordéon" est appliqué.

Le premier avantage est un allègement du contenu de vos pages. Vous masquez des informations que vous considérez secondaires, laissant le choix à l'internaute de les afficher ou non.

Le second avantage est que vous réduisez ainsi la hauteur de vos pages, ce qui n'est pas négligeable, notamment lors d'une consulation de votre site internet depuis un terminal mobile.

Enfin, vous apportez de l'animation dans vos pages, les rendant ainsi plus modernes.

Peut-être souhaiterez-vous que le contenu d'une ligne soit affiché par défaut ? Dans ce cas, il va vous falloir ajouter deux classes CSS sur la ligne concernée :

1. Dans le menu déroulant "Style", choisissez "Avancé".
2. Dans le champ "class" qui apparaît, saisissez alors les noms "row-panel" puis "open", séparé d'un espace.

La classe "open", combinée à la classe "row-panel", permet ainsi de forcer l'ouverture de la ligne au chargement de la page.

Ce style ne concerne que les thèmes responsive, conçus à partir des frameworks Bootstrap et EMS Framework.