Read more - Read less

Mise en place d'un système « lire +/- » (read more/less) sur des éléments d'une la page.

Les changements de rendu de certains éléments étant gérés grâce aux media queries, il faut redimensionner la fenêtre du navigateur pour les voir, le breakpoint est à 768px.

Article, « lire +/- » toujours actif

Titre article

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Maecenas tellus elit, suscipit at laoreet et, tempor a orci.
Nulla in tortor nec est placerat condimentum in nec magna.
Nunc sollicitudin sem eget purus ultrices, bibendum pharetra augue aliquet.

Articles, création HTML

Pour cette première série les éléments concernant la gestion « lire +/- » font partie intégrante du HTML.

Titre article

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Maecenas tellus elit, suscipit at laoreet et, tempor a orci.
Nulla in tortor nec est placerat condimentum in nec magna.
Nunc sollicitudin sem eget purus ultrices, bibendum pharetra augue aliquet.

Titre article

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Maecenas tellus elit, suscipit at laoreet et, tempor a orci.
Nulla in tortor nec est placerat condimentum in nec magna.
Nunc sollicitudin sem eget purus ultrices, bibendum pharetra augue aliquet.
In ac mattis eros. Aenean libero mi, hendrerit sed malesuada sed, condimentum id enim.
Vivamus porta nec dui at vulputate.
Praesent nec risus non quam mattis bibendum sed quis orci.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Articles, création dynamique

Pour cette série les éléments concernant les actions « lire +/- » sont générés dynamiquement en JavaScript.

Titre article

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Maecenas tellus elit, suscipit at laoreet et, tempor a orci.
Nulla in tortor nec est placerat condimentum in nec magna.
Nunc sollicitudin sem eget purus ultrices, bibendum pharetra augue aliquet.

Titre article

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Maecenas tellus elit, suscipit at laoreet et, tempor a orci.
Nulla in tortor nec est placerat condimentum in nec magna.
Nunc sollicitudin sem eget purus ultrices, bibendum pharetra augue aliquet.
In ac mattis eros. Aenean libero mi, hendrerit sed malesuada sed, condimentum id enim.
Vivamus porta nec dui at vulputate.
Praesent nec risus non quam mattis bibendum sed quis orci.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.